VS (ou Virtual Studio) Code est un éditeur de code gratuit qui prend en charge tous les principaux langages de programmation. Il permet aux programmeurs d’examiner rapidement et facilement le codage et de le modifier si nécessaire. Il fonctionne comme un IDE pour les personnes qui écrivent du code, mais il n’empêche pas les bogues. Heureusement, VSCode dispose d’un outil de débogage très pratique intégré au programme.
Dans cet article, nous vous montrerons comment utiliser le débogueur sur VS code.
Qu’est-ce qu’un débogueur ?
Lorsque vous codez, il y aura des moments où le code que vous écrivez rencontrera des problèmes. Ces problèmes peuvent ne pas être la faute du codeur, mais apparaître simplement parce que quelque chose se dérègle tout seul. Ces “bugs” peuvent entraîner l’arrêt du fonctionnement des programmes. Pour cette raison, il est important pour les codeurs de les trouver et de les éliminer.
Un débogueur est un programme qui localise les bogues et les corrige automatiquement ou suggère des moyens de le faire. VSCode en possède un intégré, mais il existe de nombreuses méthodes différentes pour utiliser le débogueur. Voici quelques façons d’utiliser le débogueur dans VS Code.
Le débogueur a JavaScript, TypeScript, et tous les autres langages qui utilisent des compilateurs Java. D’autres langages comme Python ou Ruby nécessiteront l’installation d’extensions.
Pour ce faire, suivez ces étapes:
- Dans le menu supérieur, sélectionnez “Installer des débogueurs supplémentaires”.
- Sélectionnez les langages de programmation que vous souhaitez utiliser.
- Le langage sera téléchargé et saisi dans votre base de données. Vous pouvez maintenant exécuter le débogueur en utilisant le langage souhaité.
Ensuite, nous allons voir comment utiliser le débogueur dans VSCode.
Créer une base de données Node.js
Node.js est la plateforme que le débogueur de VSCode exécute par défaut. Vous en avez besoin pour suivre tout ce qui se passe avec votre code. Il est ainsi plus facile d’identifier le problème. En outre, certaines fonctionnalités du débogueur de VSCode ne fonctionnent qu’avec JavaScript. Vous allez devoir créer un programme simple, le fameux programme “Hello, World”. Une fois cette étape franchie, l’exécution du débogueur sera fluide et rapide.
Pour créer un Node.js, suivez ces étapes:
- Avant de commencer, assurez-vous que vous avez Node.js téléchargé et installé sur votre ordinateur.
- Pour voir si Node.js est installé, créez un nouveau terminal et tapez “node-version” dans le terminal. La version de Node.js que vous avez installée devrait apparaître.
- Créez un dossier vide sur votre Bureau et nommez-le “hello”.
- Ouvrez VSCode et dans l’invite de commande, tapez le code suivant:
mkdir hello
cd hello
code.
- Trouvez la barre d’outils de l’explorateur de fichiers. Votre fichier devrait s’afficher avec le nom “Hello” Cliquez sur le bouton “Nouveau fichier” à droite du nom du fichier.
- Nommez le nouveau fichier “app.js”
- Dans la commande console, tapez le code suivant:
var msg = 'Hello World' ;
console.log(msg) ;
- Enregistrez le fichier en appuyant sur “Ctrl +S” sur le clavier.
- Dans un terminal, tapez node app.js. La sortie dira “Hello, World”
Félicitations, vous avez écrit votre premier programme et vous êtes maintenant prêt à utiliser le débogueur de VSCode.
Run View
A partir de là, vous pourrez utiliser toutes les fonctions de débogage de VSCode. Lorsque vous commencerez, vous devrez vous familiariser avec toutes les informations que le débogueur met à votre disposition. Il comprend également une barre de tâches où vous pouvez configurer les paramètres et les commandes de débogage.
Pour accéder à Run View, procédez comme suit:
- Dans la barre latérale de VSCode, sélectionnez l’icône “Run”. Vous pouvez également y accéder rapidement en appuyant sur “Ctrl+Shift+D” sur votre clavier.
- Un menu apparaîtra avec trois options. Pour les besoins de ce guide, sélectionnez l’option “create a launch.js”.
Create a Launch.js Program
Un programme launch.js est appelé programme de configuration de lancement. Il enregistre automatiquement tous les nouveaux paramètres et les modifications de configuration que vous effectuez pendant le débogage. Cela vous fera gagner du temps si vous rencontrez le même bug que précédemment. Pensez-y comme à un preneur de notes pour votre codage.
Notez que vous aurez besoin de ce programme avant de pouvoir enfin exécuter le débogueur.
Voici comment faire:
- Dans le menu “Run view”, sélectionnez “create a launch.js.”
- VSCode sélectionnera automatiquement l’environnement de débogage, mais s’il ne détecte rien, sélectionnez “Node.js”.
- Retournez dans l’explorateur de fichiers en appuyant sur “Ctrl+Shift+E”.
- Vérifiez sous votre dossier “hello” Il devrait y avoir un onglet appelé “.vscode” et le fichier launch.json devrait se trouver dans cet onglet.
- Pour vérifier les attributs du débogueur, appuyez sur “Ctrl+Espace”.
Exécuter le débogueur
Maintenant que toute la préparation est faite, nous pouvons commencer notre session de débogage. Pour exécuter le débogueur, nous devons d’abord sélectionner notre configuration de lancement.
- Dans la vue Run de VSCode, trouvez la “Configuration dropdown”.
- Sélectionnez “Launch Program” Une fois que vous l’avez sélectionné, appuyez sur F5 pour démarrer le débogueur.
- Vous pouvez également accéder au menu du débogueur en accédant d’abord à la palette de commande en appuyant sur “Ctrl+Shift+P”
- Tapez “
.debug” et sélectionnez votre configuration.
Ajouter une nouvelle configuration
Avec des bugs particulièrement difficiles, il est possible que la base de données que vous avez sur VSCode n’ait pas la configuration dont vous avez besoin. Heureusement, vous pouvez ajouter de nouvelles configurations au débogueur.
- Dans le menu “Run”, sélectionnez “Add configuration”.
- Faites apparaître IntelliSense (Shift+Espace) pour faire apparaître le menu, puis sélectionnez “Add configuration”.”
- Dans le tableau de configuration d’IntelliSense, choisissez d’ajouter une autre configuration.
Configurations de lancement et d’attachement
VSCode a deux modes de débogage – “lancement” et “attachement” Chaque mode a ses propres avantages et inconvénients et chacun est adapté à un certain type de codeur. Voici un bref aperçu de la méthodologie de chaque mode.
Tout d’abord, parlons des configurations de “lancement”. Les configurations de lancement signifient que vous, le codeur, écrivez le code ou la “recette” pour votre session de débogage.
Les configurations “attachées”, d’autre part, impliquent que vous attachiez une configuration depuis l’extérieur de VSCode pendant que le programme dans VSCode est en cours d’exécution. Vous ne construisez pas quelque chose à partir de zéro, mais vous utilisez du code précédemment créé pour déboguer.
Auto Attach
Auto Attach est une fonctionnalité qui attachera automatiquement le débogueur Node à certains processus Node.js dans le terminal de VSCode. Pour activer l’attachement automatique, suivez ces étapes:
- Pour accéder à la palette de commande, appuyez sur “Ctrl+Shift+P” sur votre clavier.
- Lorsque le menu s’affiche, sélectionnez “Toggle Auto Attach” La barre d’attachement automatique devrait apparaître en haut.
- Après avoir activé l’attachement automatique, vous devrez redémarrer votre appareil.
- Vous pouvez également créer un nouveau terminal et l’attachement automatique sera toujours activé.
L’attachement automatique propose trois modes différents. Chaque mode a sa propre fonction, alors assurez-vous de choisir le bon. Voici les trois modes:
- “Smart” – Il s’agit de l’option par défaut. Lorsque vous exécutez un script qui n’est pas contenu dans votre dossier “node_modules”, le script sera automatiquement débogué.
- “Always” – Tout processus utilisant Node.js qui est lancé dans le terminal intégré sera débogué.
- “OnlyWithFlag” – Cette option ne déboguera que les processus marqués avec les drapeaux “- -inspect” ou “- -inspect-brk”.
Attacher au processus Node
Vous pouvez également attacher votre débogueur Node.js aux processus manuellement. Cela demande un peu plus de travail, mais cela vous fera gagner du temps si vous savez exactement quel processus pose problème. Pour attacher le débogueur à un processus Node.js, procédez comme suit:
- Ouvrez la palette de commande en appuyant sur “Ctrl+Shift+P” sur votre clavier.
- Sélectionnez “Attach to Node Process” dans le menu.
- A partir de là, vous verrez tous les processus qui peuvent être débogués par le débogueur Node.js. Sélectionnez le processus auquel vous souhaitez attacher le débogueur.
Terminal de débogage JavaScript
L’ajout d’un terminal de débogage JavaScript est rapide et sans douleur et constitue une excellente option si vous souhaitez effectuer des corrections de bogues générales ou générales. Tout d’abord, vous devez créer un terminal.
- Ouvrez la palette de commande en appuyant sur “Ctrl+Shift+P” sur votre clavier.
- Sélectionnez “Debug: Create JavaScript Debug Terminal” dans le menu.
- Vous pouvez également accéder à cette option en la choisissant dans le menu déroulant du terminal.
- Le débogueur s’attachera à votre processus actuel. Il s’exécutera automatiquement et corrigera tous les bogues du code qu’il détectera.
Configurer une configuration “Attach”
Cette option demande beaucoup plus de travail que celles décrites ci-dessus, mais elle vous permet de configurer les configurations de débogage en détail.
- Une configuration “attach” simple ressemblera généralement à ce lot de code
{
"name": "Attacher au processus",
"type": "node",
"request": "attach",
"port": 9229
}
- 9229 est le numéro de port par défaut pour les options “- -inspect” et “- – inspect-brk”. Pour changer le numéro de port, tapez ce qui suit: “
- - inspect =95430“
Remarque: ces numéros ne sont que des exemples. Utilisez le numéro de port qui vous convient. - Après avoir modifié le numéro de port, modifiez-le dans la configuration attachée que vous avez écrite.
Pour attacher le débogueur à un processus qui n’est pas actuellement dans le débogueur, procédez comme suit:
- Vous devrez spécifier quel processus en entrant l’ID dans une chaîne de code qui ressemble à ce qui suit:
{
"name": "Attacher au processus",
"type": "node",
"request": "attach",
"processId": "53426"
}
- Il est assez fastidieux de saisir manuellement chaque ID de processus. Heureusement, vous pouvez faire apparaître la liste complète en saisissant “
${command:PickProcess}” dans la partie “processId” de la chaîne.
Débogage multi-cibles
Il y aura des moments où il y aura des catastrophes de codage et votre code sera criblé de bogues et rien ne fonctionnera. Le débogage multi-cibles est supporté par VSCode et vous permet d’exécuter plusieurs débogueurs sur plusieurs processus. Pour démarrer le débogage multi-cibles, il suffit de lancer une autre session de débogage sans fermer la première.
Une fois que vous avez lancé le débogage multi-cibles, chaque session s’affiche comme un élément individuel en haut du menu “CALL STACKS”. Vous pouvez sélectionner la session que vous souhaitez activer.
La barre d’outils de débogage et toutes les actions de débogage seront effectuées sur le processus actif, donc assurez-vous que celui sur lequel vous souhaitez travailler est actif.
Arrêter le débogage
Vous êtes enfin arrivé à la fin et tous ces bugs embêtants ont été éliminés. Vous devez maintenant arrêter votre opération de débogage. Il est important de le faire pour vous assurer que votre travail est sauvegardé.
Configurations “Attach”
- Sélectionnez l’option “Debug: Stop” sur la barre d’outils de débogage ou après avoir ouvert la palette de commande en appuyant sur “Ctrl+Shift+P.”
- Après avoir cliqué sur stop, le débogueur Node.js se détachera et s’arrêtera. Cependant, le processus que vous avez saisi sera toujours en cours d’exécution.
- Pour arrêter les processus que vous exécutez, allez dans la barre des tâches et sélectionnez “Stop”.
Configurations “Launch”
- Après avoir sélectionné “Stop”, VSCode vous demandera d’arrêter en envoyant un signal SIGINT.
- Avant d’intercepter le signal, nettoyez tout et arrêtez.
- S’il n’y a pas de points d’arrêt (ou de problèmes) dans ce code d’arrêt, la session se terminera.
Les débogueurs démystifiés
L’outil débogueur de VSCode est très pratique à avoir à votre disposition. Cependant, il existe de nombreuses options et il peut être difficile de décider de la méthode à utiliser. Nous avons répertorié les méthodes de niveau novice et avancé pour utiliser le débogueur, afin que vous ayez la possibilité de déboguer comme vous le souhaitez.
Utilisez-vous le débogueur de VSCode ? Quelle est la meilleure méthode selon vous ? Faites-le nous savoir dans la section des commentaires ci-dessous.