Ladění pomocí editoru Visual Studio Code

8 min

V předchozím cvičení jste se dozvěděli, že je důležité spouštět kód krok za krokem pomocí ladicího programu poskytovaného v Node.js. Pro vaši práci v aplikaci Tailwind Traders budete potřebovat komplexnější prostředí ladění v integrovaném vývojovém prostředí (IDE).

Pojďme zjistit, jak ladicí program editoru Visual Studio Code nakonfigurovat pro Node.js.

Jak používat Visual Studio Code pro ladění Node.js

V editoru Visual Studio Code je ladicí program přístupný z karty Spustit .

Screenshot of Visual Studio Code debug tab.

Pokud máte v okně editoru .js otevřený soubor, můžete vybrat Spustit a ladit a pak vybrat Node.js a přímo ladit otevřený javascriptový soubor.

Existuje několik dalších způsobů, jak spustit ladění v editoru Visual Studio Code. V dalším cvičení použijeme soubor launch.json. Vývojové týmy často k přizpůsobení konfigurace spuštění používají soubor launch.json. S konfigurací zadanou v souboru .json ji můžete zkontrolovat ve správě zdrojového kódu. Ze správy zdrojového kódu můžete konfiguraci sdílet napříč týmem.

Řízení toku přidáním zarážek

Na rozdíl od integrovaného ladicího programu příkazového řádku Node.js se ladicí program editoru Visual Studio Code okamžitě spustí spuštění kódu. Pokud program skončí rychle, možná nebudete mít možnost pracovat s ladicím programem. Proto můžete před spuštěním kódu přidat zarážky. V dalším cvičení přidáme a odebereme několik zarážek.

Pokud chcete do kódu přidat zarážku, najděte řádek kódu v souboru JavaScriptu (.js), do kterého chcete přidat konec. Vedle čísla řádku pro příkaz kódu vyberte na levém okraji. Po přidání zarážky se vedle čísla řádku zobrazí červený kruh. Pokud chcete zarážku odebrat, vyberte červené kolečko.

Screenshot of a breakpoint added in the Visual Studio Code editor window.

K přidání zarážky můžete použít také místní nabídku po kliknutí pravým tlačítkem myši. Nabídka obsahu obsahuje možnost Přidat podmíněnou zarážku, kde zadáte podmínku pro přerušení provádění kódu. Podmíněná zarážka je aktivní pouze v případech, kdy je splněna zadaná podmínka.

Screenshot of setting a conditional breakpoint in Visual Studio Code.

Tato zarážka zastaví provádění pouze v případě convertedValue , že hodnota není definována.

Přehled ladicího programu editoru Visual Studio Code

Po nastavení zarážek a spuštění aplikace se na obrazovce zobrazí nové informační panely a ovládací prvky.

Screenshot of Visual Studio Code debugger overview.

Počet	Název	Popis
1.	Ovládací prvky pro spuštění ladicího programu	V horní části bočního panelu najdete ovládací prvky pro spuštění.
2.	Stav proměnných	Panel Proměnné zobrazuje aktuální stav proměnných.
3.	Stav sledovaných proměnných	Panel Kukátek zobrazuje aktuální stav sledovaných proměnných.
4.	Aktuální zásobník volání	Panel Zásobník volání zobrazuje aktuální zásobník volání.
5.	Načtené soubory skriptů	Na panelu Načtené soubory skriptu se zobrazují soubory JavaScriptu, které byly dosud načteny.
6.	Zarážky	Na panelu Zarážky se zobrazí všechny zarážky, které jste umístili do kódu.
7.	Ovládací prvky provádění	Pomocí těchto ovládacích prvků můžete ovládat postup provádění programu.
8.	Aktuální krok provádění	Aktuální krok spuštění je v okně editoru zvýrazněný.
9.	Konzola ladění	Konzolu ladění můžete použít k vizualizaci protokolů konzoly aplikace a k vyhodnocení výrazů nebo spuštění kódu v aktuálním kontextu spuštění.

Ovládací prvky pro spuštění ladicího programu

V horní části bočního panelu najdete tyto ovládací prvky pro spuštění:

Screenshot of Visual Studio Code debug sidebar controls.

Počet	Název	Popis
1.	Spuštění ladění	Spusťte ladění aplikace.
2.	Vyberte konfiguraci aktivního spuštění.	Výběr aktivní spouštěcí konfigurace
3.	`launch.json` Úprava souboru	Úprava souboru `launch.json`. Pokud potřebujete, vytvořte soubor JSON.
4.	Otevření konzoly ladění	Otevřete konzolu ladění a přepněte viditelnost panelů Proměnných, Kukátku, Zásobník volání a Zarážky.

Zobrazení a úprava stavu proměnných

Při analýze příčiny chyby v programu je třeba hledat neočekávané změny sledováním stavu proměnných. K tomuto účelu můžete použít panel Variables (Proměnné).

Proměnné jsou uspořádané podle oboru:

Scope	Popis
Místní	Lokální proměnné jsou dostupné v aktuálním oboru, obvykle v aktuální funkci.
Globální	Globální proměnné jsou přístupné všude v programu. Sem patří také systémové objekty z modulu runtime JavaScriptu, takže nebuďte překvapeni, když tu uvidíte spoustu položek.
Closure	Proměnné uzavření jsou přístupné z aktuálního uzavření (pokud existuje). Uzavření kombinuje lokální obor funkce s oborem vnější funkce, do které patří.

Mezi možné akce patří:

Rozbalení oborů: Rozsahy a proměnné můžete rozbalit výběrem šipky. Při rozbalování objektů uvidíte všechny vlastnosti definované v tomto objektu.
Změnit hodnotu proměnné: Hodnotu proměnné je možné změnit poklikáním na proměnnou.
Náhled proměnné: Když najedete myší na parametr funkce nebo proměnnou přímo v okně editoru, můžete si také prohlédnout její hodnotu.

Sledování proměnných

Pokud chcete sledovat stav proměnné v čase nebo mezi různými funkcemi, může být její neustálé hledání zdlouhavé. Tehdy vám přijde vhod panel Watch (Kukátko).

Screenshot of watched variables.

Výběrem tlačítka plus zadáte název proměnné nebo výraz, který chcete sledovat. Alternativně můžete kliknout pravým tlačítkem myši na proměnnou v podokně Proměnné a vybrat Přidat ke sledování.

Při spuštění kódu se automaticky aktualizují všechny výrazy v podokně kukátků.

Zásobník volání

Vždy, když váš program vkročí do nějaké funkce, přidá se do zásobníku volání položka. Když se vaše aplikace stane složitou a máte funkce volané v rámci funkcí mnohokrát, zásobník volání představuje stopu volání funkcí.

Můžete ho využít při hledání zdroje výjimky. Když se váš program neočekávaně chybově ukončí, často v konzole uvidíte něco podobného:

/Users/learn/nodejs/index.js:22
  return value.toFixed(2);
               ^
TypeError: Cannot read property 'toFixed' of undefined
    at formatValueForDisplay (/Users/learn/nodejs/index.js:22:16)
    at printForeignValues (/Users/learn/nodejs/index.js:31:28)
    at Object.<anonymous> (/Users/learn/nodejs/index.js:39:1)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
    at internal/main/run_main_module.js:17:11

Skupina řádků at [...] pod chybovou zprávou se nazývá trasování zásobníku. Tento zásobník vypisuje název a původ každé funkce, která byla před ukončením s výjimkou volána. Jeho dešifrování může být obtížné, protože obsahuje také interní funkce z modulu runtime Node.js.

V této situaci oceníte panel Call stack (Zásobník volání) v editoru Visual Studio Code. V tomto panelu jsou nežádoucí informace standardně odfiltrovány a zobrazují se jen relevantní funkce z vašeho vlastního kódu. Rozvinutím tohoto zásobníku volání můžete zjistit, kde výjimka vznikla.

Ještě větší pomoc získáte výběrem tlačítka Restart frame (Restartovat snímek), které se objeví, když v tomto zásobníku najedete myší na název nějaké funkce. Převinou se spuštění zpět na začátek této funkce tím, že program skutečně restartuje až do tohoto okamžiku.

Screenshot of the Restart frame button in the Visual Studio Code call stack panel.

Zobrazení načtených souborů skriptů

Tento panel zobrazí všechny soubory JavaScriptu, které byly doposud načteny. U rozsáhlých projektů může být někdy užitečné vědět, ze kterého souboru se aktuální kód spouští.

Zarážky

Na panelu Breakpoints (Zarážky) si můžete zobrazit a přepínat všechny zarážky, které jste umístili do kódu. Můžete také přepínat možnosti přerušení u zachycených nebo nezachycených výjimek. Podokno Zarážky můžete použít k prozkoumání stavu programu a k trasování zdroje výjimky pomocí zásobníku volání, když nastane.

Řízení provádění

Pomocí těchto ovládacích prvků můžete ovládat postup provádění programu.

Screenshot of Visual Studio Code debugger execution controls.

Zleva doprava se jedná o tyto ovládací prvky:

Pokračovat nebo pozastavit provádění. Pokud je provádění pozastaveno, bude pokračovat až do další zarážky. Pokud program běží, přepne se toto tlačítko na tlačítko pro pozastavení, kterým můžete provádění pozastavit.
Krok přes. Provede další příkaz kódu v aktuálním kontextu (totéž jako příkaz next v integrovaném ladicím programu).
Krok dovnitř. Podobné jako Krok přes, ale pokud je dalším příkazem volání nějaké funkce, přejde na první příkaz kódu této funkce (totéž jako příkaz step).
Vystupte. Pokud jste uvnitř funkce, spusťte zbývající kód této funkce a přejděte zpět na příkaz po počátečním volání funkce (totéž jako out příkaz).
Restartovat. Restartuje program od začátku.
Zastavit. Ukončí provádění a opustí ladicí program.

Použití konzoly ladění

Konzolu ladění můžete zobrazit nebo skrýt stisknutím kombinace kláves Ctrl+Shift+Y (Windows, Linux) nebo Cmd+Shift+Y (Mac). Dá se použít k vizualizaci protokolů konzoly aplikace a k vyhodnocení výrazů nebo spuštění kódu v aktuálním spouštěcím obsahu, jako je exec příkaz v integrovaném ladicím programu Node.js.

Do vstupního pole v dolní části konzoly ladění můžete zadat výraz JavaScriptu. Potom ho stisknutím klávesy Enter vyhodnotíte. Výsledek se zobrazí přímo v konzole.

Screenshot of Debug console.

Tímto způsobem můžete rychle zkontrolovat hodnotu proměnné, otestovat funkci s odlišnými hodnotami nebo změnit aktuální stav.

Přidání logpointů místo console.log

Linters označí console.log příkazy jako chyby. Pokud chcete získat stejný účinek jako console.log příkazy, použijte místo toho protokolovací body editoru Visual Studio Code, které se vytisknou do konzoly Ladění.

Logpoint přidáte tak, že kliknete pravým tlačítkem do stejné oblasti, kterou jste použili k přidání zarážky, a pak vyberete Přidat protokolový bod. Zadejte zprávu, která se má zobrazit v tomto místě ve vašem kódu.

Screenshot of adding a logpoint in Visual Studio Code.

Podobně jako zarážky nemění protokolovací body kód žádným způsobem a používají se jenom při ladění. Už se nemusíte vymlouvat, že jste v produkčním prostředí zapomněli console.log('here').