Ladění v Chrome DevTools: breakpointy, síť, výkon a triky

Většina vývojářů používá DevTools jen na console.log a inspekci CSS. Přitom umí mnohem víc: zastavit kód přesně tam, kde vzniká chyba, simulovat pomalou síť, podvrhnout odpověď API nebo ukázat, proč stránka seká. Otevřete je klávesou F12 nebo Ctrl+Shift+I (na Macu Cmd+Option+I).

Konzole: víc než console.log

console.table(users);                    // pole objektů jako tabulka
console.log({ user, cart });             // objekt se jmény proměnných
console.group('Načítání'); …; console.groupEnd();
console.time('render'); …; console.timeEnd('render');
console.trace();                         // odkud byla funkce zavolána
console.assert(items.length > 0, 'Prázdný košík');

Příkazy dostupné jen v konzoli DevTools:

Příkaz	Co dělá
`$0`	aktuálně vybraný prvek v panelu Elements
`$('sel')`, `$$('sel')`	`querySelector` / pole všech výsledků
`copy(obj)`	zkopíruje hodnotu do schránky (např. JSON odpovědi)
`monitorEvents($0, 'click')`	vypisuje události prvku
`getEventListeners($0)`	ukáže navázané posluchače
`queryObjects(Promise)`	najde všechny instance daného konstruktoru v paměti

Tip: Live expression (ikona oka v konzoli) průběžně zobrazuje hodnotu výrazu, např. document.activeElement – ideální pro ladění fokusu.

Breakpointy místo console.log

V záložce Sources najděte soubor (Ctrl+P) a klikněte na číslo řádku. Při zastavení vidíte všechny proměnné v rozsahu, zásobník volání a můžete krokovat:

Klávesa	Akce
F8	pokračovat
F10	další řádek (přes funkci)
F11	vstoupit do funkce
Shift+F11	vystoupit z funkce

Ve zdrojovém kódu funguje i příkaz debugger; – pokud jsou DevTools otevřené, kód se na něm zastaví.

Pokročilejší typy breakpointů (pravé tlačítko na číslo řádku):

Conditional breakpoint – zastaví jen při splnění podmínky, např. item.id === 42. Ve smyčce přes tisíc položek nezbytné.
Logpoint – vypíše zprávu do konzole bez úpravy kódu a bez zastavení. Žádné zapomenuté console.log v commitu.

V pravém panelu Sources najdete další:

XHR/fetch Breakpoints – zastaví, když se volá URL obsahující zadaný text.
Event Listener Breakpoints – zastaví při kliknutí, stisku klávesy, setTimeout…
DOM breakpoints (pravým na prvek v Elements → Break on) – zastaví, když nějaký skript změní atributy nebo potomky prvku. Skvělé na otázku „kdo mi sem přidává tuhle třídu?”.
Pause on caught/uncaught exceptions – zastaví přesně v místě vyhození výjimky.

Pro kód z bundlerů zapněte source mapy (ve Vite a Next.js jsou ve vývoji výchozí), pak ladíte původní TypeScript, ne zkompilovaný výstup. Knihovny z node_modules lze přidat do Ignore listu, aby krokování neskákalo do cizího kódu.

Network: co se opravdu posílá

Filtr Fetch/XHR ukáže jen volání API.
U požadavku: Headers (status, hlavičky, cookies), Payload (odeslaná data), Preview/Response (odpověď), Timing (kde se čekalo).
Preserve log – záznam se nesmaže při přesměrování nebo odeslání formuláře.
Disable cache – při otevřených DevTools ignoruje HTTP cache.
Throttling (Fast 4G, Slow 4G, Offline) – jak se web chová na pomalém připojení.
Pravým tlačítkem → Copy → Copy as cURL / Copy as fetch – zopakujete požadavek v terminálu nebo konzoli.
Block request URL – otestujete, co se stane, když skript třetí strany nebo API neodpoví.

Local overrides: podvržení odpovědi

Potřebujete otestovat frontend s jinými daty z API, ale backend upravit nemůžete? Pravým tlačítkem na požadavek → Override content. DevTools si vyžádá složku pro uložení přepsaných souborů, pak můžete odpověď upravit a stránka ji při dalším načtení dostane místo skutečné. Stejně jde přepsat i hlavičky (Override headers) – například otestovat Content-Security-Policy bez zásahu do serveru.

Elements a CSS

Ctrl+Shift+C – výběr prvku kliknutím na stránce.
Panel Computed – výsledná hodnota vlastnosti a kliknutím na šipku přímo pravidlo, které ji nastavilo.
Přeškrtnutá vlastnost = přebitá jiným pravidlem; ikona ⓘ u neaktivní vlastnosti vysvětlí, proč nemá účinek (např. width na inline prvku).
:hov – vynutí stav :hover, :focus, :active a prvek můžete prohlížet bez držení myši.
Štítky grid / flex u prvků zapnou překryv s mřížkou.
Pravým na prvek → Scroll into view, Capture node screenshot.

Změny CSS v DevTools jsou dočasné. V záložce Changes (přes Ctrl+Shift+P → „Show Changes”) uvidíte diff všeho, co jste upravili, a můžete ho zkopírovat do zdrojáků.

Performance: proč to seká

Záložka Performance → nahrávání (●), proveďte pomalou akci, zastavte.
Hledejte dlouhé úlohy (červený roh, nad 50 ms) v sekci Main.
Klikněte na úlohu, dole v Bottom-Up seřaďte podle Self time – uvidíte funkce, které zabraly nejvíc času.
Fialové bloky Layout opakující se rychle po sobě signalizují layout thrashing – střídání čtení (offsetHeight) a zápisu stylů ve smyčce.

Pro realističtější výsledek zapněte CPU throttling (4× nebo 6× zpomalení) – váš vývojářský počítač je výrazně rychlejší než průměrný telefon.

Memory: úniky paměti

V záložce Memory pořiďte Heap snapshot, proveďte akci (otevřít a zavřít modální okno desetkrát), pořiďte druhý snapshot a v režimu Comparison hledejte objekty, kterých přibylo. Typické příčiny: neodebrané event listenery, intervaly bez clearInterval, odpojené DOM prvky držené v proměnné (filtr „Detached”).

Application: úložiště

Prohlížení a mazání localStorage, cookies (včetně příznaků HttpOnly, Secure, SameSite), IndexedDB, Cache Storage a service workerů. Clear site data vrátí web do stavu prvního návštěvníka.

Command menu

Ctrl+Shift+P otevře paletu příkazů. Užitečné položky: Screenshot (celá stránka), Disable JavaScript, Show Rendering (emulace prefers-color-scheme, prefers-reduced-motion, poruch barevného vidění), Show Coverage (kolik CSS a JS se reálně nepoužije).

Ladění na telefonu

Android: zapněte ladění přes USB, připojte telefon a v Chrome na počítači otevřete chrome://inspect. Uvidíte stránky otevřené v mobilním Chrome a můžete je ladit plnými DevTools. iPhone se ladí obdobně přes Safari na Macu (Vývojář → název zařízení).