Ce tutoriel vous enseigne le flux de travail de base pour déboguer tout problème JavaScript dans DevTools. Lisez la suite ou regardez la version vidéo de ce tutoriel ci-dessous.

# Étape 1: Reproduire le bogue

Trouver une série d’actions reproduisant systématiquement un bogue est toujours la première étape du débogage.

1. Cliquez sur Ouvrir la démo. La démo s’ouvre dans un nouvel onglet.

   Démo ouverte

2. Entrez 5 dans la zone de texte Numéro 1.

3. Entrez 1 dans la zone de texte Numéro 2.

4. Cliquez sur Ajouter le numéro 1 et le numéro 2. L’étiquette sous le bouton indique 5 + 1 = 51. Le résultat doit être 6. C’est le bug que vous allez corriger.

   

   Figure 1. Le résultat de 5 + 1 est 51. Ça devrait être 6.

# Étape 2: Familiarisez-vous avec l’interface utilisateur du panneau Sources

DevTools fournit 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 est l’endroit où vous déboguez JavaScript.

1. Ouvrez DevTools en appuyant sur Commande + Option + I (Mac) ou Contrôle + Maj +I (Windows, Linux). Ce raccourci ouvre le panneau de la console.

   

   Figure 2. Le panneau de la console

2. Cliquez sur l’onglet Sources.

   

   Figure 3. Le panel Sources

L’interface utilisateur du panneau Sources comporte 3 parties :

Figure 4. Les 3 parties du panneau Sources UI

1. Le volet Navigateur de fichiers. Chaque fichier demandé par la page est répertorié ici.
2. Le volet Éditeur de code. Après avoir sélectionné un fichier dans le volet Navigateur de fichiers, le contenu de ce fichier s’affiche ici.
3. Le volet de débogage JavaScript. Divers outils pour inspecter le JavaScript de la page. Si votre fenêtre DevTools est large, ce volet s’affiche à droite du volet Éditeur de code.

# Étape 3: Mettre en pause le code avec un point d’arrêt

Une méthode courante pour déboguer un problème comme celui-ci consiste à insérer beaucoup d’instructions console.log() dans le code, afin d’inspecter les valeurs au fur et à mesure que le script s’exécute. 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 le travail, mais les points d’arrêt peuvent le faire 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 quelques 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 recharger la page afin de voir les messages dans la Console. Avec les points d’arrêt, vous pouvez faire une pause sur le code pertinent sans même savoir comment le code 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 vous montre les valeurs de toutes les variables à ce moment-là. Parfois, il y a des variables affectant votre code que vous n’êtes même pas au courant.

En bref, les points d’arrêt peuvent vous aider à trouver et à corriger les bogues 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 Ajouter le numéro 1 et le numéro 2. Par conséquent, vous souhaitez probablement mettre en pause le code au moment où l’écouteur click s’exécute. Les points d’arrêt de l’écouteur d’événements vous permettent de faire exactement cela:

1. Dans le volet de débogage JavaScript, cliquez sur Points d’arrêt de l’écouteur d’événements pour développer la section. DevTools révèle une liste de catégories d’événements extensibles, telles que l’animation et le presse-papiers.

2. À côté de la catégorie d’événement de la souris, cliquez sur Développer . DevTools révèle une liste d’événements de souris, tels que le clic et le mousedown. Chaque événement a une case à cocher à côté.

3. Cochez la case cliquer. DevTools est maintenant configuré pour une pause automatique lorsqu’un écouteur d’événement click s’exécute.

   

   Figure 5. La case à cocher clic est activée

4. De retour sur la démo, cliquez à nouveau sur Ajouter le numéro 1 et le numéro 2. DevTools met la démo en pause et met en évidence une ligne de code dans le panneau Sources. DevTools doit être mis en pause sur cette ligne de code:

   function onClick() {

   Si vous êtes en pause sur une ligne de code différente, appuyez sur Reprendre l’exécution du script jusqu’à ce que vous soyez en pause sur la bonne ligne.

   Remarque : Si vous vous êtes arrêté sur une ligne différente, vous disposez d’une extension de navigateur qui enregistre un écouteur d’événements click sur chaque page que vous visitez. 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 faites une pause 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 DevTools. Cela vaut la peine de mémoriser tous les différents types, car chaque type vous aide finalement à déboguer différents scénarios le plus rapidement possible. Reportez-vous à la section Mettre en pause votre code avec des points d’arrêt pour savoir quand et comment utiliser chaque type.

# Étape 4: Parcourez le code

Une cause fréquente de bogues est lorsqu’un script s’exécute dans le mauvais ordre. Parcourir votre code vous permet de parcourir l’exécution de votre code, une ligne à la fois, et de déterminer exactement où il s’exécute dans un ordre différent de celui auquel vous vous attendiez. Essayez-le maintenant:

1. Dans le panneau Sources de DevTools, cliquez sur Étape dans l’appel de fonction suivant pour parcourir l’exécution de la fonction onClick(), une ligne à la fois. DevTools met en évidence la ligne de code suivante:

   if (inputsAreEmpty()) {

2. Cliquez sur Étape sur l’appel de fonction suivant . DevTools exécute inputsAreEmpty() sans y entrer. Remarquez comment DevTools saute quelques lignes de code. En effet, inputsAreEmpty() est évalué à false, de sorte que le bloc de code de l’instruction if ne s’est pas exécuté.

C’est l’idée de base de parcourir le code. Si vous regardez le code dans get-started.js, vous pouvez voir que le bogue 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 mettre le code en pause plus près de l’emplacement probable du bogue.

# Étape 5: Définir un point d’arrêt de ligne de code

Les points d’arrêt de ligne de code sont le type de point d’arrêt le plus courant. Lorsque vous avez une ligne de code spécifique sur laquelle vous souhaitez faire une pause, utilisez un point d’arrêt de ligne de code:

1. Regardez 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. DevTools met une icône bleue au-dessus de 32. Cela signifie qu’il y a un point d’arrêt de ligne de code sur cette ligne. DevTools s’arrête désormais toujours avant l’exécution de cette ligne de code.

3. Cliquez sur 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, DevTools imprime les valeurs addend1, addend2 et sum à droite du point-virgule de chaque ligne.

   

   Figure 6. DevTools s’arrête sur le point d’arrêt de ligne de code en ligne 32

# Étape 6: Vérifiez les valeurs de variables

Les valeurs de addend1, addend2 et sum semblent suspectes. Ils sont enveloppés de guillemets, ce qui signifie qu’ils sont des chaînes. C’est une bonne hypothèse pour expliquer la cause du bug. Il est maintenant temps de recueillir plus d’informations. DevTools fournit de nombreux outils pour examiner les valeurs de variables.

# Méthode 1: Le volet de portée

Lorsque vous êtes en pause sur une ligne de code, le volet de portée vous montre quelles variables locales et globales sont actuellement définies, ainsi que la valeur de chaque variable. Il montre également les variables de fermeture, le cas échéant. Double-cliquez sur une valeur de variable pour la modifier. Lorsque vous n’êtes pas en pause sur une ligne de code, le volet de portée est vide.

Figure 7. Le volet Portée

# Méthode 2: Expressions de surveillance

L’onglet Expressions de surveillance vous permet de surveiller les valeurs des variables au fil du temps. Comme son nom l’indique, les expressions de surveillance ne se limitent pas aux variables. Vous pouvez stocker n’importe quelle expression JavaScript valide dans une expression de surveillance. Essayez-le maintenant:

1. Cliquez sur l’onglet Regarder.

2. Cliquez sur Ajouter une expression .

3. Type typeof sum.

4. Appuyez sur Entrée. DevTools affiche typeof sum: "string". La valeur à droite des deux points est le résultat de l’expression de votre montre.

   

   Figure 8. Le volet d’expression de surveillance (en bas à droite), après avoir créé l’expression de surveillance typeof sum. Si votre fenêtre DevTools est grande, le volet Regarder l’expression se trouve à droite, au-dessus du volet Points d’arrêt de l’écouteur d’événements.

Comme on le soupçonne, sum est évalué comme une chaîne, alors qu’il devrait s’agir d’un nombre. Vous avez maintenant confirmé que c’est la cause du bug.

# Méthode 3: La Console

En plus de visualiser 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 correctifs potentiels pour les bogues. Essayez-le maintenant:

1. Si le tiroir de la console n’est pas ouvert, appuyez sur Échap pour l’ouvrir. Il s’ouvre au bas de votre fenêtre DevTools.

2. Dans la Console, tapez parseInt(addend1) + parseInt(addend2). Cette instruction fonctionne car vous êtes en pause sur une ligne de code où addend1 et addend2 sont dans la portée.

3. Appuyez sur Entrée. DevTools évalue l’instruction et imprime 6, ce qui est le résultat que vous attendez de la démo.

   

   Figure 9. Le tiroir de la console, après évaluation parseInt(addend1) + parseInt(addend2).

# Étape 7: Appliquez un correctif

Vous avez trouvé un correctif pour le bogue. Il ne reste plus qu’à essayer votre correctif en éditant le code et en relançant la démo. Vous n’avez pas besoin de quitter DevTools pour appliquer le correctif. Vous pouvez modifier le code JavaScript directement dans l’interface utilisateur de DevTools. Essayez-le maintenant:

1. Cliquez sur 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 Command+S (Mac) ou Control+S (Windows, Linux) pour enregistrer votre modification.
4. Cliquez sur Désactiver les points d’arrêt . Il change de bleu pour indiquer qu’il est actif. Tant que cela est défini, DevTools ignore les points d’arrêt que vous avez définis.
5. Essayez la démo avec des valeurs différentes. La démo calcule maintenant correctement.

Félicitations! Vous savez maintenant comment tirer le meilleur parti des outils de développement Chrome lors du débogage de JavaScript. Les outils et méthodes que vous avez appris dans ce tutoriel peuvent vous faire économiser d’innombrables heures.

Ce tutoriel ne vous a montré que deux façons de définir des points d’arrêt. DevTools offre de nombreuses autres façons, notamment:

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

Voir Mettre en pause votre code avec des points d’arrêt pour savoir quand et comment utiliser chaque type.

Il y a quelques contrôles de progression de code qui n’ont pas été expliqués dans ce tutoriel. Reportez-vous à la section Étape par ligne de code pour en savoir plus.