V této příručce se naučíš, jak efektivně pracovat s Exception-Breakpoints nástrojů Chrome Developer Tools. Exception-Breakpoints ti umožní ladit tvůj JavaScript tím, že automaticky zastaví program, když dojde k výjimce (Exception). To je zejména užitečné, pokud chceš sledovat a porozumět chybám ve svém kódu, kde a proč se vyskytují. Používání Breakpoints je nezbytnou dovedností pro každého vývojáře, který chce zajistit, že jeho kód je bezchybný. Pojďme se rovnou ponořit do detailů!
Nejdůležitější poznatky
- Exception-Breakpoints zastaví program, když dojde k výjimce.
- Můžeš rozlišit mezi „Nevařenou“ a „Vyvolanou“ výjimkou.
- Vložení debugger;-Statements ti umožní zastavit program na určeném místě.
- Je důležité odstranit debugger;-Statements po dokončení ladění, aby se udržel produkční kód čistý.
Krok za krokem průvodce
1. Aktivace Exception-Breakpoints
Abys aktivoval automatické zastavení při výjimkách, otevři Chrome Developer Tools. Jdi do menu "Sources" a najdi sekci "Breakpoints". Zaškrtni volbu "Zastavit při výjimkách" a "Zastavit při zachycených výjimkách".
Nyní se program automaticky zastaví, když dojde k výjimce. Uděláš to tak, že použiješ následující kód, který vyvolá jednoduchou výjimku.
Když nyní spustíš kód, program se zastaví na místě, kde byla výjimka vyvolána.
2. Práce s „Zachycenými“ a „Nevařenými“ výjimkami
Pokud zakážeš možnost „Zachycené výjimky“, zjistíš, že program se při zachycených výjimkách nezastaví.
Pokud ale máš výjimku v bloku try-catch, výjimka bude zachycena v bloku Catch a program bude pokračovat odtud dál.
Zde můžeš vidět, že výjimka byla zachycena a můžeš zobrazit výstup konzoly s chybou obsaženou ve výjimce.
3. Použití více Breakpoints
Pokud máš několik Breakpoints v různých souborech, může být situace rychle nejasná. Avšak můžeš jednoduše deaktivovat všechny Breakpoints tak, že pravým tlačítkem myši klikneš na jednu z těchto značek a vybereš možnost „Deaktivovat všechny Breakpoints“.
Tím se všechny Breakpoints deaktivují a můžeš je znovu aktivovat, pokud je to potřeba.
4. Použití Debugger;-Statements
Další užitečná technika při ladění je vložení debugger;-Statements do tvého kódu. Tím se program na tomto místě zastaví ihned po načtení stránky.
Při použití Debugger-Statements si pamatuj, že bys je měl odstranit ze svého kódu před tím, než přejdeš do produkčního prostředí, protože na živém nasazení nebude užitečný.
Pokud vložíš debugger;-Statement, program se zastaví na tomto specifickém místě, což ti umožní zkontrolovat aktuální proměnné a průběh programu.
5. Opatření při práci s výjimkami
Při práci s výjimkami bys měl být opatrný, zejména pokud používáš mnoho knihoven třetích stran. Ty mohou také vyvolávat výjimky a může to být rušivé, pokud se tvůj kód neustále zastavuje.
Pokud víte, že vaše aplikace generuje výjimky, může být užitečné povolit možnost "Nezachycené výjimky", abyste je mohli během procesu ladění detekovat.
Pamatujte, že ne každá výjimka vede k problému. Výjimka může být jednoduše zachycena a tím nenegativně ovlivnit uživatelskou zkušenost.
Shrnutí
V tomto návodu jste se naučili, jak můžete využít bodové značky výjimek v nástrojích pro vývojáře Chrome k nalezení chyb ve svém JavaScriptovém kódu. Viděli jste, jak můžete tyto body značky aktivovat a efektivně využít k zajištění plynulého provozu vašich aplikací. Porozumění a implementace těchto technik výrazně zlepší vaši efektivitu při ladění.
Často kladené dotazy
Jak mohu aktivovat body značky výjimek v nástrojích pro vývojáře Chrome?Otevřete nástroje pro vývojáře Chrome, přejděte na "Sources" a povolte "Pozastavení na výjimkách" a "Pozastavení na odchycených výjimkách".
Jaký je rozdíl mezi "Odchycenými" a "Nezachycenými" výjimkami?"Odchycené výjimky" jsou ty, které jsou zpracovány v bloku try-catch, zatímco "Nezachycené výjimky" nejsou zachyceny a jsou předány přímo k obsluze chyb.
Jak mohu deaktivovat všechny své body značky?Klikněte pravým tlačítkem myši na bod značky a vyberte z kontextové nabídky "Zakázat všechny body značky".
Co je to příkaz debugger; a jak ho používám?Příkaz debugger; je JavaScriptový příkaz, který zastaví program v tomto místě. Měli byste ho odstranit ze svého kódu po dokončení ladění.
Proč bych měl odstranit příkaz debugger; předtím než půjdu do produkce?Může to způsobit, že vaše aplikace zastavíte v místě, které jste nezamýšleli, a tím negativně ovlivníte uživatelskou zkušenost.
