Aké nástroje a záložky v Chrome DevTools používaš na ladenie a analýzu webových stránok?

Na ladenie a analýzu webových stránok v Chrome DevTools obvykle používam nasledujúce záložky:

• Elements — na prehliadanie a úpravu štruktúry DOM a štýlov CSS v reálnom čase.
• Console — na zobrazovanie logov, spúšťanie JavaScript kódu a odhaľovanie chýb.
• Network — na analýzu sieťových požiadaviek, kontrolu načítania zdrojov, časov odpovede a stavov.
• Sources — na ladenie JavaScript kódu, nastavovanie bodov prerušenia a krokové vykonávanie.
• Performance — na profilovanie výkonu stránky, analýzu časov načítania a vykresľovania.
• Application — na prácu s lokálnym úložiskom, cookies, IndexedDB a cache.
• Security — na kontrolu bezpečnosti spojenia a certifikátov.

Príklad: ak sa stránka načítava dlho, otvorím záložku Network, zoradím požiadavky podľa času a pozriem, ktoré zdroje spomaľujú načítanie.