Slik feilsøker du Node.js-applikasjoner i Visual Studio Code

Å feilsøke Node.js-applikasjonen i selve Visual Studio Code er mulig og enkelt. VS Code-editoren kommer med en innebygd debugger som er i stand til å feilsøke alle programmer som er rettet mot Node.js-kjøringen. Dette betyr at du kan feilsøke JavaScript eller et hvilket som helst annet språk som kompileres til det (f.eks. TypeScript).

Denne artikkelen vil lede deg gjennom trinnene for feilsøking av Node.js-applikasjonen din i VS Code. Du lærer hvordan du starter en feilsøkingsøkt, setter inn bruddpunkter, legger ved en ekstern prosess og feilsøker TypeScript-kode ved hjelp av kildekart.

Hva du trenger for å komme i gang

Før du starter, installer både Node.js og VS Code på din lokale maskin. Den nyeste versjonen av Node.js er tilgjengelig på Node.js offesiell nettside. På samme måte, for Visual Studio Code, last ned den nyeste versjonen fra

VS-kode nettsted. For instruksjoner om hvordan sette opp VS Code på Windows, les vår oppsettsveiledning.

Du trenger også et Node.js-prosjekt. Du kan lage en enkel Node.js-applikasjon fra bunnen av eller bruk en eksisterende applikasjon.

Feilsøkingsprosessen i VS-kode

Å starte en feilsøkingsøkt i VS Code editor er ganske enkelt. Åpne filen med VS-kode og klikk på Kjør og feilsøk ikonet i sidefeltet (eller trykk Ctrl + Shift + D på tastaturet). Deretter klikker du på Kjør og feilsøk knappen for å starte prosessen.

Som standard vil Node.js prøve å finne ut feilsøkingsmiljøet til prosjektet ditt. Men hvis den automatiske gjenkjenningen ikke lykkes, ber den deg velge riktig miljø. For denne opplæringen er det miljøet Node.js.

Etter at du har valgt miljøet, aktiverer VS Code feilsøkeren og kobler den til prosessen. Du kan se resultatet i DEBUG KONSOLLEN. Ved å bruke feilsøkingsverktøylinjen øverst kan du iterere gjennom koden, sette kjøringen på pause eller avslutte økten.

Du har også muligheten til å lage en konfigurasjonsfil. De launch.json fil lar deg konfigurere og sette opp feilsøkingsdetaljer. Hvis skriptet ditt krever et argument, oppgi disse argumentene i launch.json fil. Flere alternativer kan angis for hver konfigurasjon:

{ 
"versjon": "0.2.0", 
"konfigurasjoner": [ 
 { "type": "node", 
"be om": "lansering", 
"Navn": "Start program", 
"hopp over filer": [ "/**" ], 
"program": "${workspaceFolder}\\index.js"
 } 
 ]
}

Du vil også legge merke til fem paneler på venstre side av editoren. Disse panelene er VARIABLER, SE, CALL STACK, LASTEDE SKRIPPER, og KNUSPUNKTER:

Når du er ferdig med å sette opp konfigurasjonen, velg og kjør programmet gjennom konfigurasjonsmenyen.

Legg ved en ekstern prosess

En annen metode for å sette opp en Node.js-feilsøkingsøkt er ved å legge ved en ekstern prosess. Start programmet med følgende kommando:

node --inspiser index.js

Sett inn -brk flagget etter --undersøke hvis du vil legge den ved før programmet begynner å kjøre.

Deretter åpner du prosessvelgeren i VS-kode. Dette viser alle prosessene som er tilgjengelige i Node.js-miljøet. For å åpne velgeren, trykk Ctrl + Shift + P og finn Feilsøking: Koble til kommandoen Node.js.

Klikk på kommandoen og velg det riktige alternativet for å starte feilsøkingsprosessen.

Opprette et bruddpunkt

Hvis du vil ta pause på bestemte punkter i programmet for å inspisere koden, setter du pausepunkter der. Du kan angi bruddpunkter nesten hvor som helst i koden din. Dette inkluderer variabeldeklarasjoner, uttrykk og kommentarer. Men du kan ikke sette bruddpunkter i funksjonserklæringer.

Å lage et bruddpunkt er ganske enkelt. Når du flytter musen til venstre side av linjenumrene, vises en rød sirkel på hver linje. Identifiser linjenummeret i koden din der du vil sette inn bruddpunktet. Klikk deretter på den linjen for å legge til bruddpunktet:

I KNUSPUNKTER ruten, finner du alle bruddpunktene som er aktivert i prosjektet ditt. Det er her du skal administrere, redigere og deaktivere bruddpunkter. Du kan også stoppe koden når et unntak oppstår eller i tilfeller av uoppdagede unntak. Dette lar deg inspisere problemet før prosessen avsluttes.

La oss se bruddpunkter i aksjon. Klikk på Lansering ikonet for å starte feilsøkingsøkten. Programmet vil pause ved det første bruddpunktet og gi verdien for inspeksjon:

Du kan klikke på Fortsette ikonet (eller trykk F5) for å flytte programmet til neste bruddpunkt. Dette vil fortsette til du kommer til slutten av programmet.

Feilsøking av TypeScript med kildekart

Ettersom Typescript fortsetter å bli mer populært, vil antallet Node.js-prosjekter skrevet i TypeScript garantert øke. Heldigvis kan du også feilsøke TypeScript-baserte prosjekter med VS Code.

Lag først en tsconfig.json fil i prosjektets rotkatalog (hvis den ikke allerede er opprettet) og aktiver kildekart:

{ "compilerOptions": { "sourceMaps": ekte }}

Deretter legger du ved den kjørende prosessen og setter bruddpunktene i TypeScript-filen. Visual Studio Code vil finne kildekartene og bruke dem.

Du kan eksplisitt fortelle VS Code hvor du finner kildekartene. For å gjøre dette, legg til en utfiler attributtet i startkonfigurasjonsfilen og pek den til den nøyaktige plasseringen av kildekartene dine:

{ 
"versjon": "0.2.0", 
"konfigurasjoner": [ { 
"type": "node", 
"be om": "lansering", 
"Navn": "Start program", 
"hopp over filer": [ "/**" ], 
"program": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Hvis du bruker ts-node for å kjøre prosjektet uten byggetrinn, bruk dette i stedet for konfigurasjonen ovenfor:

{ 
"versjon": "0.2.0", 
"konfigurasjoner": [ { 
"type": "pwa-node", 
"be om": "lansering", 
"Navn": "Start server", 
"hopp over filer": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-node/register" ], 
"args": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Siden det ikke er noe programattributt, kjøretid args registrerer ts-node som behandler for TypeScript-filer. Det første argumentet til args er oppføringsfilen for programmet. Nå kan du starte feilsøkingsøkten. Hvis du utvikler med vanilla JavaScript eller et front-end-rammeverk, kan du også feilsøk JavaScript-koden i nettleseren.

Andre funksjoner i Visual Studio Code

Visual Studio Code er en kraftig kildekoderedigerer fullpakket med fantastiske funksjoner. Vi dekket VS Codes innebygde feilsøkingsverktøy. Vi demonstrerte også hvordan du kan bruke den til å feilsøke Node.js-applikasjonen din.

Men det er mange andre nyttige funksjoner i VS Code. Selv om du kanskje er kjent med noen av dem, kan noen være helt nye for deg. I så fall kan det interessere deg å lære om disse funksjonene og hvordan du bruker dem.