Déboguer JavaScript

Kayce Basques

Sofia Emelianova

Ce tutoriel vous présente le workflow de base pour déboguer tout problème JavaScript dans DevTools. Poursuivez la lecture ou regardez la version vidéo de ce tutoriel.

Reproduire le bug

Trouver une série d'actions qui reproduit systématiquement un bug est toujours la première étape du débogage.

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

Dans cet exemple, le résultat de 5 + 1 est 51. Il 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 code 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 des fichiers. Tous les fichiers demandés par la page sont répertoriés ici.
2. Section Éditeur de code. Une fois que vous avez sélectionné un fichier dans l'onglet Page, son contenu s'affiche ici.

3. La section Debugger (Débogueur). Divers outils permettant d'inspecter le code JavaScript de la page

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

Mettre le code en pause avec un point d'arrêt

Une méthode courante pour déboguer un problème de ce type consiste à insérer de nombreuses instructions console.log() dans le code afin d'inspecter les valeurs pendant 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() peut faire l'affaire, mais les points d'arrêt peuvent accélérer le processus. 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 pour afficher les messages dans la console. Avec les points d'arrêt, vous pouvez mettre en pause le code pertinent 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, DevTools affiche les valeurs de toutes les variables à ce moment-là. Parfois, des variables affectent votre code sans que vous en soyez conscient.

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 supposer que la somme incorrecte (5 + 1 = 51) est calculée dans l'écouteur d'événement click associé au bouton Ajouter le nombre 1 et le nombre 2. Par conséquent, vous souhaitez probablement suspendre le code au moment où l'écouteur click s'exécute. Les points d'arrêt de l'écouteur d'événements vous permettent d'effectuer cette opération:

1. Dans la section Débogueur, cliquez sur 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 extensibles, telles que Animation et Presse-papiers.
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, tels que click et mousedown. Une case à cocher s'affiche à côté de chaque événement.

3. Cochez la case click (Cliquer). DevTools est désormais configuré pour se mettre automatiquement en pause lorsque n'importe quel écouteur d'événement click s'exécute.

   

4. Dans la démonstration, cliquez à nouveau sur Ajouter le numéro 1 et le numéro 2. DevTools met en pause la démonstration et met 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 êtes suspendu sur une autre ligne de code, appuyez sur Resume (Reprendre) Resume Script Execution (Reprendre l'exécution du script) jusqu'à ce que vous soyez suspendu sur la ligne appropriée.

   Remarque : Si vous avez mis en pause sur une autre ligne, une extension de navigateur enregistre un écouteur d'événement click sur chaque page que vous consultez. Vous avez été mis en pause dans l'écouteur click de l'extension. Si vous utilisez le mode navigation privée pour naviguer en privé, ce qui désactive toutes les extensions, vous pouvez voir que vous vous arrêtez sur la ligne de code correcte à chaque fois.

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 DevTools. Il est utile d'explorer tous les types, car chacun d'eux vous aide à déboguer différents scénarios le plus rapidement possible. Consultez Mettre en pause votre code avec des points d'arrêt pour savoir quand et comment utiliser chaque type.

Examiner le code

L'une des causes courantes de bugs est lorsqu'un script s'exécute dans le mauvais ordre. L'exécution pas à pas de votre code vous permet de suivre l'exécution de votre code, ligne par ligne, et de déterminer exactement où il s'exécute dans un ordre différent de celui que vous attendiez. Essayez maintenant :

1. Dans le panneau Sources de DevTools, cliquez sur step_into Passer à l'appel de fonction suivant pour suivre l'exécution de la fonction onClick(), une ligne à la fois. DevTools met en surbrillance la ligne de code suivante :

   if (inputsAreEmpty()) {
   

2. Cliquez sur step_over Step over next function call (Passer à l'appel de fonction suivant).

   Les outils de développement exécutent inputsAreEmpty() sans y accéder. Notez que DevTools saute quelques lignes de code. En effet, inputsAreEmpty() a renvoyé la valeur "false", de sorte que le bloc de code de l'instruction if ne s'est pas exécuté.

Voilà l'idée de base de l'exécution du code. Si vous examinez le code dans get-started.js, vous pouvez voir que le bug se trouve probablement 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 sur une ligne de code

Les points d'arrêt par ligne de code sont le type de point d'arrêt le plus courant. Lorsque vous souhaitez vous arrêter sur une ligne de code spécifique, utilisez un point d'arrêt au niveau de la 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 ligne de cette ligne de code spécifique, qui est 32. Cliquez sur 32. Les outils de développement affichent une icône bleue au-dessus de 32. Cela signifie qu'il y a un point d'arrêt dans la ligne de code sur cette ligne. Les outils de développement se mettent toujours en pause 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. Sur les lignes 29, 30 et 31, les outils pour les développeurs affichent les valeurs de addend1, addend2 et sum en ligne à côté de leurs déclarations.

Dans cet exemple, DevTools s'arrête au point d'arrêt de la ligne de code sur la ligne 32.

Vérifier les valeurs des variables

Les valeurs de addend1, addend2 et sum semblent suspectes. Elles sont entourées de guillemets, ce qui signifie qu'elles sont des chaînes. Il s'agit d'une bonne hypothèse pour expliquer la cause du bug. Il est maintenant temps de recueillir plus d'informations. Les outils de développement fournissent de nombreux outils permettant d'examiner les valeurs des variables.

Méthode 1 : Examiner le champ d'application

Lorsque vous êtes arrêté sur une ligne de code, l'onglet 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 arrêté sur une ligne de code, l'onglet Champ d'application est vide.

Double-cliquez sur la valeur d'une variable pour la modifier.

Remarque : En fonction de vos préférences de mise en page et de la largeur de la fenêtre DevTools, l'onglet Champ d'application peut s'afficher sous forme de section réductible avec les sections Points d'arrêt et Pile d'appels.

Méthode 2 : Expressions de contrôle

L'onglet Watch (Surveiller) 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 Watch (Regarder).

Remarque : En fonction de vos préférences de mise en page et de la largeur de la fenêtre DevTools, l'onglet Watch (Surveiller) peut s'afficher sous la forme d'une section réductible avec les sections Breakpoints (Points d'arrêt) et Call stack (Pile d'appels).

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 située à droite des deux-points correspond au résultat de votre expression.

Cette capture d'écran montre l'onglet Watch (Regarder) (en bas à droite) après avoir créé l'expression de surveillance typeof sum.

Comme prévu, sum est évalué en tant que chaîne, alors qu'il devrait être un nombre. Vous avez maintenant confirmé que c'est 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 des corrections potentielles de bugs. Essayez maintenant :

1. Si le panneau de la console n'est pas ouvert, appuyez sur Échap pour l'ouvrir. Il 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 pour laquelle addend1 et addend2 sont inclus dans le champ d'application.
3. Appuyez sur Entrée. Les outils de développement évaluent l'instruction et imprime 6, qui est le résultat attendu par la démonstration.

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

Appliquer un correctif

Vous avez trouvé un correctif pour le bug. Il ne vous reste plus qu'à tester votre correction en modifiant le code et en redémarrant 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 utilisateur de DevTools. Essayez maintenant :

1. Cliquez sur resume (Réactiver) Resume script execution (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 la modification.
4. Cliquez sur label_off Désactiver les points d'arrêt. Il devient bleu pour indiquer qu'il est actif. Lorsque ce paramètre est défini, DevTools ignore tous les points d'arrêt que vous avez définis.
5. Essayez la démonstration avec différentes valeurs. La démo calcule maintenant correctement.

Attention : Ce workflow ne s'applique qu'au code exécuté dans votre navigateur. Cela ne corrigera pas le code pour tous les utilisateurs qui consultent votre page. Pour ce faire, vous devez corriger le code qui se trouve sur vos serveurs. Vous pouvez toutefois modifier des fichiers dans DevTools et les enregistrer dans vos sources avec Workspaces.

Remarque : À partir de la version 105 de Chrome, vous pouvez modifier une fonction mise en veille en direct.

Étapes suivantes

Succès : félicitations ! Vous savez maintenant exploiter tout le potentiel des outils pour les développeurs Chrome lorsque vous déboguez du code JavaScript. Les outils et les méthodes que vous avez appris dans ce tutoriel peuvent vous faire gagner un temps incalculable.

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

• 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.
• Points d'arrêt XHR qui sont déclenchés lorsque l'URL demandée correspond à une sous-chaîne que vous fournissez.

Consultez Mettre en pause votre code à l'aide de points d'arrêt pour savoir quand et comment utiliser chaque type.

Certaines commandes d'exécution du code n'ont pas été expliquées dans ce tutoriel. Pour en savoir plus, consultez Ignorer une ligne de code.