Explication détaillée du débogage des points d'arrêt à l'aide de Visual Studio Code pour Node.js

Cet article présente principalement l'explication détaillée de l'utilisation de Visual Studio Code pour déboguer les points d'arrêt Node.js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Pendant le processus de développement, il est presque impossible de le faire. écrivez un programme impeccable en une seule fois, et le débogage du code avec des points d'arrêt est une exigence courante.

En tant qu'ingénieur de développement front-end, les programmes JavaScript que nous avons développés dans le passé étaient tous exécutés côté navigateur. Nous pouvons utiliser les outils de développement fournis par Chrome pour déboguer facilement les points d'arrêt du code source. Il y a quatre étapes. Les détails ne sont pas affichés. Un résumé approximatif est le suivant :

• Ouvrez les outils de développement Chrome

• Cliquez pour ; entrez dans l'onglet Sources. Vous pouvez voir le répertoire du code JS sur le côté gauche de la page

• Trouvez le fichier source dans lequel vous devez définir un point d'arrêt et cliquez avec le bouton gauche de la souris ; à gauche de la ligne de code qui doit être interrompue. Vous pouvez définir des points d'arrêt. Si votre code a été mutilé, vous devez importer la carte source correspondante pour mapper le code source.

• Actualisez la page (si l'emplacement où le point d'arrêt est défini est une fonction de traitement d'événement, déclenchez simplement l'événement directement), lorsque le code s'exécute jusqu'au point d'arrêt, le programme se bloque, à ce stade, vous pouvez utiliser le survol de la souris pour afficher les valeurs actuelles de chaque variable et l'utiliser pour déterminer si le programme fonctionne normalement.

Cependant, lorsque nous utilisons JavaScript pour développer des programmes Node.js qui s'exécutent sur le serveur, les outils de développement Chrome sont temporairement inutiles. Bien qu'il existe des moyens de déboguer sur Chrome, ce n'est pas le cadre de notre discussion aujourd'hui.

De plus, le camarade de classe qui a dit d'utiliser console.log, s'il vous plaît, ne dites rien pour l'instant...

En fait, de nombreux IDE ont intégré des fonctions de débogage, y compris les versions plus récentes prises en charge par WebStorm. Débogage Node.js très bien.

Cependant, de nombreux développeurs estiment que l'IDE est trop lourd. Existe-t-il des outils plus légers pour implémenter le débogage des points d'arrêt ? Aujourd'hui, je vais vous montrer comment effectuer le débogage des points d'arrêt sur VScode.

En plus de la prise en charge prête à l'emploi de JavaScript et de TypeScript, VScode prend également en charge le débogage Node.js. Il est simplement conçu pour les ingénieurs front-end, n'est-ce pas. .

La condition préalable au débogage de Node.js est que l'environnement Node.js ait été installé sur votre ordinateur.

Quoi ? Comment installer Node.js ? Voici un petit conseil : ouvrez Baidu et recherchez [Installer Node.js].

Cet article prend comme exemple le débogage de l'application express et suppose que vous avez installé l'environnement d'exécution Node.js.

Créer une application express

Nous utilisons express-generator pour créer une nouvelle application express.

1. Installez express-generator globalement

a. Ouvrez le terminal et entrez :

npm install express-generator -g

Lors de l'installation globale pour les utilisateurs de MacBook, n'oubliez pas d'ajouter sudo

b devant. Une fois l'installation terminée, saisissez

express -v

dans le terminal. si vous voyez ce qui suit Les informations affichées dans l'image indiquent que l'installation a réussi.

2. Générez le répertoire de l'application express, en supposant que le nom de cette application est myapp

Entrez

dans le terminal

express myapp

Un répertoire myapp est généré dans le répertoire courant La structure des répertoires est la suivante :

Comme vous pouvez. voyez, cette petite application a ses organes internes. Elle est tout-en-un, y compris la configuration du serveur Node, le dossier de ressources publiques, le dossier maître-disciple et la configuration du routage.

3. Exécutez l'application express

a. Entrez la commande dans le terminal

cd myapp && npm install

pour entrer dans le répertoire du projet et tout installer En fonction de l'installation, cette étape peut prendre beaucoup de temps, alors soyez patient et attendez la fin de l'installation.

b. Entrez ensuite la commande

npm start

pour démarrer l'application.

À ce moment-là, lorsque nous visitons localhost:3000 dans le navigateur, nous pouvons voir la page suivante :

Cela montre que l'application express peut s'exécuter normalement. Ensuite, nous pouvons utiliser VScode pour déboguer le code.

Astuce : Afin d'éviter les conflits de ports lors du débogage, nous retournons d'abord au terminal où l'application express venait de s'exécuter, et ctrl+c pour fermer l'application express en cours d'exécution.

Application express de débogage

1. Entrez dans l'interface VScode, cliquez sur le quatrième bouton en forme de bug sur le côté gauche de l'interface pour accéder à l'interface de débogage :

2. Cliquez sur le menu déroulant « Aucune configuration » en haut de la page et sélectionnez « Ajouter une configuration ».

3. Sélectionnez l'environnement Node.js.

4. Une fois la sélection terminée, un répertoire .vscode sera généré dans le répertoire racine du projet. Ce répertoire stocke diverses configurations de l'éditeur VScode. Ce répertoire contient désormais un fichier de configuration nommé lanuch.json. Le contenu du fichier de configuration est le suivant :

L'élément de configuration le plus important est le champ "Programme", celui-ci. Le champ définit le point d'entrée de l'ensemble de l'application. Lorsque le débogueur est activé, l'application sera démarrée à partir de ce point d'entrée.

Nous avons constaté que ce champ a déjà une valeur, pas de panique, c'est parce que lorsque VScode initialisera ce fichier de configuration, il vérifiera s'il existe des scripts avec le nom de clé start dans package.json. Si tel est le cas, le contenu de la configuration de démarrage sera utilisé comme valeur du champ « programme ».

5. Cliquez sur le bouton Démarrer le débogage (triangle vert) pour démarrer le débogage. À ce stade, un panneau de contrôle de débogage apparaîtra en haut de l'interface et une console de débogage apparaîtra en bas à droite de la page, où vous pourrez visualiser les informations que vous avez générées. Une barre d'état apparaîtra en bas de la page. interface. La couleur orange actuelle indique que l'application fonctionne normalement, comme suit Comme le montre l'image :

6. Lorsque nous visitons à nouveau localhost:3000 pendant la navigation, nous constatera que la page peut être ouverte et que l'application a démarré normalement.

7. Ensuite, nous commençons à définir des points d'arrêt pour l'application. Nous ouvrons le fichier myapp/routes/index.js. Ce fichier configure le routage du chemin racine de l'application. Le traitement en cours consiste à renvoyer une page et à passer la chaîne "Express" en paramètre de la vue.

8. Nous utilisons la souris pour faire un clic gauche sur le côté gauche de la ligne numéro 6 pour définir un point d'arrêt. Notez que vous devez désactiver le débogage avant d'ajouter des points d'arrêt. Pour le désactiver, cliquez sur le bouton Arrêter (carré rouge) dans le panneau de configuration de débogage au-dessus de l'interface.

9. Après avoir défini le point d'arrêt, redémarrez le débogage, puis accédez à localhost:3000 dans le navigateur. À ce moment, la forme du point d'arrêt change et le programme reste à. Au point d'arrêt, les boutons du panneau de commande de débogage ont également changé, de gauche à droite : saut en une seule étape, débogage en une seule étape, sortie en une seule étape, redémarrage et arrêt du débogage. Ce sont des instructions courantes de débogage des points d’arrêt. Après avoir défini le point d'arrêt, redémarrez le débogage, puis accédez à localhost:3000 dans le navigateur. À ce stade, la forme du point d'arrêt change, le programme reste au point d'arrêt et les boutons du panneau de configuration de débogage changent également, de gauche à. Sur la droite se trouvent le saut en une seule étape, le débogage en une seule étape, la sortie en une seule étape, le redémarrage et l'arrêt du débogage. Ce sont des instructions courantes de débogage des points d’arrêt.

10. Sur le côté gauche de l'interface, vous pouvez visualiser le contexte actuel et définir la surveillance des variables.

11. Placez la souris sur la variable ou le paramètre avant le point d'arrêt, et vous pouvez également afficher la valeur actuelle de la variable L'expérience est cohérente avec le débogage de Chrome. outils de développement.

Eh bien, commençons le voyage de débogage Node.js avec VScode ! !

Cet étudiant de console.log, vous pouvez parler maintenant...

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!