Sådan fejlretter du Node.js-applikationer i Visual Studio Code

Fejlretning af din Node.js-applikation i selve Visual Studio Code er muligt og ligetil. VS Code editoren kommer med en indbygget debugger, der er i stand til at fejlsøge enhver applikation, der er målrettet mod Node.js runtime. Dette betyder, at du kan fejlsøge JavaScript eller et hvilket som helst andet sprog, der kompilerer til det (f.eks. TypeScript).

Denne artikel vil lede dig gennem trinene til fejlretning af din Node.js-applikation i VS Code. Du lærer, hvordan du starter en fejlretningssession, indsætter brudpunkter, vedhæfter en ekstern proces og fejlretter TypeScript-kode ved hjælp af kildekort.

Hvad du skal bruge for at komme i gang

Inden du starter, skal du installere både Node.js og VS Code på din lokale maskine. Den seneste version af Node.js er tilgængelig på Node.js officiel hjemmeside. Tilsvarende, for Visual Studio Code, download den nyeste version fra

VS kode internet side. For instruktioner vedr hvordan man opsætter VS Code på Windows, læs vores opsætningsvejledning.

Du har også brug for et Node.js-projekt. Du kan oprette en simpel Node.js-applikation fra bunden eller brug en eksisterende applikation.

Fejlretningsprocessen i VS-kode

At starte en fejlretningssession i VS Code-editoren er ret ligetil. Åbn filen med VS-kode og klik på Kør og fejlfind ikonet i sidebjælken (eller tryk på Ctrl + Shift + D på dit tastatur). Klik derefter på Kør og fejlfind knappen for at starte processen.

Som standard vil Node.js forsøge at finde ud af fejlfindingsmiljøet for dit projekt. Men hvis den automatiske registrering ikke lykkes, beder den dig om at vælge det rigtige miljø. For denne øvelse er dette miljø Node.js.

Når du har valgt miljøet, aktiverer VS Code fejlfinderen og knytter den til processen. Du kan se dit output i DEBUG KONSOL. Ved at bruge fejlfindingsværktøjslinjen øverst kan du gentage koden, sætte udførelse på pause eller afslutte sessionen.

Du har også mulighed for at oprette en konfigurationsfil. Det launch.json fil lader dig konfigurere og opsætte debug detaljer. Hvis dit script kræver et argument, skal du angive disse argumenter i launch.json fil. Der kan indstilles flere muligheder for hver konfiguration:

{ 
"version": "0.2.0", 
"konfigurationer": [ 
 { "type": "node", 
"anmodning": "lancering", 
"navn": "Start program", 
"spring filer over": [ "/**" ], 
"program": "${workspaceFolder}\\index.js"
 } 
 ]
}

Du vil også bemærke fem paneler i venstre side af editoren. Disse paneler er VARIABLER, HOLDE ØJE, OPKALD STAK, LÆSTEDE SKRIFTER, og BRUDSPUNKTER:

Når du er færdig med at opsætte konfigurationen, skal du vælge og køre programmet gennem konfigurationsmenuen.

Vedhæft en ekstern proces

En anden metode til at opsætte en Node.js-fejlretningssession er ved at vedhæfte en ekstern proces. Start programmet med følgende kommando:

node --inspect index.js

Indsæt -brk flag efter --inspicere hvis du vil vedhæfte det, før programmet begynder at køre.

Åbn derefter procesvælgeren i VS-kode. Dette viser alle de tilgængelige processer i Node.js-miljøet. Tryk på for at åbne vælgeren Ctrl + Shift + P og find Fejlretning: Vedhæft til Node.js kommando.

Klik på kommandoen og vælg den rigtige mulighed for at starte fejlretningsprocessen.

Oprettelse af et brudpunkt

Hvis du vil holde pause på bestemte punkter i dit program for at inspicere koden, skal du indstille pausepunkter der. Du kan indstille brudpunkter næsten hvor som helst i din kode. Dette inkluderer variabeldeklarationer, udtryk og kommentarer. Men du kan ikke sætte brudpunkter i funktionserklæringer.

At oprette et brudpunkt er ret ligetil. Når du flytter musen til venstre side af linjenumrene, vises en rød cirkel på hver linje. Identificer linjenummeret i din kode, hvor du vil indsætte brudpunktet. Klik derefter på den linje for at tilføje brudpunktet:

I den BRUDSPUNKTER ruden, finder du alle breakpoints aktiveret i dit projekt. Det er her, du kan administrere, redigere og deaktivere pausepunkter. Du kan også stoppe koden, når en undtagelse opstår, eller i tilfælde af ufangede undtagelser. Dette giver dig mulighed for at inspicere problemet, før processen afsluttes.

Lad os se breakpoints i aktion. Klik på Lancering ikon for at starte fejlfindingssessionen. Programmet pauser ved det første brudpunkt og giver værdien til inspektion:

Du kan klikke på Blive ved ikonet (eller tryk på F5) for at flytte programmet til næste pausepunkt. Dette vil fortsætte, indtil du ankommer til slutningen af ​​programmet.

Fejlretning af TypeScript med kildekort

Efterhånden som Typescript fortsætter med at vokse mere populært, vil mængden af ​​Node.js-projekter skrevet i TypeScript stige. Heldigvis kan du også fejlsøge TypeScript-baserede projekter med VS Code.

Først skal du oprette en tsconfig.json fil i dit projekts rodmappe (hvis den ikke allerede er oprettet) og aktiver kildekort:

{ "compilerOptions": { "sourceMaps": rigtigt }}

Vedhæft derefter den kørende proces og indstil brudpunkterne i din TypeScript-fil. Visual Studio Code finder kildekortene og bruger dem.

Du kan udtrykkeligt fortælle VS Code, hvor du kan finde kildekortene. For at gøre dette skal du tilføje en outFiles attribut i din startkonfigurationsfil og peg den til den nøjagtige placering af dine kildekort:

{ 
"version": "0.2.0", 
"konfigurationer": [ { 
"type": "node", 
"anmodning": "lancering", 
"navn": "Start program", 
"spring filer over": [ "/**" ], 
"program": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Hvis du bruger ts-node for at køre dit projekt uden et byggetrin, brug dette i stedet for konfigurationen ovenfor:

{ 
"version": "0.2.0", 
"konfigurationer": [ { 
"type": "pwa-node", 
"anmodning": "lancering", 
"navn": "Start server", 
"spring filer over": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-node/register" ], 
"args": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Da der ikke er nogen programattribut, runtime args registre ts-node som handler for TypeScript-filer. Det første argument til args er indtastningsfilen til programmet. Nu kan du starte din fejlfindingssession. Hvis du udvikler med vanilla JavaScript eller en frontend-ramme, kan du også debug JavaScript-koden i browseren.

Andre funktioner i Visual Studio Code

Visual Studio Code er en kraftfuld kildekodeeditor spækket med fantastiske funktioner. Vi dækkede VS Codes indbyggede debugger-værktøj. Vi demonstrerede også, hvordan du kan bruge det til at fejlsøge din Node.js-applikation.

Men der er en masse andre praktiske funktioner i VS Code. Selvom du måske er bekendt med nogle af dem, kan nogle være helt nye for dig. I så fald kan det interessere dig at lære om disse funktioner, og hvordan du bruger dem.