Avant d'écrire du code plus complexe, parlons du débogage.
Le débogage 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 qui facilite grandement le débogage. Cela permet également de retracer le code étape par étape pour voir ce qui se passe exactement.
Nous utiliserons Chrome ici, car il possède suffisamment de fonctionnalités, la plupart des autres navigateurs ont un processus similaire.
Votre version de Chrome peut sembler un peu différente, mais son contenu devrait quand même être évident.
Ouvrez la page d'exemple dans Chrome.
Activez les outils de développement avec F12 (Mac : Cmd + Opt + I ).
Sélectionnez le panneau Sources .
Voici ce que vous devriez voir si vous le faites pour la première fois :
Le bouton bascule ouvre l'onglet avec les fichiers.
Cliquons dessus et sélectionnons hello.js dans l'arborescence. Voici ce qui devrait apparaître :
Le panneau Sources comporte 3 parties :
Le volet Navigateur de fichiers répertorie les fichiers HTML, JavaScript, CSS et autres, y compris les images jointes à la page. Les extensions Chrome peuvent également apparaître ici.
Le volet Éditeur de code affiche le code source.
Le volet Débogage JavaScript est destiné au débogage, nous l'explorerons bientôt.
Vous pouvez maintenant cliquer sur le même bouton encore une fois pour masquer la liste des ressources et donner un peu d'espace au code.
Si nous appuyons sur Esc , une console s'ouvre ci-dessous. Nous pouvons y taper des commandes et appuyer sur Entrée pour exécuter.
Une fois une instruction exécutée, son résultat est affiché ci-dessous.
Par exemple, ici 1+2 donne 3 , alors que l'appel de fonction hello("debugger") ne renvoie rien, donc le résultat undefined :
Examinons ce qui se passe dans le code de la page d'exemple. Dans hello.js , cliquez sur la ligne numéro 4 . Oui, juste sur les 4 chiffres, pas sur le code.
Félicitations! Vous avez défini un point d'arrêt. Veuillez également cliquer sur le numéro de la ligne 8 .
Cela devrait ressembler à ceci (le bleu est l'endroit où vous devez cliquer) :
Un point d'arrêt est un point de 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 panneau de droite. C'est utile lorsque nous avons de nombreux points d'arrêt dans différents fichiers. Cela nous permet de :
Accédez rapidement au point d'arrêt dans le code (en cliquant dessus dans le panneau de droite).
Désactivez temporairement le point d'arrêt en le décochant.
Supprimez le point d'arrêt en cliquant avec le bouton droit et en sélectionnant Supprimer.
…Et ainsi de suite.
Points d'arrêt conditionnels
Un clic droit sur le numéro de ligne permet de créer un point d'arrêt conditionnel . Il ne se déclenche que lorsque l'expression donnée, que vous devez fournir lors de sa création, est véridique.
C'est pratique lorsque nous devons nous arrêter uniquement pour une certaine valeur de variable ou pour certains paramètres de fonction.
Nous pouvons également suspendre le code en utilisant la commande debugger , comme ceci :
fonction bonjour(nom) {
let phrase = `Bonjour, ${name} !`;
débogueur ; // <-- le débogueur s'arrête ici
dire(expression);
}Une telle commande ne fonctionne que lorsque les outils de développement sont ouverts, sinon le navigateur l'ignore.
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. Appuyons donc sur F5 (Windows, Linux) ou Cmd + R (Mac).
Lorsque le point d'arrêt est défini, l'exécution s'arrête à la 4ème ligne :
Veuillez ouvrir les listes déroulantes d'informations à droite (étiquetées par des flèches). Ils vous permettent d'examiner l'état actuel du code :
Watch – affiche les valeurs actuelles de toutes les expressions.
Vous pouvez cliquer sur le plus + et saisir une expression. Le débogueur affichera sa valeur et la recalculera automatiquement en cours d'exécution.
Call Stack – affiche la chaîne d’appels imbriquées.
À l'heure actuelle, le débogueur se trouve dans l'appel hello() , appelé par un script dans index.html (il n'y a pas de fonction ici, donc on l'appelle « anonyme »).
Si vous cliquez sur un élément de la pile (par exemple « anonyme »), le débogueur passe au code correspondant et toutes ses variables peuvent également être examinées.
Scope – variables actuelles.
Local affiche les variables de fonction locales. Vous pouvez également voir leurs valeurs mises en évidence juste au-dessus de la source.
Global a des variables globales (hors fonctions).
Il y a aussi this mot-clé que nous n'avons pas encore étudié, mais nous le ferons bientôt.
Il est maintenant temps de retracer le script.
Il y a des boutons pour cela en haut du panneau de droite. Mobilisons-les.
– « Reprendre » : continuer l'exécution, raccourci clavier F8 .
Reprise de 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 l'on peut voir après un clic dessus :
L'exécution a repris, atteint un autre point d'arrêt dans say() et s'y est arrêtée. Jetez un œil à la « Pile d’appels » à droite. Il a augmenté d'un appel supplémentaire. Nous sommes maintenant dans say() .
– « Étape » : exécutez la commande suivante, raccourci clavier F9 .
Exécutez l'instruction suivante. Si nous cliquons dessus maintenant, alert sera affichée.
En cliquant encore et encore, vous parcourrez toutes les instructions du script une par une.
– « Enjamber » : exécutez la commande suivante, mais n'entrez pas dans une fonction , raccourci clavier F10 .
Semblable à 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ée et met en pause l'exécution à sa première ligne, tandis que « Step over » exécute l'appel de fonction imbriquée de manière invisible pour nous, en ignorant les éléments internes de la fonction.
L'exécution est ensuite suspendue immédiatement après cet appel de fonction.
C'est bien si nous ne sommes pas intéressés de voir ce qui se passe dans l'appel de fonction.
– « Entrez », raccourci clavier F11 .
C'est similaire à « Step », mais se comporte différemment en cas d'appels de fonction asynchrones. Si vous commencez seulement à apprendre JavaScript, vous pouvez ignorer la différence, car nous n'avons pas encore d'appels asynchrones.
Pour l'avenir, notez simplement que la commande « Step » ignore les actions asynchrones, telles que setTimeout (appel de fonction planifié), qui s'exécutent plus tard. Le « Step into » entre dans leur code et les attend si nécessaire. Voir le manuel DevTools pour plus de détails.
– « Step out » : continuez l'exécution jusqu'à la fin de la fonction en cours, raccourci clavier Shift + F11 .
Continuez l'exécution et arrêtez-la à la toute dernière ligne de la fonction en cours. C'est pratique lorsque nous avons accidentellement saisi un appel imbriqué en utilisant , mais cela ne nous intéresse pas, et nous souhaitons continuer jusqu'à sa fin le plus tôt possible.
– activer/désactiver tous les points d’arrêt.
Ce bouton ne déplace pas l'exécution. Juste une activation/désactivation de masse pour les points d'arrêt.
– activer/désactiver 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é. Ainsi, si notre script meurt avec une erreur, nous pouvons ouvrir le débogueur, activer cette option et recharger la page pour voir où il meurt et quel est le contexte à ce moment-là.
Continuez ici
Un clic droit sur une ligne de code ouvre le menu contextuel avec une excellente option appelée « Continuer vers ici ».
C'est pratique lorsque nous voulons avancer de plusieurs pas vers la ligne, mais que nous sommes trop paresseux pour définir un point d'arrêt.
Pour afficher quelque chose sur la console à partir de notre code, il existe la fonction console.log .
Par exemple, cela affiche les valeurs de 0 à 4 sur la console :
// ouvre la console pour voir
pour (soit i = 0; i < 5; i++) {
console.log("valeur", i);
}Les utilisateurs réguliers ne voient pas cette sortie, elle se trouve dans la console. Pour le voir, ouvrez le panneau Console des outils de développement ou appuyez sur Échap dans un autre panneau : cela ouvre la console en bas.
Si nous disposons de suffisamment de connexions dans notre code, nous pouvons alors voir ce qui se passe à partir des enregistrements, sans le débogueur.
Comme nous pouvons le voir, il existe trois manières principales de mettre un script en pause :
Un point d'arrêt.
Les instructions debugger .
Une erreur (si les outils de développement sont ouverts et que le bouton est « activé »).
En pause, nous pouvons déboguer : examiner les variables et tracer le code pour voir où l'exécution se passe mal.
Il existe bien plus d’options dans les outils de développement que celles présentées ici. Le manuel complet se trouve sur https://developers.google.com/web/tools/chrome-devtools.
Les informations de ce chapitre sont suffisantes pour commencer le débogage, mais plus tard, surtout si vous faites beaucoup de choses sur le navigateur, allez-y et examinez les fonctionnalités plus avancées des outils de développement.
Oh, et vous pouvez également cliquer à différents endroits des outils de développement et simplement voir ce qui apparaît. C'est probablement le chemin le plus rapide pour apprendre les outils de développement. N'oubliez pas le clic droit et les menus contextuels !