Každý asi ví, že Javascriptový kód jde debugovat vložením slova debugger do kódu nebo vložením breakpointu – což je omezeno tím, že jde vložit jen do JS souboru. Věděli jste ale, že je možné zastavit vykonávání javascript v okamžiku, kdy je zavolána nativní funkce prohlížeče nezávisle na to, která část javascriptu ji vyvolala?

Chrome, ostatní jen něco

Plnou podporu vložení breakpointu do nativních funkcí má jen DevTools v prohlížeči Chrome. V ostatních prohlížečích je možno zastavit jen něco – např. ve Firefoxu můžete vložit breakpoint do XHR požadavku (AJAX).

Reakce na změny DOMu

V Chrome spusťte DevTools (klávesa F12) a přepněte se na záložku Sources. V pravém sloupci (pokud ho nevidíte, klikněte na ikonu vpravo nahoře) rozbalte položku Event Listener Breakpoints.

V seznamu najděte typ událostí, která vás zajímá, rozbalte ji a zaškrtněte události nebo metody, které chcete sledovat. Kód se samozřejmě nezastaví uvnitř nativní metody, ale těsně před jejím zavoláním na řádku Javascriptu, který ji volá, nebo v případě události naopak na začátku funkce, která na ni reaguje

Vstup uživatele

Na vstup uživatele můžete reagovat skledováním událostí typu Mouse (myš), Keyboard (klávesnice), Pointer (ukazatel typu stylus), Touch (dotykové akce), Drag/drop (přetažení) a Clipboard (vložení textu nebo obrázku)

Vždy je potřeba zvolit správnou událost podle toho, na co chcete reagovat. Například u klávesnice má možnost keydown, keypress, keyup a input, přičemž každý se vyvolá v jiné fázi stisku klávesy.

Také pamatujte na to, že pokud dáte breakpoint na více sousledných událostí, nemusí již dojít k vyvolání těch následných. Například pokud dáte breakpoint na keydown a keyup, debugger se zastaví na všech funkcích reagující na keydown. Jelikož ale pravděpodobně uvolníte klávesu v okamžiku, kdy je kód pozastaven na keydown, událost keyup se provede na pozadí a již nedojde k zastavení na funkcích reagující na keyup. Pokud tedy hledáte konkrétní funkci, bude potřeba volit události postupně a zkoušku opakovat.

Vložení a odebrání DOM prvků

Pod typem Parse se nachází dvě akce document.write a Set innerHTML, pomocí kterých můžete reagovat na okamžik, kdy prohlížeč vkládá nové prvky vložené pomocí HTML kódu (myšleno HTML tagy zadané jako text). Pomocí innerHTML je pak možné reagovat i na okamžik, kdy jsou prvky odebrány z DOMu v důsledku změny innerHTML jejich rodiče.

Pod DOM Mutations jsou pak akce DOMNodeInserted a DOMNodeInsertedIntoDocument, které reagují na vložení jednoho prvku do jiného pomocí javaskriptových funkcí pracující s prvky vytvořenými přes document.createElement nebo existujících prvků získaných pomocí selektoru (např. document.getElementById). Události
DOMNodeRemoved a DOMNodeRemovedFromDocument naopak reagují na programové odebrání prvku pomocí například pomocí removeChild.

Události DOMNodeInsertedIntoDocument a DOMNodeRemovedFromDocument reagují na vložení a odebrání prvku přímo do/z aktivního DOMu, zatímco události DOMNodeInserted a DOMNodeRemoved reagují i na vložení při odebrání prováděné na prvcích, které nejsou připojené k aktivnímu DOMu (tzn. vložení/odebrání probíhá na pozadí bez změny obsahu stránky).

Změny DOM prvků

Pod typem DOM Mutation také najdete další události, které ovlivňují stav DOM prvků, například DOMAttrModified zastaví na funkci, které mění vlastnosti některého prvku (např. data, href, class, atd.).

Poznámka: pamatujte, že jQuery metoda $().data() může a nemusí uložit data do HTML atributu, takže událost DOMAttrModified může a nemusí zastavit na změně v závislosti na tom, jaká data do prvku přiřazujete.

Další události mohou reagovat na změnu focusu (události DOMFocusIn a DOMFocusOut aka blur) ať už byla vyvolána uživatelem (klik, stisk TAB, apod.) nebo programově (metody focus a blur).

Pod typem Control najdete další události sledující stav prvků jako focus a blur, select a change (inputy), submit a reset (formuláře) nebo scroll (posun obsahu kontejneru).

Pro konkrétní typy DOM prvků jsou pak určeny další typy událostí, například pod Canvas můžete sledovat události související s grafickým rozhraním prohlížeče, pod Media můžete sledovat události na prvcích typu Video a Audio.

Dotazy na stav prohlížeče

Stav prohlížeče a stránky umožňují sledovat události typu Control (resize, scroll, zoom) a Device (deviceorientation, devicemotion).

Pod typem Geolocation můžete sledovat funkce dotazující se na polohu uživatele (getCurrentPosition a watchPosition).

Načtení stránky

Stav načítání stránky můžete sledovat pomocí DomContentLoaded pod DOM Mutations nebo load pod Load. Problémy s načítáním pak oznámí události abort a error (také pod Load).

Naopak opuštění stránky můžete sledovat událostmi unload a beforeunload pod Load nebo window.close pod Window.

Změny v historii sledujte pomocí událostí hashchange a popstate pod Load.

Sledování PWA

U progresivních aplikací můžete sledovat události Workeru (message a messageerror) a vyvolání notifikací (Notification – requestPermission).

Časované události

Pod typem Times můžete sledovat vytvoření, zrušení a vyvolání timerů (a intervalů) a pod Animation můžete sledovat události provádějící změny pomocí nového animačního API.

Poznámka: uvědomte si, že pomocí typu Animation nemůžete sledovat CSS3 animace ani animace prováděné přes jQuery metodu animate() ve starých verzích, které nepodporují nové API.

Reakce na XHR

V Chrome spusťte DevTools (klávesa F12) a přepněte se na záložku Sources. V pravém sloupci (pokud ho nevidíte, klikněte na ikonu vpravo nahoře) rozbalte položku XHR/fetch Breakpoints.

Ve Firefoxu spusťte Nástroje pro vývojáře (klávesa F12) a jděte na záložku Debugger. V pravém sloupci (pokud ho nevidíte, klikněte na ikonu vpravo nahoře) rozbalte položku XHR Breakpointy.

Buď můžete zaškrtnout Any XHR or fetch (Chrome) nebo Zastavit na jakékoliv URL (Firefox) nebo kliknutím na tlačítko „+“ zadejte vlastní URL, kterou chcete sledovat.

Sledování reaguje na jakoukoliv část URL, takže stačí zadat například „/rest/api/“ pokud chcete sledovat všechna volání vašeho API, nebo „/user/create/“ pokud chcete sledovat jen vytvoření uživatele.

V Chrome pak můžete reagovat i na jednotlivé stavy načítání XHR, které najdete pod Event Listener Breakpoints pod typem XHR. Sledovat můžete load, abort, error, timeout, atd.

Sledování změn konkrétního prvku

V Chrome a Microsoft Edge spusťte DevTools (klávesa F12) a přepněte se na záložku Elements. V DOM nebo pomocí Select element (tlačítko vlevo nahoře) najdetě prvek, který vás zajímá. Alternativně můžete kliknout pravým tlačítkem na prvek ve stránce a zvolit Prozkoumat (Inspect v Chrome) resp. Zkontrolovat prvek (Edge).

Na záložce Elements resp. Elementy klikněte na prvek pravým tlačítkem a v podmenu Break on (Zarážky DOM v Edge) zvolte, co chcete sledovat. V české verzi Edge jsou položky špatně přeloženy a tak se tím nenechte zastavit. Edge funguje stejně jako Chrome.

Attribute modification zastaví na řádku kódu, který mění nějaký atribut daného prvku (např. data, href, class, atd.). V Edge je možnost Změněn atribut v podstromu, která ale stejně jako v Chrome reaguje pouze na daný prvek a nikoliv na celý podstrom.

Subtree modification zastaví na řádku, který mění libovolný vnořený (child) prvek. V Edge je tato možnost pojmenována Změněna zarážka v podstromu, i když by to mělo být Změněn uzel v podstromu.

Pomocí Node removal pak můžete zastavit javascript na řádce, která tento konkrétní prvek odstraní z DOMu (removeChild). V Edge je tato možnost opět špatně přeložena jako Odebrána zarážka v uzlu místo Zarážka při odebrání uzlu.