V tejto príručke ti ukážem, ako môžeš využívať nástroje Chrome Developer Tools na efektívne a podrobne riadenie procesu Debuggingu. Naučíš sa, ako postupne navigovať cez zdrojový kód a cielene podporiť určité body v behu programu. Dôraz sa kladie na to, aby ti pomohol priateľské klávesové skratky a funkcie, ktoré ti uľahčia Debugging a zlepšia tvoj pracovný postup.
Najdôležitejšie poznatky
- Môžeš rýchlo a efektívne navigovať cez veľké kódy použitím vyhľadávania v súboroch.
- Krokovanie pri Debuggingu je podporované rôznymi skratkami a funkciami, ktoré uľahčujú jednoduché prechádzanie kódom.
- Pre asynchrónne funkcie existujú špeciálne mechanizmy, ktoré zrozumiteľní, ktoré časti kódu sa vykonávajú.
Kroková príručka
Pre začatie Debuggingu v nástrojoch Chrome Developer Tools postupuj podľa týchto krokovov:
Ak hľadáš správne súbory, môžeš použiť skratku „Command P“ na Macu alebo „Strg P“ vo Windowse. Tým sa otvorí hľadacia lišta, do ktorej môžeš zadať názov súboru, ktorý hľadáš. Okamžite uvidíš, ako sú výsledky filtrované, a môžeš rýchlejšie nájsť požadovaný dokument.
Ak hľadáš konkrétny súbor a nevieš presný názov, môžeš tiež zadať časti názvu alebo kľúčové slová obsiahnuté v názve súboru. Tým dosiahneš efektívne filtrovanie, najmä v rozsiahlych projektoch s veľkým počtom súborov.
Okrem toho v nástrojoch Chrome Developer Tools existujú klávesové skratky, ktoré uľahčujú navigáciu v kóde. Tieto skratky sú veľmi užitočné na prechádzanie zdrojového kódu. Použi klávesy F8 (na pokračovanie v aktuálnej funkcii) a F10 (pre nasledujúci volanie funkcie), čo ti umožní rýchlejšie a efektívnejšie vykonávať Debugging.
Ak chceš skočiť do funkcie, stlač kláves F11. Tým sa dostaneš priamo do vybranej funkcie. Môžeš sa tiež vrátiť z funkcie stlačením „Shift F11“, čo ťa posunie o úroveň vyššie. Tieto pohyby sú dôležité na porozumenie behu programu a účinkov určitého kódu.
Pri práci s asynchrónnym kódom existujú špeciálne úvahy, ktoré by si mal urobiť. Pri asynchrónnych volaniach môžeš rozlíšiť medzi klávesmi „Step into“ (F11) na zanořenie sa do funkcie a „Step over“ (F9) na preskočenie vykonávania.
Pre ešte efektívnejší proces Debuggingu môžeš nastaviť aj dočasné breakpointy. Klikni pravým tlačidlom myši na riadok kódu a vyber možnosť „Continue to here“. Program sa vykoná až do tohto bodu bez trvalých zastávok na iných riadkoch.
Ďalším užitočným nástrojom v nástrojoch Developer Tools je možnosť resetovať vykonávanie funkcie. To znamená, že stlačením tlačidla „Restart Frame“ sa vrátiš na začiatok funkcie, pričom sa nepole vracajú. Táto funkcia je obzvlášť užitočná, ak chceš opakovane testovať správanie funkcie pri určitých podmienkach.
Všetky tieto triky a skratky nakoniec robia z Debuggingu oveľa rýchlejší proces. Keď máš pocit, že sa tvoj Debugging nepohne dopredu, skontroluj možnosti, ktoré ti ponúkajú Developer Tools. Počas vykonávania krokov si všimni, že sa oboznámis so skratkami, aby si zvýšil svoju efektivitu.
Zhrnutie
V tejto príručke si sa naučil, ako najlepšie využívať Chrome Developer Tools na navigáciu v zdrojovom kóde a zvládanie komplexných situácií pri Debuggingu. Použitie skratiek a špecifických funkcií ti umožňuje hlbšiu kontrolu nad procesom Debuggingu, či už pracuješ so synchronným alebo asynchrónnym kódom.
Často kladené otázky
Ako môžem rýchlo nájsť súbor v Chrome Developer Tools?Použite klávesovú skratku „Ctrl P“ na Windows alebo „Command P“ na Mac a zadajte časť názvu súboru.
Aký je rozdiel medzi F11 a F9 pri ladení kódu?F11 vstupuje do funkcie, zatiaľ čo F9 ju preskočí a priamo prejde na ďalší blok kódu.
Ako nastavím dočasné body zastavenia (breakpoints)?Kliknite pravým tlačidlom myši do kódu a vyberte možnosť „Pokračovať až sem“, aby ste program vykonali až po túto pozíciu.
Čo sa deje pri „Restart rámu“?Vykonanie sa presunie na začiatok funkcie bez resetovania aktuálnych premenných.
Môžem vykonávať ladenie (debugging) aj bez bodov zastavenia?Áno, je to možné tým, že použijete funkcie Pokračovať alebo riadené prechody programom pomocou opísaných skratiek.
