logo

Ladění v prohlížeči

Než začnete psát složitější kód, promluvme si o ladění.

Ladění je proces hledání a opravování chyb ve skriptu. Všechny moderní prohlížeče a většina ostatních prostředí podporují nástroje pro ladění – speciální uživatelské rozhraní ve vývojářských nástrojích, které výrazně usnadňuje ladění. Umožňuje také sledovat kód krok za krokem, abyste viděli, co se přesně děje.

Budeme zde používat Chrome, protože má dostatek funkcí, většina ostatních prohlížečů má podobný proces.

Panel Zdroje

Vaše verze Chrome může vypadat trochu jinak, ale přesto by mělo být zřejmé, co tam je.

  • Otevřete ukázkovou stránku v prohlížeči Chrome.
  • Zapněte vývojářské nástroje pomocí F12 (Mac:Cmd+Opt+I ).
  • Vyberte Sources panelu.

Zde je to, co byste měli vidět, pokud to děláte poprvé:

Přepínací tlačítko otevře kartu se soubory.

Klikněte na něj a vyberte hello.js ve stromovém zobrazení. Zde je to, co by se mělo zobrazit:

Panel Zdroje má 3 části:

  1. Navigátor souborů podokno obsahuje soubory HTML, JavaScript, CSS a další soubory, včetně obrázků připojených ke stránce. Zde se také mohou objevit rozšíření pro Chrome.
  2. Editor kódu podokno zobrazuje zdrojový kód.
  3. Ladění JavaScriptu panel je pro ladění, brzy ho prozkoumáme.

Nyní můžete znovu kliknout na stejný přepínač, abyste skryli seznam zdrojů a dali kódu nějaké místo.

Konzole

Pokud stiskneme Esc , pak se níže otevře konzola. Můžeme tam napsat příkazy a stisknout Enter provést.

Po provedení příkazu je jeho výsledek zobrazen níže.

Například zde 1+2 výsledkem je 3 , zatímco funkce volá hello("debugger") nevrací nic, takže výsledek je undefined :

Body zlomu

Podívejme se, co se děje v kódu ukázkové stránky. V hello.js , klikněte na číslo řádku 4 . Ano, přímo na 4 číslice, nikoli na kódu.

Gratulujeme! Nastavili jste bod přerušení. Klikněte prosím také na číslo řádku 8 .

Mělo by to vypadat takto (modré je místo, kam byste měli kliknout):

bod přerušení je bod kódu, kde ladicí program automaticky pozastaví provádění JavaScriptu.

Zatímco je kód pozastaven, můžeme zkoumat aktuální proměnné, spouštět příkazy v konzole atd. Jinými slovy, můžeme jej ladit.

Seznam bodů přerušení najdeme vždy v pravém panelu. To je užitečné, když máme mnoho bodů přerušení v různých souborech. Umožňuje nám:

  • Rychle přejděte na bod přerušení v kódu (kliknutím na něj v pravém panelu).
  • Dočasně zakažte bod přerušení zrušením jeho zaškrtnutí.
  • Odeberte bod přerušení kliknutím pravým tlačítkem myši a výběrem možnosti Odebrat.
  • …A tak dále.
Podmíněné zarážky

Klikněte pravým tlačítkem na číslo řádku umožňuje vytvořit podmíněné bod zlomu. Spustí se pouze tehdy, je-li daný výraz, který byste měli uvést při jeho vytváření, pravdivý.

To je užitečné, když potřebujeme zastavit pouze pro určitou hodnotu proměnné nebo pro určité parametry funkce.

Příkaz „debugger“

Kód můžeme také pozastavit pomocí debugger příkaz v něm, takto:

function hello(name) {
 let phrase = `Hello, ${name}!`;

 debugger; // <-- the debugger stops here

 say(phrase);
}

Takový příkaz funguje pouze při otevřených vývojových nástrojích, jinak jej prohlížeč ignoruje.

Zastavte se a rozhlédněte se kolem sebe

V našem příkladu hello() se volá během načítání stránky, takže nejjednodušší způsob, jak aktivovat ladicí program (poté, co jsme nastavili body přerušení), je znovu načíst stránku. Takže stiskněte F5 (Windows, Linux) nebo Cmd+R (Mac).

Po nastavení bodu přerušení se provádění pozastaví na 4. řádku:

Otevřete prosím informační rozevírací seznamy vpravo (označené šipkami). Umožňují vám prozkoumat aktuální stav kódu:

  1. Watch – zobrazuje aktuální hodnoty pro všechny výrazy.

    Můžete kliknout na plus + a zadejte výraz. Ladicí program zobrazí svou hodnotu a automaticky ji během provádění přepočítá.

  2. Call Stack – zobrazí řetězec vnořených hovorů.

    V současné době je debugger uvnitř hello() volání, volané skriptem v index.html (žádná funkce, takže se nazývá „anonymní“).

    Pokud kliknete na položku zásobníku (např. „anonymní“), ladicí program skočí na odpovídající kód a lze také prozkoumat všechny jeho proměnné.

  3. Scope – aktuální proměnné.

    Local zobrazuje proměnné lokální funkce. Můžete také vidět jejich hodnoty zvýrazněné přímo nad zdrojem.

    Global má globální proměnné (mimo jakékoli funkce).

    K dispozici je také this klíčové slovo, které jsme ještě nestudovali, ale brzy to uděláme.

Sledování provádění

Nyní je čas na trasování skript.

V horní části pravého panelu jsou pro něj tlačítka. Zapojme je.

– „Pokračovat“:pokračovat v provádění, klávesová zkratka F8 .

Obnoví provádění. Pokud neexistují žádné další body přerušení, provádění pouze pokračuje a ladicí program ztratí kontrolu.

Zde je to, co můžeme vidět po kliknutí na něj:

Spouštění bylo obnoveno, dosáhlo dalšího bodu přerušení uvnitř say() a tam se zastavil. Podívejte se na „Zásobník hovorů“ vpravo. Zvýšil se o další hovor. Jsme uvnitř say() teď.

– „Krok“:spusťte další příkaz, klávesovou zkratku F9 .

Spusťte další příkaz. Pokud na něj nyní klikneme, alert se zobrazí.

Opakovaným kliknutím na toto tlačítko budete postupně procházet všemi příkazy skriptu.

– „Překročit“:spusťte další příkaz, ale nepřecházejte do funkce , klávesová zkratka F10 .

Podobný předchozímu příkazu „Step“, ale chová se jinak, pokud je dalším příkazem volání funkce (ne vestavěné, jako alert , ale je to naše vlastní funkce).

Pokud je porovnáme, příkaz „Step“ přejde do volání vnořené funkce a pozastaví provádění na svém prvním řádku, zatímco příkaz „Překročit“ provede volání vnořené funkce pro nás neviditelně a přeskočí vnitřní funkce.

Provádění je poté ihned po volání funkce pozastaveno.

To je dobré, pokud nás nezajímá, co se děje uvnitř volání funkce.

– „Vkročit do“, klávesová zkratka F11 .

To je podobné jako „Step“, ale chová se jinak v případě volání asynchronních funkcí. Pokud se JavaScript teprve začínáte učit, můžete rozdíl ignorovat, protože zatím nemáme asynchronní volání.

Pro budoucnost si povšimněte, že příkaz „Step“ ignoruje asynchronní akce, jako je setTimeout (plánované volání funkce), které se provedou později. „Vstup do“ přejde do jejich kódu a v případě potřeby na ně počká. Další podrobnosti naleznete v příručce DevTools.

– „Vykročit“:pokračovat v provádění až do konce aktuální funkce, klávesová zkratka Shift+F11 .

Pokračujte v provádění a zastavte jej na posledním řádku aktuální funkce. To se hodí, když jsme omylem zadali vnořený hovor pomocí , ale to nás nezajímá a my chceme co nejdříve pokračovat až do jeho konce.

– povolí/zakáže všechny body přerušení.

Toto tlačítko neposune provádění. Jen hromadné zapínání/vypínání pro body přerušení.

– povolí/zakáže automatickou pauzu v případě chyby.

Pokud je tato možnost povolena a jsou otevřené nástroje pro vývojáře, chyba během provádění skriptu je automaticky pozastaví. Pak můžeme analyzovat proměnné v debuggeru, abychom viděli, co se pokazilo. Pokud tedy náš skript zemře s chybou, můžeme otevřít debugger, povolit tuto možnost a znovu načíst stránku, abychom viděli, kde zemře a jaký je v danou chvíli kontext.

Pokračujte sem

Kliknutím pravým tlačítkem na řádek kódu se otevře kontextová nabídka se skvělou možností nazvanou „Pokračovat sem“.

To je užitečné, když se chceme posunout o několik kroků vpřed na řadu, ale jsme příliš líní nastavit bod přerušení.

Protokolování

Pro výstup do konzole z našeho kódu existuje console.log funkce.

Například to vypíše hodnoty z 0 na 4 do konzole:

// open console to see
for (let i = 0; i < 5; i++) {
 console.log("value,", i);
}

Běžní uživatelé tento výstup nevidí, je v konzole. Chcete-li jej zobrazit, otevřete panel Konzole nástrojů pro vývojáře nebo stiskněte Esc zatímco v jiném panelu:to otevře konzolu ve spodní části.

Pokud máme dostatek přihlášení do našeho kódu, můžeme vidět, co se děje ze záznamů, bez ladicího programu.

Shrnutí

Jak vidíme, existují tři hlavní způsoby, jak pozastavit skript:

  1. Bod přerušení.
  2. debugger prohlášení.
  3. Chyba (pokud jsou otevřené nástroje pro vývojáře a tlačítko je „zapnuto“).

Když je pozastavení, můžeme ladit:zkoumat proměnné a sledovat kód, abychom zjistili, kde je provádění chybné.

Ve vývojářských nástrojích je mnohem více možností, než je uvedeno zde. Úplný manuál je na https://developers.google.com/web/tools/chrome-devtools.

Informace z této kapitoly jsou dostačující pro zahájení ladění, ale později, zvláště pokud děláte hodně věcí v prohlížeči, přejděte tam a prohlédněte si pokročilejší možnosti vývojářských nástrojů.

Jo, a také můžete kliknout na různá místa vývojářských nástrojů a jen vidět, co se zobrazuje. To je pravděpodobně nejrychlejší způsob, jak se naučit vývojářské nástroje. Nezapomeňte na pravé kliknutí a kontextové nabídky!