Déboguer JavaScript

Kayce Basques

Sofia Emelianova

Ce tutoriel vous explique le workflow de base permettant de déboguer les problèmes JavaScript dans les outils de développement. Lisez la suite ou regardez la version vidéo de ce tutoriel.

Reproduisez le bug.

La première étape du débogage consiste toujours à identifier une série d'actions permettant de reproduire un bug de manière cohérente.

1. Ouvrez cette démonstration dans un nouvel onglet.
2. Saisissez 5 dans le champ Numéro 1.
3. Saisissez 1 dans le champ Numéro 2.
4. Cliquez sur Ajouter les numéros 1 et 2. Le libellé situé sous le bouton indique 5 + 1 = 51. Le résultat doit être 6. C'est le bug que vous allez corriger.

Dans cet exemple, le résultat de 5 + 1 est 51. Elle devrait être de 6.

Se familiariser avec l'interface utilisateur du panneau "Sources"

Les outils de développement fournissent de nombreux outils différents pour différentes tâches, telles que la modification du CSS, le profilage des performances de chargement des pages et la surveillance des requêtes réseau. Le panneau Sources vous permet de déboguer JavaScript.

1. Ouvrez les outils de développement et accédez au panneau Sources.

   

Le panneau Sources comporte trois sections:

1. Onglet Page avec l'arborescence de fichiers Tous les fichiers demandés par la page sont listés ici.
2. La section Éditeur de code. Une fois que vous avez sélectionné un fichier dans l'onglet Page, son contenu s'affiche ici.

3. Section Debugger (Débogueur) Différents outils permettant d'inspecter le code JavaScript de la page.

   Si la fenêtre "Outils de développement" est large, l'outil Debugger (Débogueur) se trouve par défaut à droite de l'éditeur de code. Dans ce cas, les onglets Champ d'application et Regarder associent Points d'arrêt, Pile d'appel et d'autres en tant que sections réductibles.

Suspendre le code avec un point d'arrêt

Une méthode courante pour déboguer ce type de problème consiste à insérer de nombreuses instructions console.log() dans le code afin d'inspecter les valeurs lors de l'exécution du script. Exemple :

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

La méthode console.log() permet peut-être d'exécuter la tâche, mais les points d'arrêt permettent de l'accomplir plus rapidement. Un point d'arrêt vous permet de suspendre votre code au milieu de son exécution et d'examiner toutes les valeurs à ce moment-là. Les points d'arrêt présentent plusieurs avantages par rapport à la méthode console.log():

• Avec console.log(), vous devez ouvrir manuellement le code source, rechercher le code approprié, insérer les instructions console.log(), puis actualiser la page afin d'afficher les messages dans la console. Avec les points d'arrêt, vous pouvez vous arrêter sur le code approprié sans même savoir comment il est structuré.
• Dans vos instructions console.log(), vous devez spécifier explicitement chaque valeur que vous souhaitez inspecter. Avec les points d'arrêt, les outils de développement vous indiquent les valeurs de toutes les variables à ce moment précis. Parfois, vous n'êtes pas au courant de certaines variables affectant votre code.

En résumé, les points d'arrêt peuvent vous aider à trouver et à corriger les bugs plus rapidement que la méthode console.log().

Si vous prenez du recul et réfléchissez au fonctionnement de l'application, vous pouvez deviner que la somme incorrecte (5 + 1 = 51) est calculée dans l'écouteur d'événements click associé au bouton Add Number 1 and Number 2 (Ajouter les numéros 1 et 2). Par conséquent, vous souhaiterez probablement suspendre le code au moment où l'écouteur click s'exécute. C'est exactement ce que vous permettent de faire les points d'arrêt de l'écouteur d'événements:

1. Dans la section Debugger (Débogueur), cliquez sur Event Listener Breakpoints (Points d'arrêt de l'écouteur d'événements) pour développer la section. Les outils de développement affichent une liste de catégories d'événements que vous pouvez développer, telles que Animation et Clipboard.
2. À côté de la catégorie d'événement Souris, cliquez sur arrow_right Développer. Les outils de développement affichent une liste d'événements de souris, comme click et mousedown. Une case à cocher est associée à chaque événement.

3. Cochez la case Cliquer. Les outils de développement sont désormais configurés pour se mettre en pause automatiquement lorsqu'n'importe quel écouteur d'événement click s'exécute.

   

4. De retour dans la démo, cliquez à nouveau sur Add Number 1 and Number 2 (Ajouter les numéros 1 et 2). Les outils de développement mettent en pause la démonstration et mettent en surbrillance une ligne de code dans le panneau Sources. Les outils de développement doivent être suspendus sur cette ligne de code:

   function onClick() {
   

   Si vous avez interrompu l'exécution avec une autre ligne de code, appuyez sur reprendre Reprendre l'exécution du script jusqu'à ce que la pause se trouve à la ligne appropriée.

Les points d'arrêt de l'écouteur d'événements ne sont qu'un des nombreux types de points d'arrêt disponibles dans les outils de développement. Il est utile d'examiner tous les différents types, car chacun d'eux vous aide au final à déboguer différents scénarios le plus rapidement possible. Consultez la page Suspendre votre code avec des points d'arrêt pour savoir quand et comment utiliser chaque type.

Parcourir le code

L'exécution d'un script dans le mauvais ordre est l'une des causes les plus courantes de bugs. En parcourant votre code, vous pouvez parcourir son exécution ligne par ligne et déterminer exactement où il s'exécute dans un ordre différent de celui attendu. Essayez maintenant :

1. Dans le panneau Sources des outils de développement, cliquez sur step_into Passer à l'appel de fonction suivant pour exécuter la fonction onClick(), ligne par ligne. Les outils de développement mettent en évidence la ligne de code suivante:

   if (inputsAreEmpty()) {
   

2. Cliquez sur step_over Passer l'appel de fonction suivant.

   Les outils de développement exécutent inputsAreEmpty() sans intervenir. Notez que les outils de développement ignorent certaines lignes de code. En effet, inputsAreEmpty() a la valeur "false". Par conséquent, le bloc de code de l'instruction if ne s'est pas exécuté.

C'est l'idée de base de l'exécution du code. Si vous examinez le code dans get-started.js, vous pouvez constater que le bug se situe probablement quelque part dans la fonction updateLabel(). Plutôt que de parcourir chaque ligne de code, vous pouvez utiliser un autre type de point d'arrêt pour suspendre le code au plus près de l'emplacement probable du bug.

Définir un point d'arrêt de ligne de code

Les points d'arrêt en ligne de code constituent le type de point d'arrêt le plus courant. Lorsque vous souhaitez suspendre une ligne de code spécifique, utilisez un point d'arrêt de ligne de code:

1. Examinez la dernière ligne de code de updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. À gauche du code, vous pouvez voir le numéro de cette ligne particulière, à savoir 32. Cliquez sur 32. Les outils de développement place une icône bleue sur 32. Cela signifie qu'il y a un point d'arrêt de ligne de code sur cette ligne. Les outils de développement s'interrompent désormais toujours avant l'exécution de cette ligne de code.

3. Cliquez sur Reprendre Reprendre l'exécution du script. Le script continue de s'exécuter jusqu'à ce qu'il atteigne la ligne 32. Aux lignes 29, 30 et 31, les outils de développement affichent les valeurs de addend1, addend2 et sum à côté de leurs déclarations.

Dans cet exemple, les outils de développement font une pause au niveau du point d'arrêt de la ligne de code à la ligne 32.

Vérifier les valeurs des variables

Les valeurs de addend1, addend2 et sum semblent suspectes. Ils sont encapsulés entre guillemets, ce qui signifie qu'ils sont des chaînes de caractères. Il s'agit d'une bonne hypothèse qui permet d'expliquer la cause du bug. Il est maintenant temps de recueillir plus d'informations. Les outils de développement fournissent de nombreux outils pour examiner les valeurs de variable.

Méthode 1: Inspecter le champ d'application

Lorsque vous faites une pause sur une ligne de code, l'onglet Scope (Champ d'application) indique les variables locales et globales définies à ce stade de l'exécution, ainsi que la valeur de chaque variable. Il affiche également les variables de fermeture, le cas échéant. Lorsque vous n'êtes pas en veille sur une ligne de code, l'onglet Portée est vide.

Double-cliquez sur une valeur de variable pour la modifier.

Méthode 2: Expressions de contrôle

L'onglet Regarder vous permet de surveiller les valeurs des variables au fil du temps. Watch ne se limite pas aux variables. Vous pouvez stocker n'importe quelle expression JavaScript valide dans l'onglet Regarder.

Essayez maintenant :

1. Cliquez sur l'onglet Regarder.
2. Cliquez sur ajouter Ajouter une expression de contrôle.
3. Tapez typeof sum.
4. Appuyez sur Entrée. Les outils de développement affichent typeof sum: "string". La valeur à droite des deux-points est le résultat de votre expression.

Cette capture d'écran montre l'onglet Watch (Regarder) (en bas à droite) après la création de l'expression de contrôle typeof sum.

Sans surprise, sum est considéré comme une chaîne, alors qu'il devrait s'agir d'un nombre. Vous avez maintenant confirmé qu'il s'agit de la cause du bug.

Méthode 3: Console

En plus d'afficher les messages console.log(), vous pouvez également utiliser la console pour évaluer des instructions JavaScript arbitraires. En termes de débogage, vous pouvez utiliser la console pour tester les corrections potentielles à apporter à des bugs. Essayez maintenant :

1. Si le panneau de la console n'est pas ouvert, appuyez sur Échap pour l'ouvrir. Elle s'ouvre en bas de la fenêtre "Outils de développement".
2. Dans la console, saisissez parseInt(addend1) + parseInt(addend2). Cette instruction fonctionne, car vous êtes en pause sur une ligne de code dans laquelle addend1 et addend2 font partie du champ d'application.
3. Appuyez sur Entrée. Les outils de développement évaluent l'instruction et affichent 6, qui est le résultat que la démonstration devrait produire.

Cette capture d'écran montre le panneau Console après l'évaluation de parseInt(addend1) + parseInt(addend2).

Appliquer une correction

Vous avez trouvé un correctif pour ce bug. Il ne vous reste plus qu'à tester le correctif en modifiant le code et en exécutant à nouveau la démonstration. Vous n'avez pas besoin de quitter les outils de développement pour appliquer le correctif. Vous pouvez modifier le code JavaScript directement dans l'interface des outils de développement. Essayez maintenant :

1. Cliquez sur Reprendre Reprendre l'exécution du script.
2. Dans l'éditeur de code, remplacez la ligne 31, var sum = addend1 + addend2, par var sum = parseInt(addend1) + parseInt(addend2).
3. Appuyez sur Commande+S (Mac) ou Ctrl+S (Windows, Linux) pour enregistrer vos modifications.
4. Cliquez sur label_off Désactiver les points d'arrêt. Sa couleur passe au bleu pour indiquer qu'il est actif. Tant que cette valeur est définie, les outils de développement ignorent les points d'arrêt que vous avez définis.
5. Essayez la démo avec différentes valeurs. Le calcul est maintenant effectué correctement.

Étapes suivantes

Ce tutoriel ne vous a montré que deux façons de définir des points d'arrêt. Les outils de développement offrent de nombreuses autres méthodes, y compris:

• Des points d'arrêt conditionnels qui ne sont déclenchés que lorsque la condition que vous fournissez est vraie.
• Points d'arrêt sur les exceptions interceptées ou non interceptées
• Points d'arrêt XHR déclenchés lorsque l'URL demandée correspond à une sous-chaîne que vous fournissez.

Consultez Suspendre votre code avec des points d'arrêt pour savoir quand et comment utiliser chaque type.

Quelques commandes d'exécution du code n'ont pas été expliquées dans ce tutoriel. Pour en savoir plus, consultez la section Passer à la ligne de code.