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

Efektívne ladenie v prehliadači Chrome: Používanie bodov výnimiek

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

Na tejto poučke sa naučíš, ako efektívne pracovať s Exception-Breakpoints v nástrojoch Chrome Developer. Exception-Breakpoints ti umožňujú ladenie JavaScriptu tým, že automaticky zastavia program, keď dojde k výnimke (Exception). Je to obzvlášť užitočné, ak chceš sledovať chyby v kóde a porozumieť tomu, kde a prečo sa vyskytujú. Použitie Breakpoints je nevyhnutnou schopnosťou pre každého vývojára, ktorý chce zabezpečiť, že jeho kód je bezchybný. Poďme sa hneď ponoriť do detailov!

Najdôležitejšie poznatky

  • Exception-Breakpoints zastavujú program, keď nastane výnimka.
  • Môžeš rozlišovať medzi „Uncaught“ a „Caught“ výnimkami.
  • Vloženie príkazu debugger; ti umožní zastaviť program v konkrétnom bode.
  • Je dôležité odstrániť príkazy debugger; po skončení ladenia, aby bol výrobný kód udržiavaný čistým.

Postupná príručka

1. Aktivácia Exception-Breakpoints

Aby si aktivoval automatické zastavovanie pri výnimkách, otvor si nástroje Chrome Developer. Prejdi do menu "Sources" a nájdi sekciu "Breakpoints". Zaklikni políčko „Pause on Exceptions“ a „Pause on Caught Exceptions“.

Teraz sa program automaticky zastaví, keď nastane výnimka. Urobíš to tým, že použiješ nasledujúci kód, ktorý spôsobí jednoduchú výnimku.

Efektívne ladenie v Chrome: Používanie bodiek prerušenia výnimiek

Ak teraz spustíš kód, program sa zastaví na mieste, kde bola výnimka vyvolaná.

Efektívne ladenie v Chrome: Používanie bodov zlomu výnimiek

2. Práca s „Caught“ a „Uncaught“ výnimkami

Ak deaktivuješ možnosť „Caught Exceptions“, zistíš, že program sa nezastaví pri zachytených výnimkách.

Efektívne ladenie v programe Chrome: Používanie bodov výnimiek

Ak máš však výnimku v bloku try-catch, výnimka bude zachytená v bloku Catch a program bude pokračovať odtiaľto.

Efektívne ladenie v prehliadači Chrome: Používanie breakpointov výnimiek

Tu môžeš vidieť, že výnimka bola zachytená a môžeš vidieť konzolový výstup s chybou obsiahnutou v výnimke.

Efektívne ladenie v Chrome: Používanie bodov prerušenia výnimiek

3. Použitie na viacerých Breakpoints

Ak máš viacero Breakpoints v rôznych súboroch, môže sa to rýchlo zmeniť na neprehľadné. Avšak môžeš jednoducho deaktivovať všetky Breakpoints kliknutím pravým tlačidlom myši na jeden Breakpoint a výberom možnosti „Disable all Breakpoints“.

Efektívne ladenie v Chrome: Používanie bodov zastavenia výnimiek

Tým sa všetky Breakpoints deaktivujú a môžeš ich neskôr zase aktivovať, ak je to potrebné.

4. Použitie príkazu debugger;

Ďalšou užitočnou technikou pri ladení je vloženie príkazu debugger; do tvojho kódu. Tým sa program zastaví v tomto bode ihneď po obnovení stránky.

Efektívne ladenie v prehliadači Chrome: Používanie výnimkových breakpointov

Pri používaní príkazu Debuger-Statements je dôležité pamätať si, že by si ho mal odstrániť zo svojho kódu pred tým, ako prejdeš do produkčného prostredia, keďže v živej aplikácii nie je užitočný.

Efektívne ladenie v Chrome: Použitie zlomového bodu výnimky

Ak vložíš príkaz debugger;, program sa zastaví v tomto konkrétnom mieste, umožňujúc ti skontrolovať aktuálne premenné a priebeh programu.

5. Opatrnosti pri práci s výnimkami

Pri práci s výnimkami by si mal byť opatrný, najmä ak používaš veľa knižníc tretích strán. Tie môžu tiež spôsobiť výnimky a môže byť rušivé, keď sa tvoj kód neustále zastavuje.

Efektívne ladenie (debugging) v Chrome: Používanie bodov na prerušenie výnimiek

Ak viete, že vaša aplikácia generuje výnimky, môže byť užitočné aktivovať možnosť "Nechytené výnimky" na ich odhalenie počas procesu ladenia.

Efektívne ladenie v Chrome: Používanie bodov prerušenia výnimiek

Pamätajte si, že nie každá výnimka vedie k problému. Výnimka sa môže jednoducho zachytiť a nemusí negatívne ovplyvniť používateľský zážitok.

Zhrnutie

V tejto príručke ste sa naučili, ako môžete využiť Breakpoints na výnimky v Chrome Developer Tools na nájdenie chýb vo vašom JavaScriptovom kóde. Videli ste, ako môžete tieto Breakpoints aktivovať a efektívne používať na zabezpečenie hladkého fungovania vašich aplikácií. Porozumenie a implementácia týchto techník výrazne zlepší vašu efektivitu pri ladení.

Často kladené otázky

Ako aktivujem Breakpoints na výnimky v Chrome Developer Tools?Otvorte Chrome Developer Tools, prejdite na „Sources“ a aktivujte „Pozastaviť pri výnimkách“ a „Pozastaviť pri chytených výnimkách“.

Aký je rozdiel medzi "chytenými" a "nechytenými" výnimkami?"Chytené výnimky" sú tie, ktoré sú spracované v try-catch bloku, zatiaľ čo "Nechytené výnimky" nie sú zachytené a priamo sa prenášajú na spracovanie chyby.

Ako môžem deaktivovať všetky svoje Breakpoints?Kliknite pravým tlačidlom myši na Breakpoints a zvoľte možnosť „Vypnúť všetky Breakpoints“ z kontextového menu.

Čo je to príkaz debugger;- a ako ho používam?Príkaz debugger;- je JavaScriptový príkaz, ktorý zastaví program na tomto mieste. Mali by ste ho odstrániť z vášho kódu po ladení.

Prečo by som mal odstrániť príkaz debugger;- pred tým, ako sa presuniem do produkcie?Môže to viesť k zastaveniu vašej aplikácie v bode, kde to nebolo vaším zámerom, a tým negatívne ovplyvniť používateľský zážitok.