Débogage dans le navigateur

Avant d’écrire un code plus complexe, parlons de débogage.

Le Debugging est le processus de recherche et de correction des erreurs dans un script. Tous les navigateurs modernes et la plupart des autres environnements prennent en charge les outils de débogage – une interface utilisateur spéciale dans les outils de développement facilitant grandement le débogage. Cela permet également de tracer le code étape par étape pour voir ce qui se passe exactement.

Nous allons utiliser Chrome ici, car il possède suffisamment de fonctionnalités, la plupart des autres navigateurs utilisent un processus similaire.

Le volet “Sources”

Votre version de Chrome peut sembler un peu différente, mais vous devez tout de même savoir ce qui est là.

• Ouvrez la page d’exemple dans Chrome.
• Activer les outils de développement avec F12 (Mac: Cmd+Opt+I).
• Séléctionner le volet Sources.

Voici ce que vous devriez voir si vous le faites pour la première fois :

Le bouton ouvre le volet avec les fichiers.

Cliquez dessus et sélectionnez hello.js dans l’arborescence. Voici ce qui devrait apparaître :

Ici nous pouvons voir 3 parties :

1. Le volet explorateur de fichiers répertorie les fichiers HTML, JavaScript, CSS et autres fichiers, y compris les images jointes à la page. Des extensions Chrome peuvent également apparaître ici.
2. Le volet Editeur de Code affiche le code source.
3. Le volet Débugueur JavaScript est pour le débogage, nous l’explorerons bientôt.

Maintenant, vous pouvez cliquer sur le même bouton à nouveau pour masquer la liste des ressources et laisser un peu d’espace au code.

Console

Si nous appuyons sur Esc, une console s’ouvre ci-dessous. Nous pouvons taper des commandes ici et appuyer sur Entrée pour les exécuter.

Une fois une instruction exécutée, son résultat est présenté ci-dessous.

Par exemple, ici 1+2 donne 3, tandis que l’appel de fonction hello("debugger") ne renvoie rien, donc le résultat est undefined :

Breakpoints

Examinons ce qui se passe dans le code de la page d’exemple. Dans hello.js, cliquez sur le numéro de ligne 4. Oui, sur le chiffre 4, pas sur le code.

Félicitations ! Vous avez défini un point d’arrêt. Veuillez également cliquer sur le numéro correspondant à la ligne 8.

Cela devrait ressembler à ceci (le bleu est l’endroit où vous devez cliquer) :

Un breakpoint est un point dans le code où le débogueur mettra automatiquement en pause l’exécution de JavaScript.

Pendant que le code est en pause, nous pouvons examiner les variables actuelles, exécuter des commandes dans la console, etc. En d’autres termes, nous pouvons le déboguer.

Nous pouvons toujours trouver une liste de points d’arrêt dans le volet de droite. C’est utile lorsque nous avons plusieurs points d’arrêt dans divers fichiers. Ça nous permet de :

• Sauter rapidement au point d’arrêt dans le code (en cliquant dessus dans le volet de droite).
• Désactiver temporairement le point d’arrêt en le décochant.
• Supprimer le point d’arrêt en cliquant avec le bouton droit de la souris et en sélectionnant Supprimer.
• … Et ainsi de suite.

La commande “debugger”

Nous pouvons également suspendre le code en utilisant la commande debugger, comme ceci :

function hello(name) {
  let phrase = `Hello, ${name}!`;

  debugger;  // <-- le débogueur s'arrête ici

  say(phrase);
}

Une telle commande ne fonctionne que lorsque les outils de développement sont ouverts, sinon le navigateur l’ignore.

Pause et regarder autour

Dans notre exemple, hello() est appelé lors du chargement de la page, donc le moyen le plus simple d’activer le débogueur (après avoir défini les points d’arrêt) est de recharger la page. Appuyez donc sur F5 (Windows, Linux) ou sur Cmd+R (Mac).

Lorsque le point d’arrêt est défini, l’exécution s’interrompt à la 4ème ligne :

Veuillez ouvrir les menus déroulants d’information à droite (indiqués par des flèches). Ils vous permettent d’examiner l’état du code actuel :

1. Watch – affiche les valeurs actuelles pour toutes les expressions.

   Vous pouvez cliquer sur le plus + et saisir une expression. Le débogueur affichera sa valeur, la recalculant automatiquement dans le processus d’exécution.

2. Call Stack – affiche la chaîne des appels imbriqués.

   À ce moment précis, le débogueur se trouve dans l’appel hello(), appelé par un script dans index.html (aucune fonction n’est appelée, elle est donc appelée “anonyme”).

   Si vous cliquez sur un élément de la pile (ex: “anonymous”), le débogueur passe au code correspondant, et toutes ses variables peuvent également être examinées.

3. Scope – variables actuelles.

   Local affiche les variables de fonction locales. Vous pouvez également voir leurs valeurs surlignées directement sur la source.

   Global a des variables globales (en dehors de toutes fonctions).

   Il y a aussi le mot-clé this que nous n’avons pas encore étudié, mais nous le ferons bientôt.

Tracer l’exécution

Il est maintenant temps de tracer le script.

Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.

– “Reprendre” : continue l’exécution, raccourci clavier F8.

Reprend l’exécution. S’il n’y a pas de points d’arrêt supplémentaires, l’exécution continue et le débogueur perd le contrôle.

Voici ce que nous pouvons voir après un clic dessus :

L’exécution a repris, atteint un autre point d’arrêt à l’intérieur de say() et s’y est arrêtée. Jetez un coup d’œil à “Call stack” à droite. Il a augmenté d’un appel supplémentaire. Nous sommes à l’intérieur say() maintenant.

– “Step”: lance la commande suivante, raccourci clavier F9.

Exécute la prochaine déclaration. Si nous cliquons dessus maintenant, alert sera affiché.

En cliquant dessus encore et encore, vous parcourrez toutes les instructions de script une par une.

– “Step over”: lance la commande suivante, mais n’entre pas dans une fonction, raccourci clavier F10.  : Similaire à la commande “Step” précédente, mais se comporte différemment si l’instruction suivante est un appel de fonction (pas une fonction intégrée, comme alert, mais une fonction qui nous est propre).

Si nous les comparons, la commande “Step” entre dans un appel de fonction imbriqué et interrompt l’exécution à sa première ligne, tandis que “Step over” exécute l’appel de fonction imbriqué de manière invisible pour nous, en sautant les fonctions internes.

L’exécution est alors suspendue immédiatement après cette fonction.

C’est bien si nous ne sommes pas intéressés à voir ce qui se passe dans l’appel de fonction.

– “Step into”, raccourci clavier F11.

Cela ressemble à “Step”, mais se comporte différemment dans le cas d’appels de fonctions asynchrones. Si vous commencez seulement à apprendre le JavaScript, vous pouvez alors ignorer la différence, car nous n’avons pas encore d’appels asynchrones.

Pour le futur, il suffit de noter que la commande “Step” ignore les actions asynchrones, telles que setTimeout (appel de fonction planifiée), qui s’exécutent ultérieurement. Le “Pas à pas” entre dans leur code, les attend si nécessaire. Voir DevTools manual pour plus de détails.

– “Step out”: continuer l’exécution jusqu’à la fin de la fonction en cours, raccourci clavier Shift+F11.

Continue l’exécution et l’arrête à la toute dernière ligne de la fonction en cours. C’est pratique lorsque nous avons accidentellement entré un appel imbriqué en utilisant , mais cela ne nous intéresse pas et nous voulons continuer jusqu’au bout le plus tôt possible.

– active / désactive tous les points d’arrêt.

Ce bouton ne déplace pas l’exécution. Juste un ensemble de on/off pour les points d’arrêt.

– active/désactive la pause automatique en cas d’erreur.

Lorsqu’il est activé, si les outils de développement sont ouverts, une erreur lors de l’exécution du script le met automatiquement en pause. Ensuite, nous pouvons analyser les variables dans le débogueur pour voir ce qui n’a pas fonctionné. Donc, si notre script s’arrête avec une erreur, nous pouvons ouvrir le débogueur, activer cette option et recharger la page pour voir où il s’arrête et quel est le contexte à ce moment-là.

Logging

Pour afficher quelque chose sur la console depuis notre code, utilisez la fonction console.log.

Par exemple, cela affiche les valeurs de 0 à 4 sur la console :

// ouvrir la console pour visualiser
for (let i = 0; i < 5; i++) {
  console.log("value,", i);
}

Les internautes ne voient pas cette sortie, elle se trouve dans la console. Pour la voir, ouvrez l’onglet Console des outils de développement ou appuyez sur Esc lorsque vous vous trouvez dans un autre onglet : la console en bas s’ouvre.

Si nous avons assez de logging dans notre code, nous pouvons voir ce qui se passe dans les enregistrements, sans le débogueur.

Résumé

Comme nous pouvons le constater, il existe trois méthodes principales pour suspendre un script :

1. Les points d’arrêt (breakpoint).
2. Les instructions du debugger.
3. Une erreur (si les outils de développement sont ouverts et le bouton est activé)

En pause, nous pouvons déboguer – examiner les variables et suivre le code pour voir où l’exécution s’est mal passée.

Il y a beaucoup plus d’options dans les outils de développement que celles couvertes ici. Le manuel complet est ici https://developers.google.com/web/tools/chrome-devtools.

Les informations de ce chapitre sont suffisantes pour commencer le débogage, mais plus tard, en particulier si vous utilisez beaucoup de fonctions de navigateur, allez-y et examinez les fonctionnalités plus avancées des outils de développement.

Oh, et vous pouvez aussi cliquer sur différents endroits des outils de développement et voir ce qui s’affiche. C’est probablement la voie la plus rapide pour apprendre les outils de développement. N’oubliez pas le clic droit et les menus contextuels !