Commencer à déboguer JavaScript

Cet article vous apprend le flux de travail de base pour le débogage de tout problème JavaScript à l’aide de DevTools.

Étape 1 : Reproduire le bogue

La première étape du débogage consiste à rechercher une séquence d’actions qui reproduisent de manière cohérente un bogue.

1. Ouvrez la page web de démonstration Prise en main du débogage de JavaScript dans une nouvelle fenêtre ou un nouvel onglet. Pour ouvrir la page web, cliquez avec le bouton droit sur le lien et sélectionnez « Ouvrir le lien dans un nouvel onglet » ou « Ouvrir le lien dans une nouvelle fenêtre » dans la fenêtre contextuelle. Vous pouvez également appuyer longuement sur Ctrl (pour Windows, Linux) ou Commande (pour macOS), puis cliquer sur le lien.

   Conseil : Ouvrez Microsoft Edge en mode InPrivate pour vous assurer que Microsoft Edge s’exécute dans un état propre. Pour plus d’informations, consultez Parcourir InPrivate dans Microsoft Edge

2. Entrez 5 dans la zone de texte Nombre 1 .

3. Entrez 1 dans la zone de texte Nombre 2 .

4. Cliquez sur Ajouter le nombre 1 et le numéro 2. L’étiquette sous le bouton indique 5 + 1 = 51, au lieu du résultat attendu de 6 :

   

Étape 2 : Se familiariser avec l’interface utilisateur de l’outil Sources

DevTools fournit plusieurs outils pour différentes tâches. Ces tâches incluent la modification du CSS, le profilage des performances de chargement de page et la surveillance des demandes réseau. L’outil Sources est l’endroit où vous déboguez JavaScript.

1. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre :

   

2. Sélectionnez l’outil Sources . Sélectionnez l’onglet Page, puis le fichier JavaScript : get-started.js

   

L’interface utilisateur de l’outil Sources comprend trois parties :

• Volet Navigateur (dans le coin supérieur gauche). Chaque fichier que la page web demande est répertorié ici.

• Volet Éditeur (dans le coin supérieur droit). Une fois que vous avez sélectionné un fichier dans le volet Navigateur , ce volet affiche le contenu du fichier.

• Volet Débogueur (en bas). Ce volet fournit des outils permettant d’inspecter le Code JavaScript pour la page web. Si votre fenêtre DevTools est large, ce volet s’affiche à droite du volet Éditeur .

Étape 3 : Suspendre le code avec un point d’arrêt

Une méthode courante pour déboguer ce type de problème consiste à insérer plusieurs console.log() instructions dans le code, puis à inspecter les valeurs à 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 console.log() méthode peut effectuer le travail, mais les points d’arrêt l’effectuent plus rapidement. Un point d’arrêt vous permet de suspendre votre code au milieu du runtime et d’examiner toutes les valeurs à ce moment-là. Les points d’arrêt présentent les avantages suivants par rapport à la console.log() méthode .

• Avec console.log(), vous devez ouvrir manuellement le code source, rechercher le code approprié, insérer les console.log() instructions, puis actualiser la page web pour afficher les messages dans la console. Avec les points d’arrêt, vous pouvez suspendre le code approprié sans avoir à savoir comment le code est structuré.

• Dans vos console.log() instructions, 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, les variables qui affectent votre code sont masquées et masquées.

En bref, les points d’arrêt peuvent vous aider à trouver et à corriger les bogues plus rapidement que la console.log() méthode .

Points d’arrêt de l’écouteur d’événements

Si vous prenez du recul et réfléchissez au fonctionnement de l’application, vous pouvez faire une estimation éclairée que la somme incorrecte (5 + 1 = 51) est calculée dans l’écouteur click d’événements associé au bouton Ajouter un nombre 1 et numéro 2 . Par conséquent, vous souhaitez probablement suspendre le code au moment de l’exécution de l’écouteur click . Les points d’arrêt de l’écouteur d’événements vous permettent de procéder comme suit :

1. Dans le volet Navigateur, (index) est sélectionné par défaut. Cliquez sur get-started.js.

2. Dans le volet Débogueur , cliquez sur Points d’arrêt de l’écouteur d’événements pour développer la section. DevTools affiche une liste de catégories d’événements, telles que Animation et Presse-papiers.

3. Cliquez sur Développer () par l’événement Mouse pour ouvrir cette catégorie. DevTools affiche une liste d’événements de souris, tels que le clic et le retrait de la souris. Chaque événement a une case à cocher en regard de celui-ci.

4. Cochez la case en regard de cliquer sur :

   

   DevTools est maintenant configuré pour s’interrompre automatiquement lorsqu’un écouteur d’événement click s’exécute.

5. Dans la page web de démonstration rendue, cliquez à nouveau sur le bouton Ajouter le nombre 1 et le numéro 2 . DevTools suspend la démonstration et met en surbrillance une ligne de code dans l’outil Sources . DevTools s’interrompt à la ligne 16 dans get-started.js, comme indiqué dans l’extrait de code suivant :

   if (inputsAreEmpty()) {
   

   Si vous effectuez une pause sur une autre ligne de code, cliquez sur Reprendre l’exécution du script () jusqu’à ce que vous mettez en pause sur la ligne correcte.

   Remarque

   Si vous avez suspendu sur une autre ligne, vous disposez d’une extension de navigateur qui inscrit un écouteur d’événements click sur chaque page web que vous visitez. Vous êtes suspendu dans l’écouteur click de l’extension. Si vous utilisez le mode InPrivate pour parcourir en privé, ce qui désactive toutes les extensions, vous verrez peut-être que vous vous arrêtez à chaque fois sur la ligne de code souhaité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 DevTools. Mémorisez tous les différents types pour vous aider à déboguer différents scénarios aussi rapidement que possible. Pour savoir quand et comment utiliser chaque type, consultez Suspendre votre code avec des points d’arrêt.

Étape 4 : Parcourir le code pas à pas

L’une des causes courantes de bogues est quand un script s’exécute dans le mauvais ordre. L’exécution pas à pas de votre code vous permet de parcourir le runtime de votre code. Vous parcourez une ligne à la fois pour vous aider à déterminer exactement où votre code s’exécute dans un ordre différent de celui que vous attendez. Essayez-le maintenant :

1. Cliquez sur Pas à pas sur appel de fonction suivant (). DevTools exécute le code suivant sans pas à pas :

   if (inputsAreEmpty()) {
   

   DevTools ignore quelques lignes de code, car inputsAreEmpty() la valeur est , de sorte que falsele bloc de code de l’instruction if ne s’exécute pas.

2. Dans l’outil Sources de DevTools, cliquez sur Pas à pas dans l’appel de fonction suivant () pour parcourir l’exécution de la updateLabel() fonction, une ligne à la fois.

C’est l’idée de base de parcourir pas à pas le code. Si vous examinez le code dans get-started.js, vous pouvez voir que le bogue se trouve probablement quelque part dans la updateLabel() fonction . Au lieu de parcourir pas à pas chaque ligne de code, vous pouvez utiliser un autre type de point d’arrêt (un point d’arrêt de ligne de code) pour suspendre le code 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 accédez à la ligne de code spécifique que vous souhaitez suspendre, utilisez un point d’arrêt de ligne de code.

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

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

2. Le numéro de ligne pour label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum; est 34. Cliquez sur la ligne 34. DevTools affiche un cercle rouge à gauche de 34. Le cercle rouge indique qu’un point d’arrêt de ligne de code se trouve sur cette ligne. DevTools s’interrompt toujours avant l’exécution de cette ligne de code.

3. Cliquez sur le bouton Reprendre l’exécution du script () :

   

   Le script continue à s’exécuter jusqu’à ce qu’il atteigne la ligne 34. Aux lignes 31, 32 et 33, DevTools imprime les valeurs de chaque variable à droite du point-virgule de chaque ligne. Ces valeurs sont les suivantes :

   • addend1 = « 5 »
   • addend2 = « 1 »
   • sum = « 51 »

Étape 6 : Vérifier les valeurs des variables

Les valeurs de addend1, addend2et semblent sum suspectes. Ces valeurs sont encapsulées entre guillemets, ce qui signifie que chaque valeur est une chaîne. Il s’agit d’un bon indice de la cause du bogue. L’étape suivante consiste à collecter plus d’informations sur ces valeurs de variable. DevTools fournit différentes façons d’examiner les valeurs des variables.

Examen des valeurs de variables dans le volet Étendue

Si vous effectuez une pause sur une ligne de code, le volet Étendue affiche les variables locales et globales actuellement définies, ainsi que la valeur de chaque variable :

Le volet Étendue affiche également les variables de fermeture, le cas échéant. Si vous souhaitez modifier une valeur de variable, double-cliquez sur la valeur dans le volet Étendue . Si vous ne vous suspendez pas sur une ligne de code, le volet Étendue est vide.

Examen des valeurs de variables par le biais d’expressions Espion

Le volet Espion vous permet de surveiller les valeurs des variables (telles que sum) ou des expressions (telles que typeof sum). Vous pouvez stocker n’importe quelle expression JavaScript valide dans une expression watch.

1. Sélectionnez l’onglet Espion .

2. Cliquez sur Ajouter une expression watch ().

3. Tapez l’expression typeof sumwatch , puis appuyez sur Entrée :

Le volet Espion affiche typeof sum: "string". La valeur à droite du signe deux-points est le résultat de l’expression watch. Le bogue est dû à sum une évaluation en tant que chaîne, alors qu’il doit s’agir d’un nombre.

Si votre fenêtre DevTools est large, le volet Espion s’affiche dans le volet Débogueur , qui s’affiche ensuite à droite.

Examen des valeurs de variables via la console

La console vous permet d’afficher la console.log() sortie. Vous pouvez également utiliser la console pour évaluer des instructions JavaScript arbitraires pendant que le débogueur est suspendu au niveau d’une instruction de code. Pour le débogage, vous pouvez utiliser la console pour tester les correctifs potentiels des bogues.

1. Si l’outil Console est fermé, appuyez sur Échap pour l’ouvrir. L’outil Console s’ouvre dans le volet inférieur de la fenêtre DevTools.

2. Dans la console, tapez l’expression parseInt(addend1) + parseInt(addend2). L’expression est évaluée pour l’étendue actuelle, étant donné que le débogueur est suspendu sur une ligne de code où addend1 et addend2 sont dans l’étendue.

3. Appuyez sur Entrée. DevTools évalue l’instruction et s’imprime 6 dans la console, qui est le résultat correct que vous attendez de la démonstration :

   

Étape 7 : Appliquer un correctif au code retourné, puis à votre code source réel

Nous avons identifié un correctif possible pour le bogue. Ensuite, modifiez le code JavaScript directement dans l’interface utilisateur DevTools, puis réexécutez la démonstration pour tester le correctif, comme suit :

1. Cliquez sur Reprendre l’exécution du script ().

2. Dans le volet Éditeur , remplacez la ligne var sum = addend1 + addend2 par var sum = parseInt(addend1) + parseInt(addend2).

3. Appuyez sur Ctrl+S (Windows, Linux) ou Cmd+S (macOS) pour enregistrer votre modification.

4. Cliquez sur Désactiver les points d’arrêt (). L’icône du point d’arrêt devient grise pour indiquer que le point d’arrêt est inactif. Bien que Désactiver les points d’arrêt soit défini, DevTools ignore tous les points d’arrêt que vous définissez. La page web de démonstration affiche maintenant la valeur correcte :

   

5. Essayez la démonstration avec différentes valeurs. La démonstration calcule maintenant correctement.

6. Lorsque vous déboguez votre propre projet, après avoir identifié le correctif, vous corrigez votre code source réel sur le serveur, par exemple en modifiant votre code source local, puis en redéployant votre code fixe sur le serveur. Les étapes précédentes appliquent uniquement un correctif à une copie locale temporaire du code envoyé à partir du serveur.

Étapes suivantes

Félicitations ! Vous savez maintenant comment tirer le meilleur parti de Microsoft Edge DevTools lors du débogage de JavaScript. Les outils et méthodes que vous avez appris dans cet article peuvent vous faire gagner d’innombrables heures.

Cet article a montré deux façons de définir des points d’arrêt. DevTools fournit également des moyens de définir des points d’arrêt pour suspendre votre code lorsque certaines conditions sont remplies, telles que :

• Points d’arrêt conditionnels qui sont déclenchés uniquement lorsque la condition que vous fournissez est true.
• 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.

Pour plus d’informations sur le moment et la façon d’utiliser chaque type de point d’arrêt, consultez Suspendre votre code avec des points d’arrêt.

Pour plus d’informations sur les boutons du débogueur permettant d’effectuer un pas à pas dans le code, consultez Pas à pas supérieur de la ligne de code dans « Fonctionnalités de débogage JavaScript ».

Voir également

• Fonctionnalités de débogage JavaScript : utilisation de l’interface utilisateur du débogueur dans l’outil Sources.
• Vue d’ensemble de l’outil Sources : présente le débogueur JavaScript et l’éditeur de code.

Remarque

Certaines parties de cette page sont des modifications fondées sur le travail créé et partagé par Google et utilisées conformément aux conditions décrites dans la licence internationale 4,0 d’attribution créative. La page d’origine se trouve ici et est créée par Kayce Basques (Rédacteur technique, Chrome DevTools & Lighthouse).

Cette œuvre est concédée sous licence creative commons attribution 4.0 international.