Déboguer JavaScript

Kayce Basques

Sofia Emelianova

Ce tutoriel présente le workflow de base pour déboguer les problèmes JavaScript dans les outils de développement. Lue ou regardez la version vidéo de ce didacticiel.

Reproduire le bug

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

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 numéro 1 et numéro 2. Le libellé sous le bouton indique 5 + 1 = 51. Résultat doit être 6. C'est le bug que vous allez corriger.

Dans cet exemple, le résultat de 5 + 1 est 51. Il devrait être 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, comme la modification du code CSS, le profilage de pages les performances de chargement 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 répertoriés ici.
2. La section Éditeur de code. Après avoir sélectionné un fichier dans l'onglet Page, le contenu de qui s'affichent ici.

3. 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 Portée et Surveillance rejoignent les sections Points d'arrêt, Pile d'appel et autres sous forme de sections réductibles.

Mettre en pause le code 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() permet d'effectuer une tâche plus rapidement, mais avec des points d'arrêt. A un point d'arrêt vous permet de mettre en pause votre code pendant son exécution et d'examiner toutes les valeurs à un moment précis. Les points d'arrêt présentent certains avantages par rapport à la méthode console.log():

• Avec console.log(), vous devez ouvrir manuellement le code source, trouver le code approprié, insérer les instructions console.log(), puis actualisez la page afin d'afficher les messages dans la console Cloud. Grâce aux points d'arrêt, vous pouvez vous arrêter sur le code approprié sans même savoir comment le code est structurées.
• 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 affichent les valeurs de toutes les variables à ce moment précis. Parfois, votre code comporte des variables dont vous n'avez même pas conscience.

En bref, les points d'arrêt peuvent vous aider à détecter et à corriger les bugs plus rapidement qu'avec la méthode console.log().

Si vous prenez du recul et réfléchissez au fonctionnement de l'application, vous pouvez faire une supposition éclairée que la somme incorrecte (5 + 1 = 51) est calculée dans l'écouteur d'événements click associé à Ajouter les boutons 1 et 2 Par conséquent, vous voudrez probablement mettre en pause le code au moment où exécuté par l'écouteur click. Les points d'arrêt de l'écouteur d'événements vous permettent d'effectuer cette opération:

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 les . 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 clic et mousedown. Une case à cocher est affichée à côté de chaque événement.

3. Cochez la case click. Les outils de développement sont désormais configurés pour se mettre automatiquement en pause lorsqu'un click s'exécute.

   

4. Revenez à la démo, cliquez à nouveau sur Ajouter les numéros 1 et 2. Les outils de développement interrompent la démonstration et met en surbrillance une ligne de code dans le panneau Sources. Les outils de développement doivent être mis en veille sur cette ligne de code:

   function onClick() {
   

   Si vous êtes en pause sur une autre ligne de code, appuyez sur Resume (Reprendre) Resume Script Execution (Reprendre l'exécution du script) jusqu'à ce que vous soyez mis en pause sur la bonne ligne.

   Remarque: Si vous avez mis en veille sur une autre ligne, cela signifie qu'une extension de navigateur enregistre un Écouteur d'événements click sur chaque page que vous consultez. Votre compte a été mis en veille dans la click de l'extension l'écouteur. Si vous utilisez le mode navigation privée, ce qui désactive toutes les extensions, vous vous interrompez sur la bonne ligne de code à 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 les outils de développement. Il est Il est utile d'examiner les différents types, car chacun d'eux vous aide au final à déboguer différents scénarios le plus rapidement possible. Consultez Pause Your Code With Breakpoints (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. Examiner votre code vous permet de suivre l'exécution de votre code, ligne par ligne, et de déterminer exactement à quel niveau elle 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 Step into next function call pour lancer l'exécution de la fonction onClick(), une ligne à la fois. Les outils de développement mettent en évidence 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 les outils de développement ignorent quelques lignes du code source. En effet, inputsAreEmpty() a la valeur "false", donc le bloc de l'instruction if de le code ne s'est pas exécuté.

C'est l'idée de base de parcourir le code. Si vous examinez le code dans get-started.js, vous pouvez : le bug se trouve 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 l'emplacement du bug.

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

Les points d'arrêt de ligne de code constituent le type de point d'arrêt le plus courant. Lorsque vous avez une ligne spécifique de sur lequel vous souhaitez vous arrêter, utilisez un point d'arrêt dans la ligne de code:

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

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

2. À gauche du code, vous pouvez voir le numéro de ligne de cette ligne de code particulière, qui est 32. Cliquez sur 32. Les outils de développement placent une icône bleue au-dessus de 32. Cela signifie qu'il existe d'arrêt de ligne de code sur cette ligne. Les outils de développement se mettent toujours en pause avant que cette ligne de code ne soit exécuté.

3. Cliquez sur Reprendre Reprendre l'exécution du script. La continue de s'exécuter jusqu'à atteindre la ligne 32. Aux lignes 29, 30 et 31, les outils de développement affichent les valeurs addend1, addend2 et sum de manière intégrée à côté de leurs déclarations.

Dans cet exemple, les outils de développement s'interrompent 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 entre guillemets, qui ce sont des chaînes. Il s'agit d'une bonne hypothèse pour expliquer la cause du bug. Maintenant il est temps de recueillir plus d'informations. Les outils de développement fournissent de nombreux outils permettant d'examiner les variables valeurs.

Méthode 1: Inspecter le champ d'application

Lorsque vous êtes mis en veille sur une ligne de code, l'onglet Portée indique les variables locales et globales sont définies à ce stade de l'exécution, ainsi que la valeur de chaque variable. Il indique également les variables de fermeture, applicables. Lorsque vous n'êtes pas mis en veille sur une ligne de code, l'onglet Portée est vide.

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

Remarque :En fonction de vos préférences de mise en page et de la largeur de votre fenêtre des outils de développement, l'onglet Portée peut apparaître sous forme de section réductible avec les points d'arrêt et la pile d'appel.

Méthode 2: Expressions de surveillance

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 quel code JavaScript valide dans l'onglet Regarder.

Remarque :En fonction de vos préférences de mise en page et de la largeur de votre fenêtre des outils de développement, l'onglet Regarder peut apparaître sous forme de section réductible avec les points d'arrêt et la pile d'appels.

Essayez maintenant :

1. Cliquez sur l'onglet Regarder.
2. Cliquez sur add Add watch expression (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 la résultat de votre expression.

Cette capture d'écran montre l'onglet Montre (en bas à droite) après avoir créé la montre typeof sum. .

Comme prévu, sum est évalué en tant que chaîne, alors qu'il devrait être un nombre. Vous avez confirmé que c'est la cause du bug.

Méthode 3: La console

En plus d'afficher les messages console.log(), vous pouvez utiliser la console pour évaluer des valeurs les instructions JavaScript. En termes de débogage, vous pouvez utiliser la console pour tester les correctifs potentiels. pour détecter les bugs. Essayez maintenant :

1. Si le panneau de la console n'est pas ouvert, appuyez sur Échap pour l'ouvrir. Il s'ouvre au bas de dans la fenêtre "DevTools".
2. Dans la console, saisissez parseInt(addend1) + parseInt(addend2). Cette instruction fonctionne parce que vous sont mis en veille sur une ligne de code où 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. la démonstration à réaliser.

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

Appliquer un correctif

Vous avez trouvé une solution au bug. Il ne vous reste plus qu'à essayer votre correction en modifiant le code et d'exécuter à 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'UI 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. Elle devient bleue pour indiquer qu'elle est active. Lorsque cette option est définie, les outils de développement ignorent les 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 n'applique un correctif qu'au code en cours d'exécution dans votre navigateur. Il ne corriger le code pour tous les utilisateurs qui consultent votre page. Pour ce faire, vous devez corriger le code serveurs. Vous pouvez toutefois modifier des fichiers dans les outils de développement et les enregistrer dans vos sources avec des espaces de travail.

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

Étapes suivantes

Opération réussie :félicitations ! Vous savez maintenant exploiter tout le potentiel des outils pour les développeurs Chrome lorsque vous déboguez JavaScript. La les outils et méthodes que vous avez appris dans ce tutoriel peuvent vous faire gagner d'innombrables heures.

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:

• 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 pour les exceptions détectées ou non interceptées.
• 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 avec des 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. Voir Passer ligne de code pour en savoir plus.