Comment déboguer des applications Node.js dans Visual Studio Code

Le débogage de votre application Node.js dans Visual Studio Code lui-même est possible et simple. L'éditeur de code VS est livré avec un débogueur intégré capable de déboguer toute application qui cible le runtime Node.js. Cela signifie que vous pouvez déboguer JavaScript ou tout autre langage qui le compile (par exemple, TypeScript).

Cet article vous guidera à travers les étapes de débogage de votre application Node.js dans VS Code. Vous apprendrez à démarrer une session de débogage, à insérer des points d'arrêt, à attacher un processus externe et à déboguer du code TypeScript à l'aide de cartes source.

Ce dont vous avez besoin pour commencer

Avant de commencer, installez à la fois Node.js et VS Code sur votre machine locale. La dernière version de Node.js est disponible sur le Node.js site officiel. De même, pour Visual Studio Code, téléchargez la dernière version à partir du

Code VS site Internet. Pour obtenir des instructions sur comment configurer VS Code sur Windows, lisez notre guide de configuration.

Vous avez également besoin d'un projet Node.js. Vous pouvez créer une application Node.js simple à partir de zéro ou utiliser une application existante.

Le processus de débogage dans VS Code

Démarrer une session de débogage dans l'éditeur de code VS est assez simple. Ouvrez le fichier avec VS Code et cliquez sur le Exécuter et déboguer icône dans la barre latérale (ou appuyez sur Ctrl + Maj + D sur votre clavier). Ensuite, cliquez sur le Exécuter et déboguer bouton pour démarrer le processus.

Par défaut, Node.js essaiera de comprendre l'environnement de débogage de votre projet. Mais si la détection automatique échoue, il vous invite à sélectionner le bon environnement. Pour ce tutoriel, cet environnement est Node.js.

Après avoir sélectionné l'environnement, VS Code active le débogueur et l'attache au processus. Vous pouvez voir votre sortie dans le CONSOLE DE DÉBOGAGE. À l'aide de la barre d'outils de débogage en haut, vous pouvez parcourir le code, suspendre l'exécution ou terminer la session.

Vous avez également la possibilité de créer un fichier de configuration. Le lancement.json Le fichier vous permet de configurer et de configurer les détails de débogage. Si votre script nécessite un argument, fournissez ces arguments dans le lancement.json déposer. Plusieurs options peuvent être définies sur chaque configuration :

{ 
"version": "0.2.0", 
"configurations": [ 
 { "taper": "nœud", 
"demande": "lancement", 
"nom": "Programme de lancement", 
"ignorer les fichiers": [ "/**" ], 
"programme": "${workspaceFolder}\\index.js"
 } 
 ]
}

Vous remarquerez également cinq panneaux sur le côté gauche de l'éditeur. Ces panneaux sont VARIABLES, MONTRE, PILE D'APPEL, SCRIPTS CHARGÉS, et POINTS D'ARRÊT:

Lorsque vous avez terminé de configurer la configuration, sélectionnez et exécutez le programme via le menu de configuration.

Attacher un processus externe

Une autre méthode pour configurer une session de débogage Node.js consiste à attacher un processus externe. Démarrez le programme avec la commande suivante :

noeud --inspect index.js

Insérez le -brk drapeau après --inspecter si vous voulez le joindre avant que le programme ne commence à s'exécuter.

Ensuite, ouvrez le sélecteur de processus dans VS Code. Celui-ci répertorie tous les processus disponibles dans l'environnement Node.js. Pour ouvrir le sélecteur, appuyez sur Ctrl + Maj + P et trouver le Débogage: commande Attacher à Node.js.

Cliquez sur la commande et sélectionnez la bonne option pour démarrer le processus de débogage.

Création d'un point d'arrêt

Si vous souhaitez faire une pause à des points spécifiques de votre programme pour inspecter le code, définissez-y des points d'arrêt. Vous pouvez définir des points d'arrêt presque n'importe où dans votre code. Cela inclut les déclarations de variables, les expressions et les commentaires. Mais vous ne pouvez pas définir de points d'arrêt dans les déclarations de fonction.

La création d'un point d'arrêt est assez simple. Lorsque vous déplacez votre souris sur le côté gauche des numéros de ligne, un cercle rouge apparaît sur chaque ligne. Identifiez le numéro de ligne dans votre code où vous souhaitez insérer le point d'arrêt. Cliquez ensuite sur cette ligne pour ajouter le point d'arrêt :

Dans le POINTS D'ARRÊT volet, vous trouverez tous les points d'arrêt activés dans votre projet. C'est ici que vous gérerez, modifierez et désactiverez les points d'arrêt. Vous pouvez également arrêter le code lorsqu'une exception est levée ou en cas d'exceptions non interceptées. Cela vous permet d'inspecter le problème avant la fin du processus.

Voyons les points d'arrêt en action. Clique le Lancement icône pour démarrer la session de débogage. Le programme s'arrêtera au premier point d'arrêt et donnera la valeur pour inspection :

Vous pouvez cliquer sur le Continuer (ou appuyez sur F5) pour déplacer le programme vers le point d'arrêt suivant. Cela continuera jusqu'à ce que vous arriviez à la fin du programme.

Débogage de TypeScript avec des cartes source

Alors que Typescript continue de gagner en popularité, le nombre de projets Node.js écrits en TypeScript est appelé à augmenter. Heureusement, vous pouvez également déboguer des projets basés sur TypeScript avec VS Code.

Tout d'abord, créez un tsconfig.json fichier dans le répertoire racine de votre projet (s'il n'est pas déjà créé) et activez les cartes source :

{ "options du compilateur": { "sourceMaps": vrai }}

Ensuite, attachez le processus en cours et définissez les points d'arrêt dans votre fichier TypeScript. Visual Studio Code trouvera les cartes source et les utilisera.

Vous pouvez indiquer explicitement à VS Code où trouver les cartes source. Pour ce faire, ajoutez un outFiles dans votre fichier de configuration de lancement et pointez-le vers l'emplacement exact de vos cartes sources :

{ 
"version": "0.2.0", 
"configurations": [ { 
"taper": "nœud", 
"demande": "lancement", 
"nom": "Programme de lancement", 
"ignorer les fichiers": [ "/**" ], 
"programme": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

Si vous utilisez nœud ts pour exécuter votre projet sans étape de compilation, utilisez ceci à la place de la configuration ci-dessus :

{ 
"version": "0.2.0", 
"configurations": [ { 
"taper": "nœud pwa", 
"demande": "lancement", 
"nom": "Lancer le serveur", 
"ignorer les fichiers": [ "/**" ], 
"runtimeArgs": [ "-r", "ts-nœud/registre" ], 
"arguments": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

Puisqu'il n'y a pas d'attribut de programme, le temps d'exécution arguments registres nœud ts comme gestionnaire pour les fichiers TypeScript. Le premier argument à arguments est le fichier d'entrée du programme. Vous pouvez maintenant démarrer votre session de débogage. Si vous développez avec du JavaScript vanille ou un framework frontal, vous pouvez également déboguer le code JavaScript dans le navigateur.

Autres fonctionnalités de Visual Studio Code

Visual Studio Code est un puissant éditeur de code source doté de fonctionnalités étonnantes. Nous avons couvert l'outil de débogage intégré de VS Code. Nous avons également montré comment vous pouvez l'utiliser pour déboguer votre application Node.js.

Mais il existe de nombreuses autres fonctionnalités pratiques dans VS Code. Bien que vous connaissiez peut-être certains d'entre eux, certains peuvent être complètement nouveaux pour vous. Dans ce cas, cela pourrait vous intéresser d'en savoir plus sur ces fonctionnalités et comment les utiliser.