Aké nástroje a funkcie používate v Chrome DevTools na analýzu a ladenie webových stránok?

V Chrome DevTools často používam nasledujúce nástroje a funkcie na analýzu a ladenie webových stránok:

• Elements — na zobrazenie a úpravu DOM a CSS v reálnom čase.
• Console — na spúšťanie JavaScript kódu a prehliadanie logov, chýb.
• Network — na analýzu sieťových požiadaviek, časy načítania zdrojov, kontrolu odpovedí servera.
• Sources — na ladenie JavaScriptu s možnosťou nastavovania bodov prerušenia.
• Performance — na profilovanie výkonu stránky, identifikáciu úzkych miest.
• Application — na prácu s lokálnym úložiskom, cookies, IndexedDB.
• Lighthouse — na audit výkonu, prístupnosti a SEO.

Napríklad, na sledovanie problému s načítaním, otvorím kartu Network, filtrujem podľa typu zdroja a kontrolujem stav a čas načítania každého súboru.