Déboguer votre application Node.js dans Visual Studio Code est possible et simple. L’éditeur VS Code est livré avec un débogueur intégré capable de déboguer n’importe quelle application qui cible le runtime Node.js. Cela signifie que vous pouvez déboguer JavaScript ou tout autre langage qui se compile avec lui (par exemple TypeScript).
Cet article vous guidera à travers les étapes du débogage de votre application Node.js dans VS Code. Vous apprendrez comment démarrer une session de débogage, insérer des points d’arrêt, attacher un processus externe et déboguer du code TypeScript en utilisant des cartes de source.
Ce dont vous avez besoin pour commencer
Avant de commencer, installez Node.js et VS Code sur votre machine locale. La dernière version de Node.js est disponible sur le site officiel de Node.js. De même, pour Visual Studio Code, téléchargez la dernière version depuis le site web de VS Code. Pour savoir comment installer VS Code sur Windows, lisez notre guide d’installation.
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 VS Code est assez simple. Ouvrez le fichier avec VS Code et cliquez sur le bouton Exécuter et déboguer dans la barre latérale (ou appuyez sur Ctrl + Shift + D sur votre clavier). Cliquez ensuite sur l’icône Exécuter et déboguer pour lancer le processus.
Par défaut, Node.js essaiera de déterminer 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 vos résultats dans la fenêtre CONSOLE DE DÉBUGAGE. La barre d’outils de débogage située en haut de l’écran vous permet de parcourir le code, d’interrompre l’exécution ou de mettre fin à la session.
Vous avez également la possibilité de créer un fichier de configuration. Le fichier de configuration launch.json vous permet de configurer et de mettre en place les détails du débogage. Si votre script nécessite un argument, fournissez ces arguments dans le fichier launch.json fichier. Plusieurs options peuvent être définies pour chaque configuration :
{
"version": "0.2.0",
"configurations": [
{ "type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [ "<node_internals>/**" ],
"program": "${workspaceFolder}\\index.js"
}
]
}
Vous remarquerez également cinq panneaux sur le côté gauche de l’éditeur. Ces panneaux sont les suivants VARIABLES, WATCH, PILE D’APPEL, SCRIPTS CHARGÉSet POINTS DE RUPTURE:
Lorsque vous avez terminé la configuration, sélectionnez et exécutez le programme via le menu de configuration.
Attacher un processus externe
Une autre méthode pour mettre en place une session de débogage Node.js consiste à attacher un processus externe. Lancez le programme avec la commande suivante :
node --inspect index.js
Insérez le fichier -brk drapeau après –inspecter si vous souhaitez l’attacher 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 + Shift + P et trouver le Debug : Attachement à la commande Node.js.
Cliquez sur la commande et sélectionnez la bonne option pour lancer le processus de débogage.
Création d’un point d’arrêt
Si vous souhaitez faire une pause à des endroits précis de votre programme pour inspecter le code, placez des points d’arrêt à ces endroits. Vous pouvez placer des points d’arrêt presque partout dans votre code. Cela inclut les déclarations de variables, les expressions et les commentaires. Mais vous ne pouvez pas placer de points d’arrêt dans les déclarations de fonctions.
La création d’un point d’arrêt est assez simple. Lorsque vous déplacez votre souris à gauche des numéros de ligne, un cercle rouge apparaît sur chaque ligne. Identifiez le numéro de ligne de 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 la fenêtre POINTS DE RUPTURE vous trouverez tous les points d’arrêt activés dans votre projet. C’est ici que vous pourrez gérer, modifier et désactiver les points d’arrêt. Vous pouvez également arrêter le code lorsqu’une exception est levée ou dans le cas d’exceptions non capturées. Cela vous permet d’inspecter le problème avant que le processus ne se termine.
Voyons les points d’arrêt en action. Cliquez sur le bouton Lancer pour lancer la session de débogage. Le programme se met en pause au premier point d’arrêt et donne la valeur à inspecter :
Vous pouvez cliquer sur le bouton Continuer (ou appuyez sur F5) pour faire passer le programme au point d’arrêt suivant. Cette opération se poursuivra jusqu’à ce que vous arriviez à la fin du programme.
Débogage de TypeScript avec les cartes de source
Avec la popularité croissante de TypeScript, le nombre de projets Node.js écrits en TypeScript ne peut qu’augmenter. Heureusement, vous pouvez également déboguer les projets basés sur TypeScript avec VS Code.
Tout d’abord, créez un fichier tsconfig.json dans le répertoire racine de votre projet (s’il n’est pas déjà créé) et activez les cartes de source :
{ "compilerOptions": { "sourceMaps": true }}
Ensuite, attachez le processus en cours d’exécution et définissez les points d’arrêt dans votre fichier TypeScript. Visual Studio Code trouvera les cartes de sources et les utilisera.
Vous pouvez explicitement indiquer à VS Code où trouver les cartes de source. Pour ce faire, ajoutez un élément outFiles dans votre fichier de configuration de lancement et le faire pointer vers l’emplacement exact de vos cartes sources :
{
"version": "0.2.0",
"configurations": [ {
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [ "<node_internals>/**" ],
"program": "${workspaceFolder}\\index.js",
"outFiles": "${workspaceFolder}\\index.js",
}
]
}
Si vous utilisez ts-node pour exécuter votre projet sans étape de compilation, utilisez ceci à la place de la configuration ci-dessus :
{
"version": "0.2.0",
"configurations": [ {
"type": "pwa-node",
"request": "launch",
"name": "Launch Server",
"skipFiles": [ "<node_internals>/**" ],
"runtimeArgs": [ "-r", "ts-node/register" ],
"args": [ "${workspaceFolder}/src/server.ts" ]
}]
}
Puisqu’il n’y a pas d’attribut de programme, l’exécution args registres ts-node comme gestionnaire des fichiers TypeScript. Le premier argument de args 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 abordé 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 y a beaucoup d’autres fonctionnalités pratiques dans VS Code. Si certaines vous sont peut-être familières, d’autres vous sont peut-être totalement inconnues. Dans ce cas, il peut être intéressant pour vous de découvrir ces fonctionnalités et de savoir comment les utiliser.
