Déboguer des projets JavaScript avec le code VS et le débogueur Chrome –

Déboguer JavaScript n'est pas l'aspect le plus amusant de la programmation JavaScript, mais c'est une compétence essentielle. Cet article couvre deux outils qui vous aideront à déboguer JavaScript comme un pro.

Imaginez un instant que la fonction console.log () n'existait pas dans JavaScript. Je suis sûr que la première question que vous vous poseriez serait "Comment vais-je jamais confirmer que mon code fonctionne correctement?"

La réponse réside dans l'utilisation d'outils de débogage. Pendant longtemps, la plupart des développeurs, y compris moi-même, utilisaient console.log pour déboguer du code cassé. C'est rapide et facile à utiliser. Cependant, les choses peuvent devenir difficiles à certains moments si vous ne savez pas où et ce qui cause le bug. Souvent, vous vous retrouvez en train de poser console.log des pièges partout dans votre code pour voir lequel révélera le coupable.

Pour y remédier, nous devons changer nos habitudes et commencer à utiliser les outils de débogage. Il existe un certain nombre d'outils disponibles pour le débogage du code JavaScript, tels que les Outils de développement Chrome, Node Debugger Node Inspect et autres. En fait, chaque navigateur principal fournit ses propres outils.

Dans cet article, nous verrons comment utiliser les fonctions de débogage fournies par Visual Studio Code. Nous verrons également comment utiliser l'extension Debugger for Chrome qui permet à VS Code de s'intégrer à Chrome Dev Tools. Une fois que nous aurons terminé, vous ne voudrez plus jamais utiliser console.log () à nouveau.

Pré-requis

Pour ce tutoriel, il suffit d'avoir une base solide dans JavaScript moderne . Nous verrons aussi comment nous pouvons déboguer un test écrit en utilisant Mocha et Chai . Nous allons utiliser un projet cassé, debug-example pour apprendre à corriger divers bogues sans utiliser un seul console.log . Vous devez suivre la procédure suivante:

Commencez par cloner le projet debug-example dans votre espace de travail. Ouvrez le projet dans VS Code et installez les dépendances via le terminal intégré:

 # Installer les dépendances de package
npm installer

# Installer les dépendances globales
npm install -g mocha

Nous sommes maintenant prêts à apprendre comment déboguer un projet JavaScript dans VS Code

Déboguer JavaScript dans VS Code

Le premier fichier que je voudrais que vous regardiez est src / places. js . Vous devrez ouvrir le dossier debug-project dans VS Code ( Fichier > Ouvrir le dossier ) et sélectionner le fichier dans l'éditeur.

 lieux de const = [];

module.exports = {
  des endroits,

  addPlace: (ville, pays) => {
    const id = ++ places.length;
    laissez numType = 'impair';
    if (id% 2) {
      numType = 'even';
    }
    places.push ({
      id, ville, pays, numType,
    });
  },
}

Le code est assez simple, et si vous avez suffisamment d'expérience dans le codage, vous remarquerez qu'il a quelques bugs. Si vous les remarquez, veuillez les ignorer. Sinon, parfait. Ajoutons quelques lignes en bas pour tester manuellement le code:

 module.exports.addPlace ('Mombasa', 'Kenya');
module.exports.addPlace ('Kingston', 'Jamaica');
module.exports.addPlace ('Cape Town', 'Afrique du Sud');

Maintenant, je suis sûr que vous êtes impatient de faire un console.log pour afficher la valeur de places . Mais ne faisons pas ça. Au lieu de cela, ajoutons points d'arrêt . Il suffit de les ajouter en faisant un clic gauche sur la gouttière – c'est-à-dire l'espace vide à côté des numéros de ligne:

Voir les points rouges sur le côté? Ce sont les points d'arrêt. Un point d'arrêt est simplement une indication visuelle indiquant à l'outil de débogage où suspendre l'exécution. Ensuite, sur la barre d'action, cliquez sur le bouton de débogage (l'icône qui dit "No Bugs Allowed").

Regardez la section supérieure. Vous remarquerez qu'il y a une icône d'engrenage avec un point rouge. Il suffit de cliquer dessus. Un fichier de configuration de débogage, launch.json sera créé pour vous. Mettez à jour la configuration comme ceci afin que vous puissiez exécuter le débogueur de VS Code sur places.js :

 "configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Launch Places",
    "program": "${workspaceFolder}\src\places.js"
  }
]

Note: Selon votre système d'exploitation, vous devrez peut-être remplacer la double barre oblique inverse ( \ ) par une seule barre oblique ( / ).

Après avoir enregistré le fichier, vous remarquerez que le panneau de débogage a une nouvelle liste déroulante, Launch Places . Pour l'exécuter, vous pouvez:

• appuyer sur le bouton Green Play du panneau de débogage
• appuyer sur F5
• cliquer sur Déboguer > Démarrer le débogage

Utilisez la méthode que vous voulez et observez le processus de débogage en action:

Un certain nombre de choses se succèdent rapidement lorsque vous cliquez sur le bouton de débogage. Tout d'abord, une barre d'outils apparaît en haut de l'éditeur. Il possède les contrôles suivants:

• Ancrage Drag Dots : pour déplacer la barre d'outils quelque part, il ne bloque rien
• Continuer : continuer la session de débogage
• Pas à pas : exécuter le code ligne par ligne, sauter les fonctions
• Entrer dans : exécuter le code ligne par ligne, entrer dans les fonctions
• Sortir : si déjà dedans une fonction, cette commande vous sortira
• Redémarrer : redémarre la session de débogage
• Stop : arrête la session de débogage.

En ce moment, vous remarquerez que la session de débogage a fait une pause sur votre premier point d'arrêt. Pour continuer la session, appuyez simplement sur le bouton Continuer ce qui entraînera l'exécution jusqu'à ce qu'il atteigne le deuxième point d'arrêt et une nouvelle pause. Frapper Continuer achèvera l'exécution et la session de débogage se terminera.

Commençons à nouveau le processus de débogage en appuyant sur F5 . Assurez-vous que les deux points d'arrêt sont toujours en place. Lorsque vous placez un point d'arrêt, le code s'arrête sur la ligne spécifiée. Il n'exécute pas cette ligne à moins que vous ne frappiez Continuer ( F5 ) ou Pas à pas ( F10 ). Avant de frapper quoi que ce soit, regardons les sections qui composent le panneau de débogage:

• Variables : affiche les variables locales et globales dans la portée actuelle (ie au point d'exécution)
• Regarder : vous pouvez ajouter manuellement les expressions des variables que vous voulez surveiller
• Call Stack : affiche une pile d'appel du code en surbrillance
• Breakpoints : affiche une liste de fichiers avec des points d'arrêt, ainsi que leurs numéros de ligne.

Pour ajouter une expression à la section Watch cliquez simplement sur le signe + et ajoutez une expression JavaScript valide – comme places.length . Lorsque le débogueur s'arrête, si votre expression est dans la portée, la valeur sera imprimée. Vous pouvez également passer la souris sur les variables qui sont actuellement dans la portée. Un popup apparaîtra affichant leurs valeurs.

Actuellement le tableau places est vide. Appuyez sur n'importe quel contrôle de navigation pour voir comment le débogage fonctionne. Par exemple, Pas à pas passera à la ligne suivante, tandis que Entrez dans pour accéder à la fonction addPlace . Prenez un peu de temps pour vous familiariser avec les commandes.

Dès que vous avez fait un pas, passez la souris sur la variable place . Une fenêtre apparaîtra. Développez les valeurs à l'intérieur jusqu'à ce que vous ayez une vue similaire:

Vous pouvez également inspecter toutes les variables incluses dans la section Variables .

C'est assez impressionnant comparé à ce que nous faisons normalement avec console.log . Le débogueur nous permet d'inspecter les variables à un niveau plus profond. Vous avez peut-être également remarqué quelques problèmes avec la sortie du tableau lieux :

1. il y a plusieurs espaces dans le tableau – emplacements [0] et emplacements [2] undefined
2. la propriété numType affiche même pour des valeurs impaires id . Pour l'instant, il suffit de mettre fin à la session de débogage . Nous allons les corriger dans la section suivante.

   Test de débogage avec Mocha

   Ouvrez test / placesTest.js et passez en revue le code qui a été écrit pour tester le code dans places.test . Si vous n'avez jamais utilisé Mocha auparavant, vous devez d'abord l'installer globalement afin d'exécuter les tests.

    # Installer mocha globalement
   npm install -g mocha
   
   # Exécuter des tests de moka
   moka
   

   Vous pouvez également exécuter npm test pour exécuter les tests. Vous devriez obtenir le résultat suivant:

   

   Tous les tests échouent. Pour découvrir le problème, nous allons exécuter les tests en mode débogage. Pour ce faire, nous avons besoin d'une nouvelle configuration. Accédez au panneau de débogage et cliquez sur la liste déroulante pour accéder à l'option Ajouter une configuration :

   

   Le fichier launch.json s'ouvre pour

   

   Sélectionnez simplement Tests de moka . La configuration suivante sera insérée pour vous:

    {
     "type": "noeud",
     "request": "lancement",
     "name": "Mocha Tests",
     "programme": "$ {workspaceFolder} / node_modules / mocha / bin / _mocha",
     "args": [
       "-u",
       "tdd",
       "--timeout",
       "999999",
       "--colors",
       "${workspaceFolder}/test"
     ],
     "internalConsoleOptions": "openOnSessionStart"
   },
   

   Les paramètres par défaut sont bien. Retournez à la liste déroulante et sélectionnez Mocha Tests . Vous devrez commenter les trois dernières lignes que vous avez ajoutées dans places.js ; sinon les tests ne seront pas exécutés comme prévu. Retournez à placesTest.js et ajoutez un point d'arrêt sur la ligne juste avant le premier échec du test. Cela devrait être la ligne sept, où il est dit:

    addPlace ('Nairobi', 'Kenya');
   

   Veillez à ajouter une expression places.length dans la section de surveillance. Cliquez sur le bouton Play pour démarrer la session de débogage

   

   Au début du test, places.length devrait être nul . Si vous cliquez sur Pas sur places.length lit 2, mais seulement une place a été ajoutée. Comment cela peut-il être?

   Redémarrez la session de débogage, et cette fois utilisez Entrez dans pour accéder à la fonction addPlace . Le débogueur vous dirigera vers places.js . La valeur de places.length est toujours zéro. Cliquer sur Passer au dessus de pour exécuter la ligne en cours

   

   Aha! La valeur de places.length vient d'être incrémentée de 1, mais nous n'avons rien ajouté au tableau. Le problème est dû à l'opérateur ++ qui est en train de muter la longueur du tableau. Pour résoudre ce problème, remplacez simplement la ligne par:

    const id = places.length + 1;
   

   De cette façon, nous pouvons obtenir la valeur de id sans changer la valeur de places.length . Alors que nous sommes toujours en mode débogage, essayons de résoudre un autre problème où la propriété numType reçoit la valeur même alors que id est 1. Le problème semble être l'expression du module à l'intérieur de l'instruction if:

   

   Faisons une expérience rapide en utilisant la console de débogage. Commencez à taper une expression correcte pour l'instruction if :

   

   La console de débogage est similaire à la console du navigateur. Il vous permet d'effectuer des expériences en utilisant des variables qui sont actuellement dans la portée. En essayant quelques idées dans la console, vous pouvez facilement trouver la solution sans jamais quitter l'éditeur. Nous allons maintenant corriger l'instruction failing:

    if (id% 2 === 0) {
     numType = 'even';
   }
   

   Redémarrez la session de débogage et appuyez sur . Continuer pour ignorer le point d'arrêt actuel. Le premier test, "peut ajouter une place", passe maintenant. Mais le deuxième test ne l'est pas. Pour résoudre ce problème, nous avons besoin d'un autre point d'arrêt. Enlevez l'actuel et placez un nouveau point d'arrêt sur la ligne 16, où il est écrit:

    addPlace ('Cape Town', 'South Africa');
   

   Démarrer une nouvelle session de débogage:

   

   Là! Regardez la section Variables . Même avant le début du deuxième test, nous découvrons que le tableau contient déjà des données existantes créées par le premier test. Cela a évidemment pollué notre test actuel. Pour résoudre ce problème, nous devons implémenter une sorte de setup fonction qui réinitialise le tableau pour chaque test. Pour faire cela dans Mocha, ajoutez juste le code suivant avant les tests:

    beforeEach (() => {
     places.length = 0;
   });
   

   Redémarrez le débogueur et laissez-le marquer une pause sur le point d'arrêt. Le tableau a maintenant un état propre. Cela devrait permettre à notre test de fonctionner sans être pollué. Il suffit de cliquer sur Continuer pour laisser s'exécuter le reste du code de test

   

   Tous les tests sont en cours. Vous devriez vous sentir assez impressionnant, puisque vous avez appris à déboguer du code sans écrire une seule ligne de console.log . Voyons maintenant comment déboguer le code côté client à l'aide du navigateur.

   Déboguer JavaScript avec Chrome Debugger

   Maintenant que vous connaissez les bases du débogage de JavaScript dans VS Code, nous allons voir comment déboguer un projet un peu plus complexe en utilisant l'extension Debugger for Chrome . Ouvrez simplement le panneau du marché via la barre d'action. Recherchez l'extension et installez-la

   

   Après l'installation, appuyez sur recharger pour activer l'extension. Examinons rapidement le code que nous allons déboguer. L'application Web est principalement un projet JavaScript côté client qui est lancé en exécutant un serveur Express:

    const express = require ('express');
   
   const app = express ();
   port const = 3000;
   
   // Définir le dossier public en tant que root
   app.use (express.static ('public'));
   
   // Fournit l'accès au dossier node_modules
   app.use ('/ scripts', express.static (`$ {__ dirname} / node_modules /`));
   
   // Redirige tout le trafic vers index.html
   app.use ((req, res) => res.sendFile (`$ {__ dirname} / public / index.html`));
   
   app.listen (port, () => {
     console.info ('écouter sur% d', port);
   });
   

   Tout le code côté client se trouve dans le dossier public . Les dépendances du projet incluent Semantic-UI-CSS, jQuery, Vanilla Router, Axios et Handlebars. Voici à quoi ressemble le projet lorsque vous l'exécutez avec npm start . Vous devrez ouvrir l'URL localhost: 3000 dans votre navigateur pour voir l'application.

   

   Essayez d'ajouter un nouveau lieu. Quand vous le faites, vous verrez que rien ne semble se passer. Il est clair que quelque chose ne va pas, alors il est temps de regarder sous le capot. Nous allons d'abord examiner le code avant de commencer notre session de débogage. Ouvrez public / index.html . Notre objectif est actuellement cette section: