Ladenie a testovanie JavaScriptu v aplikáciách HTML5. Spustenie testov jednotiek JS. Chybové hlásenia IE

V posledných rokoch sa JavaScript stal vedúcim jazykom pre skriptovanie webových projektov vďaka vzniku rôznych knižníc, ako sú jQuery a Prototype. Rastúca popularita a jednoduchosť používania viedli k plnohodnotným aplikáciám, ako je Gmail, ktoré obsahujú tisíce riadkov JavaScriptu, čo kladie zvýšené nároky na vývojový tím z hľadiska znalosti nástrojov.

V dôsledku narastajúcej zložitosti aplikácií sú potrebné výkonné nástroje na ladenie, ktoré dokážu rýchlo a efektívne nájsť zdroj chyby. Jednoduchý výstup premenných hodnôt pomocou funkcie upozornenie () stratil svoju relevanciu.

Táto lekcia poskytuje stručný prehľad možností moderných vývojárskych nástrojov, ktoré pomáhajú zjednodušiť ladenie kódu JavaScript. Dôraz sa bude klásť na možnosti prehliadača Chrome a doplnku Firebug pre FireFox, no väčšina popísaných funkcií je dostupná v iných nástrojoch, ako napríklad Dragonfly pre Operu.

Konzola - všeobecný pohľad

Vo väčšine programov pre vývojárov bude najlepším priateľom programátora konzola. Viacúčelový panel sa používa na zaznamenávanie chybových správ, kontrolu DOM, ladenie kódu JavaScript a mnoho ďalších úloh. V závislosti od prehliadača sa konzola volá rôznymi príkazmi (okrem priameho výberu cez menu):

• v prehliadači Chrome a Dragonfly pre Operu - Ctrl + Shift + I
• Firebug - F12

Konzola automaticky zobrazuje chyby v kóde, ktoré sú zistené počas vykonávania skriptu. Súbor a riadok sú označené vedľa chyby a stlačenie tlačidla myši na chybe presunie zameranie vstupu na príslušné miesto.

Dáta vydáme do konzoly

Konzola dokáže nielen zobraziť chyby v kóde skriptu. Pomocou rozhrania API konzoly a rozhrania API príkazového riadka môžete ovládať výstup údajov do konzoly. Najznámejší a najužitočnejší tím .log ().

Pri navrhovaní kódu formulára je veľmi užitočné poznať hodnoty premenných, aby ste si overili, či kód funguje správne. Bežnou praxou je používanie funkcie upozornenie () pre vizuálnu kontrolu. Použitie tejto metódy však zablokuje spustenie zvyšku kódu, kým nekliknete na tlačidlo v dialógovom okne.

Moderným riešením je použiť metódu konzola.log ktorý vypíše hodnoty premenných na panel konzoly:

Console.log ("Kapitánov denník"); // vytlačí „Kapitánov denník“ na panel konzoly

Metódu možno použiť na zobrazenie vypočítaných hodnôt:

Funkcia calcPhotos () (total_photos_diff = total_photos - prev_total_photos; // Tlač hodnôt premenných do konzoly console.log (total_photos_diff);)

Výhoda tohto prístupu oproti metóde dialógu upozornenie () spočíva v tom, že vykonávanie kódu nie je prerušené a vývojár môže niekoľkokrát zobraziť hodnoty premenných, aby mohol sledovať zmeny v údajoch v reálnom čase.

Var t = 3, p = 1; funkcia calcPhotos (total_photos, prev_total_photos) (var total_photos_diff = total_photos - prev_total_photos; // Vytlačte hodnoty do konzoly console.log (total_photos_diff); // Aktualizujte hodnoty ​​t = t * 1,3; p = p * 1,1 ;) setInterval (funkcia () (calcPhotos (t, p);), 100);

Zvýrazňovanie správ

Vo vyššie uvedenom príklade bude slučka odosielať do konzoly veľa premenných hodnôt. Často je však vhodné vizuálne oddeliť rôzne údaje, aby sa efektívne zvýraznili oblasti v kóde, ktoré si vyžadujú osobitnú pozornosť. Rozhranie API konzoly má niekoľko metód na vykonanie týchto úloh.

console.info (): Zobrazí informačnú ikonu a zvýrazní informácie, ktoré sa majú prezentovať. Táto metóda je užitočná na varovanie pred rôznymi udalosťami.

console.warn (): Zobrazí výstražnú ikonu a zvýrazní informácie, ktoré sa majú prezentovať. Vhodné je použiť pre informácie o parametroch prekračujúcich medze.

console.error (): Zobrazí ikonu „chyba“ a farebne zvýrazní informácie. Je vhodné ho použiť na hlásenie chýb a kritických stavov.

Poznámka: Vývojársky nástroj Chrome nemá prostriedky na odlišnú prezentáciu informácií v konzole.

Použitie rôznych metód na výstup informácií do konzoly vám umožňuje vizualizovať údaje. Prezentáciu informácií je možné zlepšiť spájaním do blokov. Použitá metóda console.group () :

// Prvá skupina console.group ("Výpočet fotografie"); console.info ("Celkový rozdiel je teraz" + total_photos_diff); console.log (total_photos_diff); konzola.skupinaKoniec (); // Druhá skupina console.group ("Incrementing variable"); console.log ("Celkový počet fotografií je teraz:" + t); console.log ("Predchádzajúce celkové fotografie sú teraz:" + p); konzola.skupinaKoniec ();

Tento príklad zoskupí informácie v konzole. Vizuálna prezentácia sa bude líšiť v rôznych prehliadačoch, obrázok nižšie zobrazuje vzhľad v Dragonfly pre Operu:

Vyššie uvedené príklady poskytujú malý zoznam dostupných metód z rozhrania API konzoly. Existuje mnoho ďalších užitočných metód, ktoré sú zdokumentované na oficiálnej stránke Firebug.

Prerušiť priebeh skriptu

Výstup z konzoly je užitočný, ale kód môže bežať veľmi rýchlo a stále sledovať množstvo premenných.

Na uľahčenie procesu ladenia môžete prerušiť vykonávanie kódu v určitom bode, aby ste získali prístup k údajom. Na to slúžia body zlomu.

Práca s bodmi prerušenia

Ak chcete nastaviť bod prerušenia, prejdite na kartu „Skripty“ a vyberte požadovaný skript zo zoznamu. Teraz hľadáme riadok, kde je potrebné prerušiť vykonávanie skriptu, a kliknutím na pole s číslom riadku ho aktivujete - objaví sa vizuálny indikátor. Teraz znova načítame stránku a vykonávanie kódu sa v danom bode preruší:

Pri prerušení vykonávania môžete presunúť kurzor myši na ľubovoľnú premennú a debugger zobrazí nápovedu s hodnotou v aktuálnom okamihu.

Potom môžete pokračovať vo vykonávaní kódu pomocou špeciálnych tlačidiel umiestnených v hornej časti bočného panela:

Na bočnom paneli môžete sledovať stav svojho kódu vrátane dynamiky lokálnych a globálnych premenných.

Podmienené body zlomu

V procese ladenia kódu je niekedy potrebné zastaviť vykonávanie kódu iba vtedy, keď sú splnené určité podmienky. Napríklad, ak má váš skript slučku, ktorej každá iterácia trvá 50 milisekúnd, potom bude veľmi nepohodlné spúšťať proces vykonávania po zastavení v každom kroku, keď potrebujeme iba 300 iterácií. Pre takéto prípady existujú podmienené prerušenia.

V príklade na obrázku sa vykonávanie kódu preruší až po dosiahnutí hodnoty premennej total_photos_diff nebude viac ako 200.

Ak chcete aktivovať podmienený bod prerušenia, kliknite pravým tlačidlom myši na bod prerušenia a vyberte položku "Upraviť bod prerušenia", čím sa zobrazí dialógové okno na úpravu podmienok vytvorenia bodu prerušenia.

Nastavenie bodu prerušenia v kóde

Nie je vždy vhodné nastaviť body prerušenia pomocou rozhrania vývojárskeho nástroja v prehliadači. Niekedy je jednoduchšie spustiť debugger z kódu pomocou špeciálneho príkazu. Príklad nižšie ukazuje, ako môžete prerušiť vykonávanie kódu, keď sú splnené určité podmienky:

If (total_photos_diff> 300) (ladiaci program; // spustenie ladiaceho programu a prerušenie vykonávania kódu)

Iné spôsoby prerušenia vykonávania kódu

Okrem použitia bodu prerušenia poskytuje vývojársky nástroj ďalšie možnosti na zastavenie vykonávania kódu v rôznych prípadoch.

Zastavenie pri zmenách DOM

Ak potrebujete ladiť časť kódu, ktorá spracováva zmeny DOM, vývojársky nástroj vám poskytuje spôsob, ako zastaviť vykonávanie kódu, keď sa zmení uzol DOM.

Na paneli HTML kód, keď kliknete pravým tlačidlom myši na požadovaný prvok, môžete vybrať podmienky pre zastavenie kódu (zmena atribútov, pridanie / odstránenie potomkov, odstránenie prvku) pri zmene DOM. Znovu načítajte kód a keď sa prvky zmenia, vykonávanie kódu sa zastaví.

Zastaviť na všetkých alebo neošetrených výnimkách

Väčšina vývojárskych nástrojov vám umožňuje zastaviť vykonávanie skriptu, keď sú vyvolané výnimky. V prehliadači Chrome je možné túto funkciu povoliť pomocou ikony „Pozastaviť“ v spodnom riadku rozhrania.

Môžete si vybrať, pre ktoré výnimky sa vykonávanie kódu zastaví. Príklad nižšie ukazuje jednu nespracovanú a jednu spracovanú výnimku (skúste | catch blok):

Var t = 3, p = 1; funkcia calcPhotos (total_photos, prev_total_photos) (var total_photos_diff = total_photos - prev_total_photos; // Prvá skupina console.info („Celkový rozdiel je teraz“ + total_photos_diff); // Aktualizácia hodnôt ​​t = t + 5; p = p + 1 ; / / Neošetrená výnimka if (total_photos_diff> 300) (hodiť 0;) // Neošetrená výnimka if (total_photos_diff> 200) (skúste ($$ ("# neexistujúci-prvok"). Skryť ();) chytiť (e) ( konzola. chyba (e);))) setInterval (funkcia () (calcPhotos (t, p);), 50);

Úvod do zásobníka hovorov

Ak sa pri vykonávaní skriptu objaví chyba, vyššie opísané metódy pomôžu zastaviť program na analýzu chyby. Ale nie vždy je hneď jasné, kde je dôvod.

Keď je skript prerušený, pozrite sa na pravú tablu, ktorá poskytuje užitočné informácie vrátane zásobníka hovorov.

Zásobník hovorov zobrazuje úplnú cestu, ktorá viedla k bodu, kde sa vyskytla chyba a vykonávanie kódu sa zastavilo.

Na obrázku nižšie je chyba vygenerovaná zámerne vo funkcii incrementValues ​​​​(), čo spôsobilo zastavenie vykonávania kódu. vývojársky nástroj zobrazuje celý zásobník hovorov, čo vám umožňuje identifikovať potenciálne nebezpečné miesta.

Záver

Táto lekcia je východiskovým bodom pre podrobnejšie štúdium dokumentácie k nástroju, ktorý plánujete aktívne používať.

Z času na čas vývojári robia chyby v kódovaní. Chyba v programe alebo skripte sa nazýva chyba.

Proces hľadania a opravy chýb sa nazýva ladenie a je bežnou súčasťou procesu vývoja. Táto časť popisuje nástroje a techniky, ktoré vám môžu pomôcť pri ladení úloh.

Chybové hlásenia IE

Najjednoduchší spôsob sledovania chýb je povoliť informácie o chybách vo vašom prehliadači. V predvolenom nastavení Internet Explorer zobrazuje v stavovom riadku ikonu chyby, keď sa na stránke vyskytne chyba.

Dvojitým kliknutím na túto ikonu sa dostanete do dialógového okna s informáciami o konkrétnej chybe.

Keďže sa táto ikona dá ľahko prehliadnuť, Internet Explorer vám dáva možnosť automaticky zobraziť dialógové okno Chyba vždy, keď sa vyskytne chyba.

Ak chcete povoliť túto možnosť, vyberte položku Nástroje → Možnosti siete Internet → karta Rozšírené. a nakoniec začiarknite políčko „Zobraziť upozornenie pre každý skript“, ako je uvedené nižšie -

Chybové hlásenia vo Firefoxe alebo Mozille

Iné prehliadače ako Firefox, Netscape a Mozilla odosielajú chybové hlásenia do špeciálneho okna nazývaného JavaScript Console alebo Error Console. Ak chcete zobraziť konzolu, vyberte Nástroje → Chybová konzola alebo Vývoj webu.

Bohužiaľ, keďže tieto prehliadače neposkytujú vizuálne informácie, keď sa vyskytne chyba, musíte mať konzolu otvorenú a pri spustení skriptu sledovať chyby.

Upozornenia na chyby

Oznámenia o chybách zobrazené v konzole alebo prostredníctvom dialógových okien programu Internet Explorer sú výsledkom chýb syntaxe aj chýb spustenia. Tieto chybové hlásenia obsahujú číslo riadku, kde sa chyba vyskytla.

Ak používate Firefox, môžete kliknúť na chybu dostupnú v chybovej konzole a prejsť na presný riadok v chybovom skripte.

Ako ladiť skript

Existujú rôzne spôsoby ladenia JavaScriptu – použite JavaScript Validator

Jedným zo spôsobov, ako otestovať svoj kód JavaScript na podivné chyby, je spustiť ho pomocou programu, ktorý ho skontroluje, aby sa ubezpečil, že je platný a že dodržiava oficiálne pravidlá syntaxe jazyka. Tieto programy sa nazývajú parsery alebo skrátene len validátory a často sa dodávajú s komerčnými editormi HTML a JavaScript.

Najpohodlnejším validátorom JavaScriptu je JavaScript Lint Douglasa Crockforda, ktorý je bezplatne dostupný v JavaScript Lint Douglasa Crockforda.

Stačí navštíviť túto webovú stránku, vložiť kód JavaScript (iba JavaScript) do poskytnutej textovej oblasti a kliknúť na tlačidlo jslint. Tento program analyzuje váš kód JavaScript a zabezpečí, aby všetky definície premenných a funkcií dodržiavali správnu syntax. Tiež skontroluje príkazy JavaScript, ako napríklad či a kým, aby sa uistil, že sú v správnom formáte

Pridajte ladiaci kód do svojich programov

Na ladenie kódu môžete vo svojom programe použiť metódy alert () alebo document.write (). Môžete napríklad napísať niečo takéto:

var debugging = true; var whichImage = "widget"; if (ladenie) upozornenie ("Volá swapImage () s argumentom:" + ktorýObrázok); var swapStatus = swapImage (ktorýObrázok); if (ladenie) výstraha ("Ukončí swapImage () s swapStatus =" + swapStatus);

Skúmaním obsahu a poradia výstrah (), ako sa zobrazujú, môžete jednoducho otestovať funkčnosť svojho programu.

Ako používať ladiaci nástroj JavaScript

Ladiaci program je aplikácia, v ktorej sú všetky aspekty vykonávania skriptu pod kontrolou programátora. Debuggery poskytujú jemnú kontrolu nad stavom skriptu prostredníctvom rozhrania, ktoré vám umožňuje kontrolovať a nastavovať hodnoty a riadiť tok vykonávania.

Po načítaní skriptu do debuggeru ho možno spustiť po jednom riadku alebo mu dať pokyn, aby sa zastavil na konkrétnych bodoch prerušenia. Po zastavení vykonávania môže programátor skontrolovať stav skriptu a jeho premenných, aby zistil, či niečo nie je v poriadku. Môžete tiež zobraziť premenné a zmeniť ich hodnoty.

• Použite veľa komentárov. Komentáre vám umožňujú vysvetliť, prečo ste skript napísali tak, ako ste ho napísali, a vysvetliť obzvlášť zložité časti kódu.
• Vždy používajte odsadenie, aby bol váš kód čitateľný. Odsadenie vám tiež uľahčuje priraďovanie počiatočných a koncových značiek, zložených zátvoriek a iných prvkov HTML a skriptu.
• Napíšte modulárny kód. Zoskupte svoje príkazy do funkcií, kedykoľvek je to možné. Funkcie vám umožňujú zoskupovať súvisiace príkazy a testovať a opätovne používať časti kódu s minimálnym úsilím.
• Buďte konzistentní v tom, ako pomenúvate svoje premenné a funkcie. Pokúste sa použiť názvy, ktoré sú dostatočne dlhé na to, aby mali zmysel a popisovali obsah premennej alebo účel funkcie.
• Pri pomenovaní premenných a funkcií používajte konzistentnú syntax. Inými slovami, píšte ich malými alebo veľkými písmenami; ak uprednostňujete notáciu Camel-Back, používajte ju dôsledne.
• Overte dlhé skripty modulárnym spôsobom. Inými slovami, nesnažte sa napísať celý skript pred testovaním akejkoľvek jeho časti. Napíšte časť a spustite ju pred pridaním ďalšej časti kódu.
• Používajte popisné názvy premenných a funkcií a vyhnite sa používaniu jednoznakových názvov.
• Pozor na citáty. Pamätajte, že úvodzovky sa používajú v pároch okolo reťazcov a že oba úvodzovky musia byť rovnakého štýlu (jeden alebo dva).
• Sledujte svoje znamienka rovnosti. Na účely porovnania by ste nemali používať jeden =.
• Premenné deklarujem explicitne pomocou kľúčového slova var.

Firebug obsahuje výkonný avaScriptový debugger, ktorý vám dáva možnosť kedykoľvek pozastaviť vykonávanie a zobraziť každú premennú v danom čase. Ak sa váš kód spomaľuje, použite javascriptový profiler na meranie výkonu a rýchle nájdenie úzkych miest.

Nájdite skripty s ľahkosťou

Mnoho webových aplikácií pozostáva z veľkého počtu súborov a nájsť ten, ktorý sa má ladiť, môže byť únavná a nudná úloha. Ponuka výberu skriptu Firebug triedi a organizuje súbory do jasného a zrozumiteľného zoznamu, ktorý vám pomôže nájsť akýkoľvek súbor kliknutím prsta.

Pozastaviť vykonávanie na ľubovoľnom riadku

Firebug vám umožňuje nastaviť body prerušenia, ktoré povedia debuggeru, aby pozastavil vykonávanie skriptu, keď zasiahne konkrétny riadok. Počas pozastavenia vykonávania môžete zobraziť hodnoty akýchkoľvek premenných a kontrolovať objekty.

Ak chcete nastaviť bod prerušenia, kliknite na ľubovoľné číslo riadku a zobrazí sa tam červená bodka, ktorá označuje, že bod prerušenia je nastavený. Opätovným kliknutím na červenú bodku odstránite bod prerušenia.

Pozastaviť vykonávanie, iba ak...

Body zlomu môžu spôsobiť problémy, ak sa spúšťajú príliš často. Niekedy chceme pozastaviť exekúciu len vtedy, keď sú splnené určité podmienky. Firebug umožňuje nastaviť "podmienené" body prerušenia. Testujú výraz, ktorý musí byť pravdivý, aby bod prerušenia fungoval.

Ak chcete nastaviť podmienený bod prerušenia, kliknite pravým tlačidlom myši na ľubovoľné číslo riadku. Zobrazí sa bublina s výzvou na zadanie výrazu v jazyku JavaScript. Kedykoľvek môžete znova kliknúť pravým tlačidlom myši, ak chcete zmeniť výraz, alebo kliknúť ľavým tlačidlom, aby ste sa zbavili bodu prerušenia.

Jeden krok v čase

Keď ladiaci program pozastaví vykonávanie, môžete pokračovať v skripte krok za krokom. To vám umožní jasne vidieť, ako vykonanie konkrétneho riadku ovplyvňuje premenné a objekty.

Môžete tiež pokračovať vo vykonávaní pre viac ako jeden riadok. Ak chcete pokračovať v spúšťaní na tento riadok, v kontextovej ponuke vyberte riadok „Spustiť na tento riadok“.

Som prerušený chybami

Nie vždy si vyberiete ladiaci program ... Niekedy si ladiaci program vyberie vás .. Firebug vám dáva možnosť automaticky vstúpiť do ladiaceho programu, keď sa vyskytne chyba, takže môžete preskúmať podmienky, za ktorých sa problém vyskytol.

Rozšírený zásobník

Keď debugger pozastaví vykonávanie, Firebug vám zobrazí zásobník hovorov, to znamená množinu vnorených volaní funkcií, ktoré sú momentálne spustené a čakajú na návrat.

Zásobník hovorov je reprezentovaný kompaktným pásom tlačidiel na paneli, z ktorých každé má názov funkcie v zásobníku. Kliknutím na ľubovoľné tlačidlo môžete prejsť na riadok, kde je funkcia pozastavená, a pozrieť sa na hodnoty lokálnych premenných z funkcie.

Pozorovanie výrazov

Pri ladení často chcete vidieť význam zložitých výrazov alebo objektov, ktoré sú pochované v DOM. Firebug umožňuje vytlačiť ľubovoľný javascriptový výraz, ktorého hodnota sa aktualizuje v každom kroku ladiaceho nástroja.

Pri písaní výrazov nezabudnite, že na automatické dopĺňanie vlastností objektu môžete použiť kláves Tab.

Variabilné rady

Keď je vykonávanie pozastavené, môžete prejsť myšou na ktorúkoľvek z premenných v aktuálnej funkcii a zobraziť tak popisy nástrojov s hodnotami. Je to skvelý spôsob, ako sledovať kód a získať odpovede počas jeho čítania.

Výkonnosť profilu JavaScript

Vaša webová aplikácia je takmer dokonalá. Vypracovali ste všetky chyby, dizajn je štýlový a používatelia ho milujú. Len jeden problém - niektoré funkcie sa spomaľujú a nie ste si istí, prečo ..

S Firebugom sa už nemusíte čudovať, prečo je váš kód pomalý. Pomocou profilovača Firebug oddelíte muchy od rezňov doslova za pár sekúnd.

Ak chcete použiť profilovač, jednoducho prejdite na kartu Konzola a kliknite na tlačidlo „Profil“. Potom chvíľu používajte svoju aplikáciu alebo znova načítajte stránku a znova kliknite na „Profil“. Zobrazí sa podrobná správa, ktorá ukazuje, ktoré funkcie boli vyvolané a ako dlho každá trvala.

Protokolovanie volaní funkcie

Niekedy je problematická funkcia volaná toľkokrát, že nemôžete zakaždým prejsť do debuggera. Chcete len vedieť, kedy bol volaný a s akými parametrami.

Ak chcete sledovať všetky volania funkcie, kliknite pravým tlačidlom myši na kartu Skript a vyberte možnosť „Zaznamenať volania do“ názov funkcie „“. Potom prejdite na konzolu a sledujte, ako hovory plávajú v protokole ...

Choďte rovno na linku 108

Často chcete jasne prejsť na požadovaný riadok skriptu. Už to nemôže byť jednoduchšie, stačí zadať číslo riadku do poľa rýchleho vyhľadávania s # na začiatku, ako je znázornené na ľavej snímke obrazovky.

Od autora: console.log má veľa čo povedať o aplikácii, ale nemôžete s ňou skutočne ladiť svoj kód. Nový debugger JS vo Firefoxe vám pomôže písať kód rýchlejšie a bez chýb. Článok o tom, ako tento debugger funguje.

V tomto príklade otvoríme veľmi jednoduchú aplikáciu, ktorá uľahčuje ladenie JavaScriptu. Samotná aplikácia beží na základných open source JS frameworkoch. Otvorte ho v najnovšom Firefox Developer Edition a spustite debugger.html pomocou klávesovej skratky Option + Cmd + S na Macu alebo Shift + Ctrl + S na Windowse. Ladiaci nástroj je rozdelený na 3 panely: panel so zoznamom súborov, panel s kódom a panel s nástrojmi.

Panel nástrojov je rozdelený na panel nástrojov, sledovacie výrazy, body prerušenia, zásobník hovorov a rozsahy.

Prestaňte používať console.log

Chceme použiť console.log na ladenie nášho kódu. Do kódu len pridáme volanie, aby sme zistili hodnotu premennej, a je to, nie? Tento prístup bude fungovať, ale je ťažkopádny a časovo náročný. V tomto príklade budeme prechádzať aplikáciou pomocou debugger.html, aby sme našli hodnotu premennej.

S debugger.html sa môžete ponoriť hlbšie do kódu jednoduchým pridaním bodu prerušenia na riadok. Body prerušenia pozastavia ladiaci program, aby ste si mohli pozrieť kód. V tomto príklade pridáme bod prerušenia na riadok 13 súboru app.js.

Teraz pridajte úlohu do zoznamu. Kód sa zastaví na funkcii addTodo a môžeme sa pozrieť na hodnotu poľa v kóde. Umiestnením kurzora myši na premennú zobrazíte jej hodnotu atď. Takto môžete zobraziť kotvy, applety, deti atď.:

Rovnaké informácie nájdete na paneli Oblasti.

Keď je skript pozastavený, môžete prechádzať jeho riadkami pomocou panela s nástrojmi. Tlačidlá Pokračovať / Pozastaviť robia presne to, čo hovoria. Tlačidlo Step vykoná aktuálny riadok kódu, Enter - vstúpi do funkcie, Exit - vykoná aktuálnu funkciu až do ukončenia jej volania.

Sledujte hodnotu mono premennej aj pomocou sledovacích výrazov. Stačí zadať výraz do poľa Tracking Expressions a debugger ho bude sledovať, ako sa spúšťa váš kód. Vo vyššie uvedenom príklade môžete pridať názov a príkazy úloh a debugger odstráni hodnoty, keď sú k dispozícii. Obzvlášť užitočné, keď:

Prechádzate kódom a sledujete zmenu hodnoty;

Mnohokrát ladíte rovnaký kód a chcete vidieť celkové hodnoty;

Snažíte sa prísť na to, prečo toto prekliate tlačidlo nefunguje.

Debugger.html možno použiť aj na ladenie aplikácií React / Redux. Ako to funguje:

Prejdite na komponent, ktorý chcete ladiť.

Pozri diagram komponentov vľavo (funkcie v triede).

Pridajte body prerušenia do príslušných funkcií.

Pozastavte sa a sledujte vlastnosti a stavy komponentu.

Zásobník hovorov je zjednodušený, takže vidíte kód aplikácie zmiešaný s rámcom.

debugger.html vám umožňuje zobraziť zahmlený alebo miniifikovaný kód, ktorý môže spôsobiť chyby. Obzvlášť užitočné pri práci so všeobecnými rámcami, ako je React / Redux. Debager vie o komponente, na ktorom ste sa pozastavili, a zobrazí zjednodušený zásobník hovorov, schému komponentov a vlastnosti. Amit Zur nižšie ako vývojár vysvetľuje, ako používa Firefox Code Debugger na JS Kongress:

Podrobný pohľad na nový debugger.html nájdete na Mozilla Developer Playground. Vytvorili sme sériu návodov, ktoré pomôžu vývojárom naučiť sa efektívne používať nástroj na ladenie kódu.

Open source vývojárske nástroje

Projekt debugger.html bol spustený asi pred 2 rokmi spolu s kompletným prepracovaním nástrojov Firefox DevTools. Chceli sme preniesť DevTools do moderných technológií, otvoriť ich vývojárom z celého sveta. A keďže ide o technológiu s otvoreným zdrojom, môže sa voľne rozrásť do niečoho, čo si malá skupina v Mozille nikdy nepredstavovala.

JS je chrbtovou kosťou každej pokročilej webovej aplikácie, takže výkonný debugger bol základnou súčasťou sady nástrojov. Chceli sme vytvoriť niečo rýchle, ľahko použiteľné, adaptabilné – schopné odladiť akýkoľvek nový rámec JS. Rozhodli sme sa použiť populárne webové technológie, pretože sme chceli pracovať bližšie ku komunite. Tento prístup by zlepšil samotný debugger – ak by sme prijali Webpack a začali používať nástroj na zostavovanie a zdrojové mapy interne, chceli by sme zlepšiť porovnávanie zdrojov a rýchle opätovné načítanie.

debugger.html je napísaný v React, Redux a Babel. Komponenty React sú ľahké, testovateľné a ľahko sa navrhujú. React Storybook používame na rýchle prototypovanie používateľského rozhrania a dokumentáciu bežných komponentov. To uľahčuje prácu s rôznymi rámcami JS (napríklad React). Front-end Babel vám umožňuje robiť veci, ako napríklad zobraziť triedu Component a jej funkcie na ľavom bočnom paneli. Môžeme tiež nastaviť body prerušenia funkcií, takže sa nepohnú, ak zmeníte kód.

Redux Actions je čisté API pre používateľské rozhranie. Môžu sa však použiť aj na vytvorenie nezávislého CLI JS Debugger. Úložisko Redux má selektory na dopytovanie aktuálneho stavu ladenia. Naše testy jednotiek spúšťajú akcie Redux a napodobňujú reakcie prehliadača. Integračné testy poháňajú prehliadač pomocou akcií ladiaceho nástroja Redux. Samotná funkčná architektúra je určená na testovanie.

Na každom kroku sme sa spoliehali na komunitu vývojárov Mozilly. Projekt bol zverejnený na GitHub a náš tím oslovil vývojárov z celého sveta a tí odpovedali. Na začiatku boli pre komunitu kritické automatické testy. Testy ustúpili a zdokumentovali správanie, ktoré sa dalo ľahko prehliadnuť. Preto jedným z prvých krokov bolo napísanie unit testov pre akcie Redux a typy Flow pre obchod Redux. V skutočnosti komunita zabezpečila, že pokrytie Flow a Jest pomohlo zabezpečiť, aby bol každý súbor napísaný a otestovaný.

Ako vývojári veríme, že nástroje sú tým silnejšie, čím viac vývojárov je zapojených. Náš základný tím bol vždy malý (2 ľudia), ale v priemere to bolo 15 asistentov týždenne. Komunita nám poskytla rôzne pohľady, čo nám pomohlo predvídať zložitosti a písať funkcie, o ktorých sme ani nesnívali. Teraz formátujeme zásobníky hovorov pre 24 knižníc. O mnohých sme ani nevedeli. V zdrojovom strome zobrazujeme aj mapy Webpack a Angular.

Všetky nástroje Firefox DevTools plánujeme presunúť na GitHub, aby ich mohlo používať a zlepšovať viac ľudí. Vašu pomoc radi prijmeme. Môžete prejsť na stránku debugger.html nášho projektu na GitHub. Napísali sme celý zoznam pokynov na spustenie debuggera na vašom stroji, kde môžete zmeniť, čo chcete. Použite ho na ladenie kódu JS pre čokoľvek - prehliadače, terminály, servery, telefóny, roboty. Ak vidíte, čo sa dá zlepšiť, napíšte nám na GitHub.

Ahoj! V pokračovaní témy si povieme niečo o ladení skriptov pomocou prehliadača. Zoberme si napríklad najlepší prehliadač na Zemi – Chrome.

V zásade sú takéto nástroje k dispozícii v akomkoľvek prehliadači a ak si uvedomíte, že väčšina prehliadačov pracuje na rovnakom motore ako Chrome, potom v zásade nebudú žiadne zvláštne rozdiely. Firefox je tiež stále veľmi dobrý s nástrojom Firebug.

Celkový pohľad na panel Zdroje

Spustite prehliadač Chrome.

Stlačte F12, tým sa spustí Vývojárske nástroje.

Prejdite na kartu Zdroj

Sú tu 3 zóny:

1. Oblasť zdrojových súborov. Obsahuje všetky súbory projektu
2. Oblasť textu. Táto oblasť obsahuje text súboru
3. Informačná a kontrolná oblasť. Povieme si o nej neskôr.

Pri ladení zvyčajne nie je potrebná zdrojová oblasť, takže ju môžete skryť pomocou tlačidla.

Spoločné ovládacie tlačidlá

3 najčastejšie používané ovládacie tlačidlá:

Formátovať Toto tlačidlo vám umožňuje naformátovať kód. Možno ho budete potrebovať, ak chcete naformátovať kód niekoho iného. Konzola Veľmi dôležité tlačidlo, ktoré po kliknutí otvorí konzolu. Do konzoly je možné zadávať rôzne príkazy a príkazy JavaScriptu. okno V prípade veľkej časti kódu umožňuje otvoriť kód v samostatnom okne.

Body zlomu

Pozrime sa ako príklad na súbor pow.js. Ak kliknete na ľubovoľný riadok v tomto súbore, na tomto riadku sa nastaví bod prerušenia.

Vyzerá to asi takto:

Ďalší bod zlomu sa nazýva bod zlomu, to je viac žargón, ktorý sa v našom jazyku asimiloval a doslova znamená aj bod zlomu.

V kóde, v ktorom ste urobili bod prerušenia, sa môžete pozrieť na hodnoty premenných v každom kroku, vo všeobecnosti ho môžete sledovať všetkými možnými spôsobmi.

Informácie o bode zlomu sa zobrazia na karte Body zlomu.

Karta Breakpoints je veľmi užitočná, keď je kód veľmi veľký, umožňuje vám:

• Jednoduchým kliknutím na text rýchlo prejdite na miesto kódu, kde sa nastavuje bod prerušenia.
• Dočasne zakážte bod prerušenia kliknutím na začiarkavacie políčko.
• Rýchlo odstráňte bod prerušenia kliknutím pravým tlačidlom myši na text a výberom položky Odstrániť.

Niektoré ďalšie funkcie

• Bod prerušenia možno spustiť priamo zo skriptu pomocou príkazu debugger: function pow (x, n) (... debugger; //<-- отладчик остановится тут... }

• Pravé kliknutie na číslo riadku pow.js vám umožní vytvoriť takzvaný podmienený bod prerušenia, t.j. nastavte podmienku, pri ktorej sa spustí bod prerušenia.

Zastavte sa a rozhliadnite sa

Keďže sa naša funkcia spúšťa súčasne s načítavaním stránky, najjednoduchším spôsobom aktivácie ladiaceho nástroja JavaScriptu je opätovné načítanie. Ak to chcete urobiť, stlačte F5. A zároveň sa vykonávanie skriptu zastaví na 6. riadku.

Venujte pozornosť informačným kartám:

• Sledujte výrazy- tu vidíte aktuálnu hodnotu premenných, ktoré v skripte sledujete.
• Zásobník hovorov- zobrazuje zásobník hovorov - to sú všetky hovory vedúce k tomuto riadku kódu.
• Rozsah premenných- zobrazuje premenné. Okrem toho zobrazuje globálne aj lokálne premenné.

Kontrola vykonávania

Teraz poďme „spustiť“ skript a sledovať jeho prácu. Venujte pozornosť panelu v hornej časti je 6 tlačidiel, ktorých prácu zvážime.

- pokračovať vo vykonávaní, alebo môžete stlačiť kláves F8. Toto tlačidlo pokračuje vo vykonávaní skriptu. Týmto spôsobom môžeme náš skript prechádzať, ako keby bol spustený v prehliadači. - urobte krok bez zadania funkcie alebo klávesu F10.

Vykonajte jeden krok skriptu bez toho, aby ste vstúpili do funkcie.

- urobte krok do funkcie, kláves F11. Vykoná jeden krok skriptu a zároveň prejde do funkcie. - vykonávať, kým neukončíte aktuálnu funkciu, kláves Shift + F11.

úplne vykoná kód vo funkcii.

- zakázať / povoliť všetky body prerušenia. Toto tlačidlo iba zakáže a znova povolí všetky body prerušenia. - povoliť / zakázať automatické zastavenie pri chybe. Toto tlačidlo je veľmi užitočné pri ladení a umožňuje povoliť alebo zakázať automatické zastavenie pri chybe.

Samotný proces ladenia spočíva v prechádzaní programu a pozorovaní hodnôt premenných.

Konzola prehliadača

Pri ladení kódu skriptu môže byť užitočné prejsť na kartu Konzola a zistiť, či sa vyskytli nejaké chyby. Informácie môžete tiež odoslať do konzoly pomocou konzoly.log ().

Napríklad:

// výsledok bude viditeľný v konzole pre (var i = 0; i< 6; i++) { console.log("значение", i); }

Konzola je dostupná v akomkoľvek prehliadači

Chyby v konzole

Chyby skriptu JavaScript je možné zobraziť v konzole.

V konzole môžete vidieť:

Červená čiara je skutočné chybové hlásenie.

Celkom

Debugger vám umožňuje:

• Zastavte na označenom bode (bod prerušenia) alebo príkazom debugger.
• Spustiť kód - na ladenie programu jeden riadok po riadku alebo do určitého bodu.
• Monitorujte premenné, spúšťajte príkazy v konzole atď.

V nástrojoch pre vývojárov sú ďalšie karty, napríklad Elements vám umožňuje zobraziť HTML kód stránky, časová os zobrazuje, koľko súborov prehliadač sťahuje a ako dlho to trvá. Zatiaľ nás však tieto karty veľmi nezaujímajú.