Jaké nástroje a záložky v Chrome DevTools používáš k ladění a analýze webových stránek?

Pro ladění a analýzu webových stránek v Chrome DevTools obvykle používám následující záložky:

• Elements — pro prohlížení a úpravu struktury DOM a stylů CSS v reálném čase.
• Console — pro zobrazování logů, spouštění JavaScriptového kódu a odhalování chyb.
• Network — pro analýzu síťových požadavků, kontrolu načítání zdrojů, dobu odezvy a stavy.
• Sources — pro ladění JavaScriptového kódu, nastavování bodů přerušení a krokové provádění.
• Performance — pro profilování výkonu stránky, analýzu doby načítání a vykreslování.
• Application — pro práci s místním úložištěm, cookies, IndexedDB a cache.
• Security — pro kontrolu bezpečnosti spojení a certifikátů.

Příklad: pokud se stránka načítá dlouho, otevřu záložku Network, seřadím požadavky podle času a podívám se, které zdroje zpomalují načítání.