Efektívne používanie vývojárskych nástrojov Chrome (tutoriál)

Podmienené zastávkové body v nástrojoch pre vývojárov Chrome: Sprievodca účinným ladením

Všetky videá tutoriálu Efektívne používanie vývojárskych nástrojov Chrome (tutoriál)

V tomto návode sa dozvieš, ako nastaviť podmienené prerušenia v nástrojoch Chrome Developer Tools. S podmienenými prerušeniami môžeš proces ladenia efektívnejšie spraviť tým, že zabezpečíš, že tvoj kód sa zastaví iba v určitých situáciách. Je to obzvlášť užitočné, ak pracuješ na stránkach s veľkým množstvom interakcií a chceš skontrolovať vykonanie kódu len v špecifických okamihov.

Najdôležitejšie poznatky

  • Podmienené prerušenia ti umožnia stanoviť špecifické podmienky, za ktorých by mala byť kód zastavený debuggerom.
  • Môžeš používať ľubovoľné výrazy, aby si zvýšil kontrolu nad procesom ladenia.
  • Nauč sa, ako pridávať, upravovať a odstraňovať prerušenia a spoznaj aj ďalšie typy prerušení.

Krokový sprievodca

Aby si mohol/a efektívne využívať podmienené prerušenia, dodržuj tieto kroky:

Na nastavenie prerušenia jednoducho klikni na číslo riadku, kde chceš zastaviť kód. Tým sa zobrazí modrý bod, ktorý predstavuje prerušenie.

Podmienené zastavenie (breakpoints) v Chrome Developer Tools: Sprievodca pre efektívne ladenie

Kliknutím pravým tlačidlom myši na práve nastavené prerušenie sa otvorí ponuka, v ktorej môžeš vybrať rôzne možnosti. Tu môžeš prerušenie tiež deaktivovať. Ak deaktivuješ prerušenie, zostane v kóde, ale nebude viac aktívne.

Podmienené prestávky v Chrome Developer Tools: Sprievodca efektívnym ladením

Užitočnou funkciou je možnosť „Upraviť prerušenie“. Vybraním tejto možnosti môžeš pridať podmienku. To ti umožňuje zadať výraz, ktorý potom určuje, kedy sa má prerušenie spustiť.

Je vhodné skontrolovať napríklad premennú ako count. Predpokladajme, že zadáš count == 8. To znamená, že prerušenie sa spustí až keď count dosiahne hodnotu 8.

Podmienené prestávky v nástrojoch pre vývojárov Chrome: Sprievodca efektívnym ladením

Na potvrdenie podmienky stlač „Return“. V kóde sa prerušenie zobrazí oranžovo s otáznikom, aby naznačil, že ide o podmienené prerušenie.

Podmienené zastavenie v nástrojoch pre vývojárov Chrome: Sprievodca efektívnym ladením

Teraz obnov stránku. V tomto bode by sa debugger nemal zastaviť, pretože podmienka nebola splnená ani skontrolovaná. Niekoľkokrát stlač count, aby sa navýšil.

Ak count dosiahne hodnotu, ktorá splňuje podmienku (v našom prípade 8), uvidíš, že sa debugger zastaví, presne ako očakávaš.

Podmienkové bity v nástrojoch pre vývojárov v Chrome: Sprievodca efektívnym ladením

Ak chceš kedykoľvek skontrolovať aktuálnu podmienku, môžeš znovu kliknúť na „Upraviť prerušenie“ a uvidíš všetky aktívne podmienky.

Podmienené prerušenia v nástrojoch pre vývojárov Chrome: Sprievodca efektívnym ladením

Okrem podmienených prerušení existujú aj iné typy ako Logpoints. Logpoint je ďalšia užitočná funkcia, ktorá ti umožňuje nastaviť podmienky, ale namiesto zastavenia sa len vypíše správa, napríklad „true“ alebo „false“, v závislosti od toho, či je podmienka splnená alebo nie.

Podmienené prerušenie v Chrome Developer Tools: Sprievodca efektívnym ladením

Akonáhle znova načítate a kliknete, zistíte, že získate „false“ alebo „true“ v závislosti na stave podmienky.

Podmienené prerušenie v Chrome Developer Tools: Sprievodca efektívnym ladením

Je dôležité pochopiť tieto rôzne typy breakpointov, pretože vám môžu pomôcť optimalizovať vašu ladenie kódu.

Podmienené zastavenia v Chrome Developer Tools: Sprievodca efektívnym ladením

Na správu všetkých nastavených breakpointov existuje prehľad, kde môžete existujúce breakpointy odstrániť alebo upraviť. Keď kliknete na jeden konkrétny breakpoint, budete okamžite presmerovaní na miesto v kóde, kde je breakpoint nastavený.

Zhrnutie

V tomto návode ste sa naučili, ako efektívne využívať podmienené breakpointy na optimalizáciu procesu ladenia kódu vo vašich webových aplikáciách. Videli ste, ako pridávať, upravovať a odstraňovať breakpointy, ako aj ako môžu byť použité alternatívne typy breakpointov.

Často kladené otázky

Čo sú podmienené breakpointy?Podmienené breakpointy sú breakpointy, ktoré sa aktivujú len v prípade, že sú splnené určité podmienky.

Ako nastavím podmienený breakpoint?Kliknite pravým tlačidlom myši na breakpoint a vyberte „Editovať breakpoint“, aby ste pridali podmienku.

Čo sa stane, ak nie je splnená podmienka pre breakpoint?Ak podmienka nie je splnená, debugger nezastaví na tomto breakpointe.

Môžem používať logické body v Chrome Developer Tools?Áno, logické body sú alternatívou k breakpointom, kde môžete nastaviť podmienky, ktoré namiesto zastavenia len vypíšu správu.

Aké ďalšie typy breakpointov existujú?Okrem podmienených breakpointov existujú aj DOM a Fetch breakpointy, ktoré stanovujú špeciálne body zastavenia pre interakciu s DOM alebo Fetch požiadavkami.