Déboguer avec les points d'arrêt (DevTools)

Avancer pas à pas

Observer les valeurs

• Survol: pendant la pause, passer la souris sur une variable affiche sa valeur.
• Scope (Portée) : toutes les variables locales, de fermeture (closure) et globales à cet instant.
• Watch (Expressions espionnées) : on y ajoute une expression (total, notes.length, total / notes.length) recalculée à chaque pas.
• Call Stack (Pile d'appels) : la chaîne des fonctions qui ont mené à cette ligne. Cliquer sur une ligne de la pile affiche son contexte.
• Pendant la pause, la console travaille dans le contexte de la ligne courante : on peut y taper le nom d'une variable locale ou même la modifier.

Exemple : trouver un bug de logique

• Ce programme doit afficher la moyenne 12.67, mais il affiche 4719.67… et aucune erreur n'apparaît dans la console !

<!-- index.html -->
<p>Moyenne : <strong id="moyenne"></strong></p>
<script src="js/app.js" defer></script>

// js/app.js
const notesSaisies = ["14", "15", "9"]; // valeurs lues dans un formulaire : ce sont des chaînes

function calculerMoyenne(notes) {
  let total = 0;
  for (const n of notes) {
    total += n;
  }
  return total / notes.length;
}

function afficher() {
  const moyenne = calculerMoyenne(notesSaisies);
  document.querySelector("#moyenne").textContent = moyenne.toFixed(2);
}

afficher();

1. Ouvrez l'onglet Sources, ouvrez app.js et posez un point d'arrêt sur la ligne total += n;.
2. Rechargez la page : l'exécution s'arrête sur cette ligne.
3. Survolez n: sa valeur est "14", entre guillemets, donc une chaîne.
4. Appuyez sur F10 puis F8 plusieurs fois en observant total dans Scope : "014", puis "01415", puis "014159". Le + concatène des chaînes au lieu d'additionner.
5. Correction : convertir chaque note en nombre, total += Number(n);. La moyenne affichée devient 12.67.

• Explication du résultat faux : à la fin de la boucle, total vaut la chaîne "014159". La division "014159" / 3 convertit cette chaîne en nombre (14159), d'où 4719.67. Seule l'observation des valeurs réelles permettait de le comprendre rapidement.

7. Les autres types de points d'arrêt

   • Point d'arrêt conditionnel: clic droit sur le numéro de ligne → Ajouter un point d'arrêt conditionnel → saisir une condition, par exemple n === "9". La pause n'a lieu que si la condition est vraie : idéal dans une boucle de 1000 tours.
   • Logpoint (point de journalisation) : clic droit → Ajouter un logpoint → saisir "total =", total. Le message s'affiche dans la console sans mettre en pause et sans modifier le code.
   • L'instruction debugger; écrite dans le code met en pause à cet endroit quand les DevTools sont ouvertes. Pensez à la retirer avant de livrer.
   • Points d'arrêt sur événements (Event Listener Breakpoints) : dans le panneau de droite, cochez par exemple Mouse → click: la pause se fait dès qu'un gestionnaire de clic s'exécute, même si vous ne savez pas dans quel fichier il se trouve.
   • Points d'arrêt sur le DOM: dans l'onglet Éléments, clic droit sur un élément → Arrêt sur → modification de sous-arbre, modification d'attribut ou suppression du nœud. Utile pour savoir quel script modifie un élément.
   • Points d'arrêt XHR/fetch: pause quand une requête vers une adresse donnée est envoyée.
   • Pause sur les exceptions: l'option Pause on exceptions arrête l'exécution à l'endroit exact où une erreur se produit.

   function verifierNote(note) {
     if (note < 0 || note > 20) {
       debugger; // pause ici seulement pour une note invalide (DevTools ouvertes)
       return false;
     }
     return true;
   }

8. Bonnes pratiques de débogage

   1. Reproduire le bug de façon fiable (quelles actions, quelles données).
   2. Formuler une hypothèse (« la note est une chaîne »).
   3. Poser un point d'arrêt juste avant l'endroit suspect et vérifier l'hypothèse en observant les valeurs.
   4. Corriger, puis retester le cas qui posait problème… et les autres.
   5. Nettoyer: retirer les debugger, les console.log temporaires et les points d'arrêt inutiles (clic droit dans le panneau Breakpoints → Supprimer tous les points d'arrêt).
   6. Commiter la correction avec un message clair : git commit -m "Correction : conversion des notes en nombres".

9. Activités

Activité 1 : le bug de la moyenne

• Reproduisez l'exemple de la leçon. Notez la valeur de total à chaque tour de boucle grâce au panneau Scope, puis la moyenne exacte affichée avant correction.
• Ajoutez l'expression typeof n dans Watch. Corrigez le bug et vérifiez le résultat.

Activité 2 : point d'arrêt conditionnel

• Écrivez une boucle de 1 à 500 qui additionne les nombres. Posez un point d'arrêt conditionnel qui ne s'arrête que lorsque i === 250. Relevez la valeur de la somme à ce moment.

Activité 3 : F10, F11 ou Maj + F11 ?

• Posez un point d'arrêt sur la ligne afficher();. Avec F11, entrez dans afficher, puis dans calculerMoyenne. Observez la Call Stack à chaque étape. Ressortez avec Maj + F11.

Activité 4 : qui modifie mon titre ?

• Ajoutez à une page un script qui change le texte d'un <h1> trois secondes après le chargement (setTimeout). Avec un point d'arrêt sur le DOM (modification de sous-arbre), trouvez la ligne responsable sans ouvrir le fichier.
• Déposez vos fichiers et une capture d'écran de chaque activité dans le dépôt GitHub js-debogage.

À retenir

• Un point d'arrêt met le code en pause pour observer les valeurs réelles, sans modifier le code.
• F8 reprendre, F10 ligne suivante, F11 entrer dans la fonction, Maj + F11 en sortir.
• Scope, Watch et Call Stack montrent l'état du programme pendant la pause.
• Points d'arrêt conditionnels, logpoints, debugger, événements et DOM permettent de cibler précisément le problème.

Sources : MDN Web Docs (developer.mozilla.org), documentation de Visual Studio Code et des Chrome DevTools.