Apprenez les étapes pour développer et déboguer votre projet JavaScript Node.js avec Visual Studio Code.
Préparez votre environnement
- Installez Visual Studio Code.
- Installez git. Visual Studio Code s’intègre à git pour fournir une gestion du contrôle de source dans la barre latérale.
- Ajoutez les variables d’environnement nécessaires. Les exemples de cet article utilisent une chaîne de connexion à une base de données mongoDB.
Si vous n’avez pas de base de données mongoDB disponible, vous pouvez :- Choisissez d’exécuter ce projet local dans une configuration multi-conteneur où l’un des conteneurs est une base de données mongoDB. Installez Docker et l’extension Remote – Containers pour obtenir une configuration multi-conteneur avec l’un des conteneurs exécutant une base de données mongoDB locale.
- Choisissez de créer une ressource Azure Cosmos DB pour une base de données MongoDB. Apprenez-en plus avec ce tutoriel.
Clonez le projet
Pour commencer, clonez le projet d’exemple en suivant ces étapes :
- Ouvrez Visual Studio Code.
- Appuyez sur F1 pour afficher la palette de commandes.
- Dans la fenêtre de saisie de la palette de commandes, entrez gitcl, sélectionnez la commande “Git: Clone” et appuyez sur Entrée.
- Lorsque vous êtes invité à saisir l’URL du référentiel, entrez https://github.com/Azure-Samples/js-e2e-express-mongodb, puis appuyez sur Entrée.
- Sélectionnez (ou créez) le répertoire local dans lequel vous souhaitez cloner le projet.
Installez les dépendances
Avec ce projet Node.js, vous devez d’abord vous assurer que toutes les dépendances du projet sont installées à partir de npm.
- Appuyez sur Ctrl + Shift + ` pour afficher le terminal intégré de Visual Studio Code.
- Utilisez la commande suivante pour installer les dépendances :
npm install
Parcourez les fichiers et le code du projet
Afin de vous orienter dans le code, jouons avec quelques exemples des fonctionnalités de navigation fournies par Visual Studio Code.
- Appuyez sur Ctrl + p.
- Saisissez .js pour afficher tous les fichiers JavaScript/JSON du projet ainsi que le répertoire parent de chaque fichier.
- Sélectionnez server.js, qui est le script de démarrage de l’application.
- Passez votre souris sur le marqueur de temps à la ligne 11. Cette capacité à inspecter rapidement les variables, les modules et les types dans un fichier est utile pendant le développement de vos projets.
- En cliquant sur une variable – comme le marqueur de temps – vous pouvez voir toutes les références à cette variable dans le même fichier. Pour afficher toutes les références à une variable dans le projet, cliquez avec le bouton droit de la souris sur la variable, puis dans le menu contextuel, sélectionnez “Find All References”.
Utilisez l’autocomplétion de Visual Studio Code avec mongoDB
- Ouvrez le fichier data.js.
- À la ligne 84, entrez une nouvelle utilisation de la variable db en saisissant db.. Visual Studio Code affiche les membres de l’API disponibles sur db.
L’autocomplétion fonctionne parce que Visual Studio Code utilise TypeScript en arrière-plan – même pour JavaScript – pour fournir des informations de type qui peuvent ensuite être utilisées pour informer la liste de complétion au fur et à mesure de la saisie. Cette acquisition automatique de typings fonctionne pour plus de 2 000 modules tiers, tels que React, Underscore et Express.
Vous pouvez voir quels modules prennent en charge cette fonctionnalité d’autocomplétion en parcourant le projet DefinitelyTyped, qui est la source communautaire de toutes les définitions de types TypeScript.
Exécutez l’application Node.js locale
Une fois que vous avez exploré le code, il est temps d’exécuter l’application. Pour exécuter l’application depuis Visual Studio Code, appuyez sur F5. Lorsque vous exécutez le code via F5 (mode de débogage), Visual Studio Code lance l’application et affiche la fenêtre “Console de débogage” qui affiche stdout pour l’application.
De plus, la “Console de débogage” est attachée à l’application nouvellement lancée, vous pouvez donc taper des expressions JavaScript, qui seront évaluées dans l’application, et elle inclut également l’autocomplétion. Pour voir ce comportement, tapez process.env dans la console.
Ouvrez un navigateur et accédez à http://localhost:8080 pour voir l’application en cours d’exécution. Saisissez du texte dans la zone de texte pour ajouter un élément et vous familiariser avec le fonctionnement de l’application.
Déboguez l’application Node.js locale
En plus de pouvoir exécuter l’application et interagir avec elle via la console intégrée, vous pouvez définir des points d’arrêt directement dans votre code. Par exemple, appuyez sur Ctrl + P pour afficher l’explorateur de fichiers. Une fois que l’explorateur de fichiers s’affiche, sélectionnez le fichier server.js.
Définissez un point d’arrêt à la ligne 53, qui correspond à l’instruction if dans la route pour ajouter un nouvel élément. Pour définir un point d’arrêt, cliquez simplement dans la zone à gauche du numéro de ligne dans l’éditeur, comme indiqué dans la figure suivante.
Une fois que le point d’arrêt a été défini, revenez à l’application en cours d’exécution dans un navigateur et ajoutez une entrée. Cette action provoque immédiatement la suspension de l’exécution de l’application à la ligne 28 où vous avez défini le point d’arrêt.
Une fois que l’application est en pause, vous pouvez passer votre souris sur les expressions du code pour afficher leur valeur actuelle, inspecter les variables locales/observées et la pile d’appels, et utiliser la barre d’outils de débogage pour parcourir l’exécution du code. Appuyez sur F5 pour reprendre l’exécution de l’application.
Débogage local de bout en bout dans Visual Studio Code
Le front-end et le back-end sont tous deux écrits en JavaScript. Ainsi, alors que vous déboguez actuellement le code back-end (Node/Express), à un moment donné, vous devrez peut-être déboguer le code front-end (Angular).
Alors que vous avez pu exécuter et déboguer le code Node.js sans aucune configuration spécifique à Visual Studio Code, pour déboguer une application web front-end, vous devez utiliser un fichier launch.json qui indique à Visual Studio Code comment exécuter l’application.
Cette application d’exemple comprend un launch.json qui inclut ces paramètres de débogage :
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Test”,
“request”: “launch”,
“runtimeArgs”: [ “run-script”, “test” ],
“runtimeExecutable”: “npm”,
“skipFiles”: [ “<node_internals>/**” ],
“type”: “pwa-node”
},
{
“name”: “Start”,
“request”: “launch”,
“runtimeArgs”: [ “run-script”, “start” ],
“runtimeExecutable”: “npm”,
“skipFiles”: [ “<node_internals>/**” ],
“type”: “pwa-node”
}
]
}Visual Studio Code a pu détecter que le script de démarrage de l’application est server.js.
Avec le fichier launch.json ouvert, sélectionnez “Add Configuration” (en bas à droite), puis sélectionnez “Chrome: Launch with userDataDir”.
L’ajout d’une nouvelle configuration d’exécution pour Chrome vous permet de déboguer le code JavaScript front-end.
Vous pouvez placer votre souris sur l’un des paramètres spécifiés pour afficher la documentation sur ce que fait le paramètre. De plus, notez que Visual Studio Code détecte automatiquement l’URL de l’application. Mettez à jour la propriété “webRoot” en ${workspaceRoot}/public pour que le débogueur Chrome sache où trouver les ressources front-end de l’application :
{ “type”: “chrome”, “request”: “launch”, “name”: “Launch Chrome”, “url”: “http://localhost:8080”, “webRoot”: “${workspaceRoot}/public”, “userDataDir”: “${workspaceRoot}/.vscode/chrome” }Pour lancer et déboguer à la fois le front-end et le back-end en même temps, vous devez créer une configuration d’exécution composée, qui indique à Visual Studio Code quel ensemble de configurations exécuter en parallèle.
Ajoutez le snippet suivant en tant que propriété de premier niveau dans le fichier launch.json (en tant que frère de la propriété existante “configurations”) :
“compounds”: [
{ “name”: “Full-Stack”, “configurations”: [“Launch Program”, “Launch Chrome”] }
]Les valeurs de chaîne spécifiées dans le tableau “compounds.configurations” font référence au “name” des entrées individuelles de la liste “configurations”. Si vous avez modifié ces noms, vous devrez apporter les modifications appropriées dans le tableau. Par exemple, passez à l’onglet de débogage, changez la configuration sélectionnée en “Full-Stack” (le nom de la configuration composée) et appuyez sur F5 pour l’exécuter.
L’exécution de la configuration lance l’application Node.js (comme on peut le voir dans la sortie de la console de débogage) et Chrome (configuré pour naviguer vers l’application Node.js à http://localhost:8080).
Appuyez sur Ctrl + P, puis entrez (ou sélectionnez) todos.js, qui est le contrôleur principal d’Angular pour le front-end de l’application.
Définissez un point d’arrêt à la ligne 11, qui correspond au point d’entrée pour la création d’une nouvelle tâche à faire.
Retournez à l’application en cours d’exécution, ajoutez une nouvelle tâche à faire et remarquez que Visual Studio Code a maintenant suspendu l’exécution dans le code Angular.
Comme pour le débogage de Node.js, vous pouvez placer votre souris sur les expressions, afficher les variables locales/observées, évaluer les expressions dans la console, etc.
Voici deux choses sympas à noter :
- Le volet “Call Stack” affiche deux piles différentes : Node et Chrome, et indique laquelle est actuellement en pause.
- Vous pouvez passer du code front-end au code back-end : appuyez sur F5, ce qui exécutera et atteindra le point d’arrêt précédemment défini dans la route Express.
Avec cette configuration, vous pouvez désormais déboguer efficacement du code JavaScript front-end, back-end ou full-stack directement dans Visual Studio Code.
De plus, le concept de débogage composé n’est pas limité à seulement deux processus cibles, et n’est pas non plus limité à JavaScript. Par conséquent, si vous travaillez sur une application micro-service (potentiellement polyglotte), vous pouvez utiliser le même flux de travail (une fois que vous avez installé les extensions appropriées pour le langage/framework).
