Déboguer JavaScript

Kayce basque

Twitter GitHub Glitch

Sofia Emelianova

GitHub

Ce tutoriel vous explique comment déboguer les problèmes JavaScript dans les outils de développement. Poursuivez votre lecture ou regardez la version vidéo de ce tutoriel ci-dessous.

Étape 1: Reproduisez le bug

La première étape du débogage consiste toujours à identifier une série d'actions qui reproduisent systématiquement un bug.

1. Ouvrez cette démonstration dans un nouvel onglet.
2. Saisissez 5 dans la zone de texte Numéro 1.
3. Saisissez 1 dans la zone de texte Numéro 2.
4. Cliquez sur Ajouter les numéros 1 et 2. Le libellé 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 6.

Étape 2: Familiarisez-vous 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 est l'endroit où vous déboguez JavaScript.

1. Ouvrez les Outils de développement en appuyant sur Commande+Option+J (Mac) ou Ctrl+Maj+J (Windows, Linux). Ce raccourci ouvre le panneau Console.

   

2. Cliquez sur l'onglet Sources.

   

L'interface utilisateur du panneau Sources se compose de trois parties:

1. Le volet Navigateur de fichiers Tous les fichiers demandés par la page sont listés ici.
2. Le volet Code Editor (Éditeur de code). Une fois que vous avez sélectionné un fichier dans le volet Navigateur de fichiers, son contenu s'affiche ici.
3. Dans le volet JavaScript Debugging (Débogage JavaScript) Différents outils permettant d'inspecter le code JavaScript de la page. Si votre fenêtre DevTools est large, ce volet s'affiche à droite du volet Code Editor (Éditeur de code).

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

Une méthode courante pour résoudre ce type de problème consiste à insérer de nombreuses instructions console.log() dans le code afin d'inspecter les valeurs au fur et à mesure 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() peut permettre d'effectuer la tâche, mais les points d'arrêt peuvent l'accomplir plus rapidement. Un point d'arrêt vous permet de suspendre le code en cours d'exécution et d'examiner toutes les valeurs à ce moment-là. 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 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 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, les outils de développement vous indiquent les valeurs de toutes les variables à ce moment précis. Parfois, il y a des variables affectant votre code dont vous n'êtes même pas au courant.

En bref, 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énements click associé aux boutons Ajouter les numéros 1 et 2. Par conséquent, vous souhaiterez probablement mettre en pause le code au moment où l'écouteur click s'exécute. C'est précisément ce que vous permettent de faire les points d'arrêt de l'écouteur d'événements:

1. Dans le volet Débogage JavaScript, 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 que vous pouvez développer, telles que Animation et Clipboard.
2. À côté de la catégorie d'événement Souris, cliquez sur Développer . Les outils de développement affichent une liste d'événements de souris, tels qu'un clic et un mousedown. Chaque événement est associé à une case à cocher.

3. Cochez la case Cliquer. Les outils de développement sont désormais configurés pour se mettre automatiquement en pause lorsqu'un écouteur d'événements 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 suspendent la démo et mettent en surbrillance une ligne de code dans le panneau Sources. Les outils de développement doivent être mis en pause sur cette ligne de code:

   function onClick() {
   

   Si vous avez interrompu l'exécution sur une autre ligne de code, appuyez sur Resume Script Execution (Reprendre l'exécution du script) jusqu'à ce que la mise en veille se trouve sur la bonne ligne.

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

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 de mémoriser tous les différents types, car chacun d'eux vous aide à déboguer différents scénarios le plus rapidement possible. Pour savoir quand et comment utiliser chaque type, consultez la page Suspendre votre code avec des points d'arrêt.

Étape 4: Parcourir le code

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

1. Dans le panneau Sources des outils de développement, cliquez sur 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 Passer le prochain appel de fonction . Les outils de développement exécute inputsAreEmpty() sans y accéder. Notez que les outils de développement ignorent quelques lignes de code. En effet, inputsAreEmpty() a la valeur "false". Le bloc de code de l'instruction if ne s'est donc 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 constater que 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 au plus près de l'emplacement probable du bug.

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

Les points d'arrêt en ligne de code sont 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 par-dessus 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 systématiquement 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'à atteindre la ligne 32. Aux lignes 29, 30 et 31, les outils de développement affichent les valeurs de addend1, addend2 et sum de façon intégrée à 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.

Étape 6: Vérifiez les valeurs des variables

Les valeurs de addend1, addend2 et sum semblent suspectes. Ils sont entre guillemets, ce qui signifie qu'il s'agit de chaînes de caractères. C'est 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: Le volet "Scope" (Portée)

Lorsque vous effectuez une pause sur une ligne de code, le volet Scope (Champ d'application) indique les variables locales et globales qui sont actuellement définies, ainsi que la valeur de chaque variable. Il affiche également les variables de fermeture, le cas échéant. Double-cliquez sur une valeur de variable pour la modifier. Lorsque vous n'êtes pas suspendu sur une ligne de code, le volet Scope (Champ d'application) est vide.

Méthode 2: Expressions de surveillance

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

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

La capture d'écran ci-dessus montre le volet Watch Expression (Expression de surveillance) (en bas à droite) après la création de l'expression de contrôle typeof sum. Si la fenêtre des outils de développement est grande, le volet Watch Expression (Expression de surveillance) se trouve à droite, au-dessus du volet Event Listener Breakpoints (Points d'arrêt de l'écouteur d'événements).

Comme suspecté, sum est évalué en tant que 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 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 mis 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 correspond au résultat que la démonstration devrait produire.

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

Étape 7: Appliquez un correctif

Vous avez trouvé un correctif pour le bug. Il ne vous reste plus qu'à tester votre correctif en modifiant le code et en exécutant à nouveau la démo. 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 des outils de développement. Essayez 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 Cmd + S (Mac) ou Ctrl + S (Windows, Linux) pour enregistrer votre modification.
4. Cliquez sur Désactiver les points d'arrêt . Il devient bleu pour indiquer qu'il est actif. Tant que cette option 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 désormais effectué correctement.

Attention:Ce workflow n'applique un correctif qu'au code en cours d'exécution dans votre navigateur. Elle 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 les outils de développement et les enregistrer dans vos sources avec les espaces de travail.

Important:À partir de la version 105 de Chrome, vous pouvez modifier en direct une fonction suspendue.

Étapes suivantes

Félicitations ! Vous savez maintenant exploiter pleinement les outils pour les développeurs Chrome lorsque vous déboguez JavaScript. 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 de nombreuses autres méthodes, y compris:

• Points d'arrêt conditionnels déclenchés uniquement 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

Pour savoir quand et comment utiliser chaque type, consultez la page Suspendre votre code avec des points d'arrêt.

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