Come eseguire il debug di applicazioni Node.js in Visual Studio Code

Il debug dell'applicazione Node.js in Visual Studio Code stesso è possibile e semplice. L'editor VS Code viene fornito con un debugger integrato in grado di eseguire il debug di qualsiasi applicazione destinata al runtime Node.js. Ciò significa che puoi eseguire il debug di JavaScript o di qualsiasi altro linguaggio che lo compili (ad es. TypeScript).

Questo articolo ti guiderà attraverso i passaggi per eseguire il debug dell'applicazione Node.js in VS Code. Imparerai come avviare una sessione di debug, inserire punti di interruzione, collegare un processo esterno ed eseguire il debug del codice TypeScript utilizzando le mappe di origine.

Cosa ti serve per iniziare

Prima di iniziare, installa sia Node.js che VS Code sul tuo computer locale. L'ultima versione di Node.js è disponibile su Node.js Sito ufficiale. Allo stesso modo, per Visual Studio Code, scarica l'ultima versione dal file

Codice VS sito web. Per istruzioni su come configurare VS Code su Windows, leggi la nostra guida alla configurazione.

È inoltre necessario un progetto Node.js. Puoi creare una semplice applicazione Node.js da zero o utilizzare un'applicazione esistente.

Il processo di debug in VS Code

L'avvio di una sessione di debug nell'editor VS Code è piuttosto semplice. Apri il file con VS Code e fai clic su Esegui ed esegui il debug icona nella barra laterale (o premere Ctrl + Maiusc + D sulla tastiera). Successivamente, fai clic su Esegui ed esegui il debug pulsante per avviare il processo.

Per impostazione predefinita, Node.js proverà a capire l'ambiente di debug del tuo progetto. Ma se il rilevamento automatico non ha successo, ti viene chiesto di selezionare l'ambiente giusto. Per questo tutorial, tale ambiente è Node.js.

Dopo aver selezionato l'ambiente, VS Code attiva il debugger e lo collega al processo. Puoi vedere il tuo output nel file CONSOLLE DI DEBUG. Utilizzando la barra degli strumenti di debug in alto, puoi scorrere il codice, sospendere l'esecuzione o terminare la sessione.

Hai anche la possibilità di creare un file di configurazione. IL launch.json file consente di configurare e impostare i dettagli di debug. Se il tuo script richiede un argomento, fornisci questi argomenti nel file launch.json file. È possibile impostare più opzioni su ciascuna configurazione:

{ 
"versione": "0.2.0", 
"configurazioni": [ 
 { "tipo": "nodo", 
"richiesta": "lancio", 
"nome": "Programma di lancio", 
"salta file": [ "/**" ], 
"programma": "${cartella spazio di lavoro}\\index.js"
 } 
 ]
}

Noterai anche cinque pannelli sul lato sinistro dell'editor. Questi pannelli sono VARIABILI, OROLOGIO, STACK DI CHIAMATE, SCRITTI CARICATI, E PUNTI DI INTERRUZIONE:

Quando hai finito di impostare la configurazione, seleziona ed esegui il programma attraverso il menu di configurazione.

Allegare un processo esterno

Un altro metodo per impostare una sessione di debug di Node.js consiste nel collegare un processo esterno. Avviare il programma con il seguente comando:

node --inspect index.js

Inserisci il -brk bandiera dopo --ispezionare se vuoi allegarlo prima che inizi l'esecuzione del programma.

Successivamente, apri il selettore di processo in VS Code. Questo elenca tutti i processi disponibili nell'ambiente Node.js. Per aprire il selettore, premere Ctrl + Maiusc + P e trova il Debug: Collega al comando Node.js.

Fare clic sul comando e selezionare l'opzione corretta per avviare il processo di debug.

Creazione di un punto di interruzione

Se vuoi fermarti in punti specifici del tuo programma per ispezionare il codice, imposta i punti di interruzione lì. Puoi impostare punti di interruzione quasi ovunque nel tuo codice. Ciò include dichiarazioni di variabili, espressioni e commenti. Ma non puoi impostare punti di interruzione nelle dichiarazioni di funzione.

La creazione di un punto di interruzione è piuttosto semplice. Spostando il mouse sul lato sinistro dei numeri di riga, su ogni riga viene visualizzato un cerchio rosso. Identifica il numero di riga nel codice in cui desideri inserire il punto di interruzione. Quindi fare clic su quella riga per aggiungere il punto di interruzione:

Nel PUNTI DI INTERRUZIONE riquadro, troverai tutti i punti di interruzione abilitati nel tuo progetto. Qui è dove gestirai, modificherai e disabiliterai i punti di interruzione. Puoi anche interrompere il codice quando viene generata un'eccezione o in caso di eccezioni non rilevate. Ciò consente di ispezionare il problema prima che il processo termini.

Vediamo i breakpoint in azione. Clicca il Lancio icona per avviare la sessione di debug. Il programma si fermerà al primo punto di interruzione e produrrà il valore per l'ispezione:

È possibile fare clic su Continua icona (o premere F5) per spostare il programma al punto di interruzione successivo. Questo continuerà fino ad arrivare alla fine del programma.

Debug di TypeScript con mappe di origine

Man mano che Typescript continua a diventare più popolare, la quantità di progetti Node.js scritti in TypeScript è destinata ad aumentare. Fortunatamente, puoi anche eseguire il debug di progetti basati su TypeScript con VS Code.

Per prima cosa, crea un file tsconfig.json file nella directory principale del tuo progetto (se non è già stato creato) e abilita le mappe di origine:

{ "Opzioni del compilatore": { "sourceMaps": VERO }}

Successivamente, collega il processo in esecuzione e imposta i punti di interruzione nel tuo file TypeScript. Visual Studio Code troverà le mappe di origine e le utilizzerà.

Puoi indicare in modo esplicito a VS Code dove trovare le mappe di origine. Per fare ciò, aggiungi un outFiles attributo nel file di configurazione di avvio e indirizzarlo alla posizione esatta delle mappe di origine:

{ 
"versione": "0.2.0", 
"configurazioni": [ { 
"tipo": "nodo", 
"richiesta": "lancio", 
"nome": "Programma di lancio", 
"salta file": [ "/**" ], 
"programma": "${cartella spazio di lavoro}\\index.js", 
"outFiles": "${cartella spazio di lavoro}\\index.js", 
 } 
 ]
}

Se stai usando ts-nodo per eseguire il tuo progetto senza un passo di compilazione, usa questo invece della configurazione sopra:

{ 
"versione": "0.2.0", 
"configurazioni": [ { 
"tipo": "pwa-nodo", 
"richiesta": "lancio", 
"nome": "Avvia server", 
"salta file": [ "/**" ], 
"runtimeArgs": [ "-R", "ts-nodo/registro" ], 
"argomenti": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Poiché non esiste alcun attributo del programma, runtime arg registri ts-nodo come gestore per i file TypeScript. Il primo argomento a arg è il file di ingresso per il programma. Ora puoi iniziare la tua sessione di debug. Se stai sviluppando con JavaScript vanilla o un framework front-end, puoi farlo anche tu eseguire il debug del codice JavaScript nel browser.

Altre funzionalità nel codice di Visual Studio

Visual Studio Code è un potente editor di codice sorgente ricco di funzionalità sorprendenti. Abbiamo coperto lo strumento di debug integrato di VS Code. Abbiamo anche dimostrato come puoi usarlo per eseguire il debug della tua applicazione Node.js.

Ma ci sono molte altre utili funzionalità in VS Code. Mentre potresti avere familiarità con alcuni di loro, alcuni potrebbero essere completamente nuovi per te. In tal caso, potrebbe interessarti conoscere queste funzionalità e come utilizzarle.