Nepotrebujete externý nástroj na ladenie. Svoje aplikácie Node.js môžete ladiť priamo v editore kódu VS pomocou jeho vstavaného nástroja.

Ladenie vašej aplikácie Node.js v samotnom kóde Visual Studio je možné a jednoduché. Editor kódu VS prichádza so vstavaným debuggerom schopným ladiť akúkoľvek aplikáciu, ktorá sa zameriava na runtime Node.js. To znamená, že môžete ladiť JavaScript alebo akýkoľvek iný jazyk, ktorý sa doň kompiluje (napr. TypeScript).

Tento článok vás prevedie krokmi na ladenie vašej aplikácie Node.js v kóde VS. Dozviete sa, ako spustiť reláciu ladenia, vložiť body prerušenia, pripojiť externý proces a ladiť kód TypeScript pomocou zdrojových máp.

Čo potrebujete, aby ste mohli začať

Skôr ako začnete, nainštalujte na svoj lokálny počítač Node.js aj kód VS. Najnovšia verzia Node.js je dostupná na Node.js oficiálna web stránka. Podobne pre Visual Studio Code si stiahnite najnovšiu verziu z VS kód webovej stránky. Pre pokyny na ako nastaviť kód VS v systéme Windows, prečítajte si nášho sprievodcu nastavením.

instagram viewer

Potrebujete tiež projekt Node.js. Môžete si vytvoriť jednoduchú aplikáciu Node.js od začiatku alebo použite existujúcu aplikáciu.

Proces ladenia v kóde VS

Spustenie relácie ladenia v editore kódu VS je celkom jednoduché. Otvorte súbor s kódom VS a kliknite na Spustiť a ladiť ikonu na bočnom paneli (alebo stlačte Ctrl + Shift + D na klávesnici). Ďalej kliknite na Spustiť a ladiť tlačidlo na spustenie procesu.

V predvolenom nastavení sa Node.js pokúsi zistiť prostredie ladenia vášho projektu. Ak je však automatická detekcia neúspešná, zobrazí sa výzva na výber správneho prostredia. Pre tento tutoriál je týmto prostredím Node.js.

Po výbere prostredia VS Code aktivuje debugger a pripojí ho k procesu. Svoj výstup môžete vidieť v DEBUG KONZOLE. Pomocou panela s nástrojmi ladenia v hornej časti môžete prechádzať kódom, pozastaviť vykonávanie alebo ukončiť reláciu.

Máte tiež možnosť vytvoriť konfiguračný súbor. The launch.json umožňuje konfigurovať a nastaviť podrobnosti ladenia. Ak váš skript vyžaduje argument, zadajte tieto argumenty do súboru launch.json súbor. Pre každú konfiguráciu je možné nastaviť viacero možností:

{ 
"verzia": "0.2.0",
"konfigurácie": [
{ "typ": "uzol",
"žiadosť": "spustiť",
"názov": "Spustiť program",
"skipFiles": [ "/**" ],
"program": "${workspaceFolder}\\index.js"
}
 ]
}

Tiež si všimnete päť panelov na ľavej strane editora. Tieto panely sú PREMENNÉ, SLEDOVAŤ, ZÁSOBNÍK VOLANIA, NAČÍTANÉ SKRIPTY, a BREAKBODY:

Keď skončíte s nastavením konfigurácie, vyberte a spustite program cez konfiguračnú ponuku.

Pripojte externý proces

Ďalšou metódou nastavenia relácie ladenia Node.js je pripojenie externého procesu. Spustite program nasledujúcim príkazom:

node --inspect index.js

Vložte -brk vlajka po --kontrolovať ak ho chcete pripojiť pred spustením programu.

Ďalej otvorte výber procesu v kóde VS. Tu sú uvedené všetky procesy dostupné v prostredí Node.js. Výber otvoríte stlačením Ctrl + Shift + P a nájsť Ladenie: Pripojiť k príkazu Node.js.

Kliknite na príkaz a vyberte správnu možnosť na spustenie procesu ladenia.

Vytvorenie bodu zlomu

Ak sa chcete pozastaviť v konkrétnych bodoch vo svojom programe a skontrolovať kód, nastavte tam prerušovacie body. Body prerušenia môžete nastaviť takmer kdekoľvek v kóde. To zahŕňa deklarácie premenných, výrazy a komentáre. Ale nemôžete nastaviť body prerušenia vo deklaráciách funkcií.

Vytvorenie bodu prerušenia je celkom jednoduché. Keď presuniete myš na ľavú stranu čísel riadkov, na každom riadku sa zobrazí červený kruh. Identifikujte číslo riadku v kóde, kam chcete vložiť bod prerušenia. Potom kliknite na tento riadok a pridajte bod prerušenia:

V BREAKBODY nájdete všetky body prerušenia povolené vo vašom projekte. Tu budete spravovať, upravovať a deaktivovať prerušovacie body. Môžete tiež zastaviť kód pri vyvolaní výnimky alebo v prípade nezachytených výnimiek. To vám umožní skontrolovať problém pred ukončením procesu.

Pozrime sa na body zlomu v akcii. Kliknite na Spustiť ikonu na spustenie relácie ladenia. Program sa zastaví pri prvom bode prerušenia a poskytne hodnotu na kontrolu:

Môžete kliknúť na ďalej ikonu (alebo stlačte F5), aby ste presunuli program na ďalší bod prerušenia. Toto bude pokračovať, kým sa nedostanete na koniec programu.

Ladenie TypeScript so zdrojovými mapami

S rastúcou popularitou Typescriptu sa počet projektov Node.js napísaných v TypeScript bude nevyhnutne zvyšovať. Našťastie môžete tiež ladiť projekty založené na TypeScript s kódom VS.

Najprv vytvorte a tsconfig.json súbor v koreňovom adresári vášho projektu (ak ešte nie je vytvorený) a povoľte zdrojové mapy:

{ "možnosti kompilátora": { "sourceMaps": pravda }}

Ďalej pripojte spustený proces a nastavte body prerušenia v súbore TypeScript. Visual Studio Code nájde zdrojové mapy a použije ich.

VS Code môžete explicitne povedať, kde nájsť zdrojové mapy. Ak to chcete urobiť, pridajte outFiles atribút vo vašom konfiguračnom súbore spustenia a nasmerujte ho na presné umiestnenie vašich zdrojových máp:

{ 
"verzia": "0.2.0",
"konfigurácie": [ {
"typ": "uzol",
"žiadosť": "spustiť",
"názov": "Spustiť program",
"skipFiles": [ "/**" ],
"program": "${workspaceFolder}\\index.js",
"outFiles": "${workspaceFolder}\\index.js",
}
 ]
}

Ak používate ts-uzol ak chcete spustiť svoj projekt bez kroku zostavenia, použite tento namiesto konfigurácie vyššie:

{ 
"verzia": "0.2.0",
"konfigurácie": [ {
"typ": "pwa-uzol",
"žiadosť": "spustiť",
"názov": "Spustiť server",
"skipFiles": [ "/**" ],
"runtimeArgs": [ "-r", "ts-node/register" ],
"args": [ "${workspaceFolder}/src/server.ts" ]
 }]
}

Keďže neexistuje atribút programu, runtime args registrov ts-uzol ako obslužný program pre súbory TypeScript. Prvý argument k args je vstupný súbor pre program. Teraz môžete spustiť reláciu ladenia. Ak vyvíjate pomocou vanilkového JavaScriptu alebo front-end frameworku, môžete tiež ladenie kódu JavaScript v prehliadači.

Ďalšie funkcie v kóde Visual Studio

Visual Studio Code je výkonný editor zdrojového kódu nabitý úžasnými funkciami. Zaoberali sme sa vstavaným ladiacim nástrojom VS Code. Tiež sme ukázali, ako ho môžete použiť na ladenie vašej aplikácie Node.js.

Vo VS Code je však veľa ďalších užitočných funkcií. Aj keď niektoré z nich poznáte, niektoré môžu byť pre vás úplne nové. V takom prípade by vás mohlo zaujímať dozvedieť sa o týchto funkciách a o tom, ako ich používať.