Jak ladit aplikace Node.js v kódu Visual Studio

Ladění vaší aplikace Node.js v samotném kódu Visual Studio je možné a přímočaré. Editor kódu VS přichází s vestavěným debuggerem schopným ladit jakoukoli aplikaci, která cílí na runtime Node.js. To znamená, že můžete ladit JavaScript nebo jakýkoli jiný jazyk, který se do něj kompiluje (např. TypeScript).

Tento článek vás provede kroky pro ladění vaší aplikace Node.js ve VS Code. Dozvíte se, jak spustit relaci ladění, vložit body přerušení, připojit externí proces a ladit kód TypeScript pomocí zdrojových map.

Co potřebujete, abyste mohli začít

Než začnete, nainstalujte na místní počítač Node.js i VS Code. Nejnovější verze Node.js je k dispozici na Node.js oficiální webové stránky. Podobně pro Visual Studio Code si stáhněte nejnovější verzi z VS kód webová stránka. Pro pokyny na jak nastavit VS Code na Windows, přečtěte si našeho průvodce nastavením.

Potřebujete také projekt Node.js.

Můžete vytvořit jednoduchou aplikaci Node.js od začátku nebo použít existující aplikaci.

Proces ladění v kódu VS

Spuštění relace ladění v editoru kódu VS je docela jednoduché. Otevřete soubor pomocí kódu VS a klikněte na Spustit a ladit ikonu na postranním panelu (nebo stiskněte Ctrl + Shift + D na vaší klávesnici). Dále klikněte na Spustit a ladit tlačítko pro zahájení procesu.

Ve výchozím nastavení se Node.js pokusí zjistit ladicí prostředí vašeho projektu. Pokud je však automatická detekce neúspěšná, vyzve vás k výběru správného prostředí. Pro tento tutoriál je tímto prostředím Node.js.

Poté, co jste vybrali prostředí, VS Code aktivuje ladicí program a připojí jej k procesu. Svůj výstup můžete vidět v DEBUG KONZOLE. Pomocí panelu nástrojů ladění v horní části můžete iterovat kód, pozastavit provádění nebo ukončit relaci.

Máte také možnost vytvořit konfigurační soubor. The launch.json umožňuje nakonfigurovat a nastavit podrobnosti ladění. Pokud váš skript vyžaduje argument, zadejte tyto argumenty v souboru launch.json soubor. U každé konfigurace lze nastavit více možností:

{ 
"verze": "0.2.0", 
"konfigurace": [ 
 { "typ": "uzel", 
"žádost": "zahájení", 
"název": "Spustit program", 
"skipFiles": [ "/**" ], 
"program": "${workspaceFolder}\\index.js"
 } 
 ]
}

Také si všimnete pěti panelů na levé straně editoru. Tyto panely jsou PROMĚNNÉ, HODINKY, ZÁSOBNÍK VOLÁNÍ, NAČÍTANÉ SKRIPTY, a BODY ZLOMU:

Po dokončení nastavení konfigurace vyberte a spusťte program prostřednictvím nabídky konfigurace.

Připojte externí proces

Další metodou pro nastavení relace ladění Node.js je připojení externího procesu. Spusťte program následujícím příkazem:

uzel --inspect index.js

Vložte -brk vlajka po --kontrolovat pokud jej chcete připojit před spuštěním programu.

Dále otevřete výběr procesu ve VS Code. Zde jsou uvedeny všechny procesy dostupné v prostředí Node.js. Výběr otevřete stisknutím Ctrl + Shift + P a najít Ladění: Připojit k příkazu Node.js.

Klikněte na příkaz a vyberte správnou možnost pro zahájení procesu ladění.

Vytvoření bodu zlomu

Chcete-li se v určitých bodech programu pozastavit a zkontrolovat kód, nastavte tam zarážky. Body přerušení můžete nastavit téměř kdekoli v kódu. To zahrnuje deklarace proměnných, výrazy a komentáře. Ale nemůžete nastavit zarážky v deklaracích funkcí.

Vytvoření bodu přerušení je docela jednoduché. Když najedete myší na levou stranu čísel řádků, na každém řádku se objeví červený kruh. Identifikujte číslo řádku v kódu, kam chcete vložit zarážku. Poté klikněte na tento řádek a přidejte bod přerušení:

V BODY ZLOMU podokno, najdete všechny zarážky povolené ve vašem projektu. Zde budete spravovat, upravovat a deaktivovat zarážky. Můžete také zastavit kód při vyvolání výjimky nebo v případech nezachycených výjimek. To vám umožní zkontrolovat problém před ukončením procesu.

Podívejme se na breakpointy v akci. Klikněte na Zahájení ikonu pro zahájení relace ladění. Program se zastaví u prvního bodu přerušení a poskytne hodnotu ke kontrole:

Můžete kliknout na Pokračovat (nebo stiskněte F5) pro přesunutí programu na další bod přerušení. Toto bude pokračovat, dokud nedorazíte na konec programu.

Ladění TypeScript se zdrojovými mapami

Vzhledem k tomu, že Typescript je stále populárnější, počet projektů Node.js napsaných v TypeScript se bude nutně zvyšovat. Naštěstí můžete také ladit projekty založené na TypeScript pomocí VS Code.

Nejprve vytvořte a tsconfig.json soubor v kořenovém adresáři vašeho projektu (pokud ještě není vytvořen) a povolte zdrojové mapy:

{ "možnosti kompilátoru": { "sourceMaps": skutečný }}

Dále připojte běžící proces a nastavte zarážky v souboru TypeScript. Visual Studio Code najde zdrojové mapy a použije je.

VS Code můžete explicitně sdělit, kde má najít zdrojové mapy. Chcete-li to provést, přidejte outFiles atribut ve vašem konfiguračním souboru spuštění a nasměrujte jej na přesné umístění vašich zdrojových map:

{ 
"verze": "0.2.0", 
"konfigurace": [ { 
"typ": "uzel", 
"žádost": "zahájení", 
"název": "Spustit program", 
"skipFiles": [ "/**" ], 
"program": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Pokud používáte ts-uzel pro spuštění projektu bez kroku sestavení použijte toto místo výše uvedené konfigurace:

{ 
"verze": "0.2.0", 
"konfigurace": [ { 
"typ": "pwa-uzel", 
"žádost": "zahájení", 
"název": "Spustit server", 
"skipFiles": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-node/register" ], 
"args": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Protože neexistuje žádný atribut programu, runtime argumenty registrů ts-uzel jako obslužný program pro soubory TypeScript. První argument k argumenty je vstupní soubor pro program. Nyní můžete zahájit relaci ladění. Pokud vyvíjíte s vanilla JavaScript nebo front-end frameworkem, můžete také ladění kódu JavaScript v prohlížeči.

Další funkce v kódu Visual Studio

Visual Studio Code je výkonný editor zdrojového kódu nabitý úžasnými funkcemi. Zabývali jsme se vestavěným debuggerem VS Code. Také jsme ukázali, jak jej můžete použít k ladění vaší aplikace Node.js.

Ve VS Code je ale spousta dalších užitečných funkcí. I když některé z nich znáte, některé pro vás mohou být zcela nové. V takovém případě by vás mohlo zajímat dozvědět se o těchto funkcích a jak je používat.