Použití nástrojů vývojáře v prohlížeči Chrome (návod)

Podmíněné body přerušení v nástrojích pro vývojáře Chrome: Průvodce efektivním laděním

Všechna videa tutoriálu Používání Chrome Developer Tools účelně (návod)

V tomto návodu se dozvíš, jak nastavit podmíněné breakpointy v Chrome Developer Tools. S podmíněnými breakpointy můžeš proces ladění efektivnějším způsobem zpracovat tím, že zajistíš, že tvůj kód se zastaví pouze za určitých podmínek. To je zvláště užitečné, pokud pracuješ na stránkách s mnoha interakcemi a chceš ověřit provádění kódu pouze v konkrétních okamžicích.

Nejdůležitější poznatky

  • Podmíněné breakpointy ti umožňují stanovit specifické podmínky, za nichž má ladící program zastavit kód.
  • Můžeš použít libovolné výrazy, abys tak zvýšil kontrolu nad procesem ladění.
  • Nauč se, jak přidávat, upravovat a odebírat breakpointy a seznámit se s alternativními typy breakpointů.

Krok za krokem průvodce

Aby sis efektivně mohl/a využít podmíněné breakpointy, postupuj podle těchto kroků:

Abys nastavil/a breakpoint, stačí kliknout na číslo řádku místa, kde chceš zastavit kód. Když tak učiníš, bude se zobrazovat modrá tečka představující breakpoint.

Podmíněné zarážky v Chrome Developer Tools: Průvodce účinným laděním

Klepnutím pravým tlačítkem myši na zastavený breakpoint se otevře menu, ve kterém můžeš vybrat různé možnosti. Zde můžeš také zrušit breakpoint. Pokud zrušíš breakpoint, zůstane v kódu, ale nebude již aktivní.

Podmíněné body přerušení v nástrojích pro vývojáře Chrome: Průvodce efektivním laděním

Užitečnou funkcí je možnost „Editovat breakpoint“. Vybráním této možnosti můžeš přidat podmínku. To ti umožní zadat výraz, který určuje, kdy se breakpoint má spustit.

Je například vhodné zkontrolovat proměnnou jako count. Předpokládejme, že zadáš count == 8. To znamená, že se breakpoint spustí, až count dosáhne hodnoty 8.

Podmíněné body v Chrome Developer Tools: Průvodce efektivním laděním

Pro potvrzení podmínky stiskni „Enter“. V kódu se breakpoint zobrazí oranžově s otazníkem, což naznačuje, že jde o podmíněný breakpoint.

Podmíněné zastavení běhu v nástrojích pro vývojáře Chrome: Průvodce efektivním laděním

Nyní obnov stránku. Ladící program by se na tomto místě neměl zastavit, protože podmínka nebyla ani splněna, ani ověřena. Několikrát stiskni count, aby se zvýšil.

Když count dosáhne hodnoty, která splňuje podmínku (v našem případě 8), uvidíš, že se ladící program zastaví, přesně jako bylo očekáváno.

Podmíněné breakpointy v nástrojích pro vývojáře Chrome: Průvodce efektivním laděním

K oveření aktuální podmínky stačí kliknout znova na „Editovat breakpoint“, a uvidíš, že podmínka „count == 8“ je aktivní.

Pokud dál stiskneš count, ladící program se již nebude zastavovat, pokud nezměníš podmínku.

Podmíněné body přerušení v nástrojích pro vývojáře Chrome: Průvodce efektivním laděním

Máš flexibilitu vkládat libovolné výrazy do pole podmínek. Můžeš například použít podmínku, která říká, že count je větší než 8.

Podmíněné zástavce v Chrome Developer Tools: Průvodce efektivním laděním

Pokud provedeš změnu a poté obnovíš stránku, ladící program se zastaví, pokud je podmínka splněna.

Podmíněné breakpointy v nástrojích pro vývojáře Chrome: Průvodce efektivním laděním

Při každém stisknutí count se ladící program také zastaví, pokud je count nyní větší než 8.

Pro kontrolu podmínky kdykoliv můžeš znovu přejít na „Editovat breakpoint“ a uvidíš všechny aktivní podmínky.

Podmíněné průlomy v nástrojích pro vývojáře Chrome: Průvodce efektivním laděním

Kromě podmíněných breakpointů existují také další typy jako Logpoints. Logpoint je další užitečná funkce, která ti umožňuje stanovit podmínky, ale místo zastavení se pouze vypíše zpráva, například „true“ nebo „false“, podle toho, zda je podmínka splněna.

Podmíněné breakpointy v Chrome Developer Tools: Průvodce efektivním laděním

Až znovu načtete a kliknete, zjistíte, že obdržíte „false“ nebo „true“ podle stavu podmínky.

Podmíněné zastavení v Chrome Developer Tools: Průvodce efektivním laděním

Je důležité porozumět těmto různým typům breakpointů, protože vám mohou pomoci optimalizovat vaši ladící práci.

Podmíněné zastavení v Chrome Developer Tools: Průvodce efektivním laděním

Pro správu všech nastavených breakpointů existuje přehled, kde můžete existující breakpointy smazat nebo upravit. Pokud kliknete na jednotlivý breakpoint, budete přesměrováni přímo k místu, kde je breakpoint v kódu nastaven.

Shrnutí

V tomto tutoriálu jste se naučili, jak efektivně využívat podmíněné breakpointy k optimalizaci procesu ladění ve vašich webových aplikacích. Viděli jste, jak přidávat, upravovat a odstraňovat breakpointy, stejně jako jakými alternativními typy breakpointů lze pracovat.