Déboguer méthodiquement

Ce que tu vas apprendre

• Suivre une méthode en quatre temps pour trouver la cause d'un bug.
• Observer ton code en cours d'exécution avec console.log et les points d'arrêt.
• Expliquer ton problème à voix haute pour le résoudre, et utiliser git bisect quand un bug est apparu récemment.

Déboguer, c'est enquêter

Un bug est un comportement du code différent de celui que tu attends. Déboguer consiste à trouver pourquoi, puis à corriger.

Changer des lignes au hasard en espérant que ça marche fait perdre du temps. Une méthode vaut mieux.

Une méthode en quatre temps

1. Reproduire : trouve les étapes exactes qui font apparaître le bug.
2. Isoler : réduis le code pour identifier la zone concernée.
3. Comprendre : explique pourquoi cette zone se comporte ainsi.
4. Corriger : change une chose à la fois, puis vérifie.

Si tu ne sais pas reproduire un bug, tu ne peux pas savoir si tu l'as corrigé. Note les étapes : « je clique sur Ajouter sans titre, la recette est quand même créée ».

Observer avec console.log

Le plus simple pour voir ce qui se passe est d'afficher des valeurs :

function calculerDuree(recette) {
  console.log('recette reçue :', recette)
  const total = recette.preparation + recette.cuisson
  console.log('total calculé :', total)
  return total
}

Si total vaut "1530" au lieu de 45, tu comprends que les valeurs sont des textes qui se concatènent. Un message qui dit ce qu'il affiche ('total calculé :') évite de se perdre quand il y a dix lignes dans la console.

Pour un tableau d'objets, console.table() affiche un tableau lisible :

console.table(recettes)

Arrêter le code avec un point d'arrêt

console.log oblige à relancer la page à chaque fois. Un point d'arrêt (breakpoint) met l'exécution en pause à une ligne choisie, pour que tu inspectes toutes les variables à cet instant.

Dans les outils du navigateur (F12) :

1. Ouvre l'onglet Sources (nommé Débogueur dans Firefox).
2. Ouvre ton fichier JavaScript.
3. Clique sur le numéro de la ligne à observer.
4. Recharge la page ou déclenche l'action.

Le code s'arrête. Tu vois la valeur de chaque variable et tu peux avancer ligne par ligne.

Tu peux aussi écrire le point d'arrêt dans le code avec l'instruction debugger :

function calculerDuree(recette) {
  debugger
  return recette.preparation + recette.cuisson
}

Elle ne fait quelque chose que si les outils de développement sont ouverts. Comme pour console.log, retire-la ensuite.

Le canard en plastique

La méthode du canard en plastique (rubber duck debugging) est étonnamment efficace. Tu poses un objet devant toi, un canard ou n'importe quoi, et tu lui expliques ton code ligne par ligne, à voix haute.

En formulant chaque étape, tu remarques souvent l'endroit où ton explication ne colle plus avec le code. Tu trouves la réponse avant d'avoir fini ta phrase. Écrire ta question précisément pour la poser à quelqu'un d'autre produit le même effet.

Réduire pour isoler

Quand le bug se cache dans beaucoup de code, simplifie :

• mets en commentaire des morceaux jusqu'à ce que le bug disparaisse ;
• remplace une donnée réelle par une valeur fixe simple ;
• copie le code fautif dans un petit fichier de test séparé.

Quand le bug disparaît, la dernière chose que tu as retirée est liée à la cause. Remets-la et regarde-la de près.

Quand le bug est récent : git bisect

Parfois, tout marchait la semaine dernière et plus rien aujourd'hui. git bisect cherche pour toi le commit fautif par dichotomie : il te propose un commit au milieu de l'historique, tu dis s'il est bon ou mauvais, et il réduit l'intervalle de moitié à chaque fois.

git bisect start
git bisect bad
git bisect good a1b2c3d

git bisect bad signale que le commit actuel contient le bug. git bisect good suivi d'un identifiant désigne un commit où tout marchait. Git se place ensuite sur un commit intermédiaire. Teste ton site, puis réponds :

git bisect good
git bisect bad

Quand Git a trouvé le premier mauvais commit, il l'affiche. Termine avec :

git bisect reset

Cette commande te ramène sur ta branche. Pense à valider ou mettre de côté tes changements avant de commencer.

Éviter de revenir au même bug

Une fois corrigé, prends une minute :

1. Comprends pourquoi tu ne l'as pas vu plus tôt.
2. Ajoute un test ou une vérification si c'est simple.
3. Écris un message de commit clair : « Corrige le total des durées de préparation et de cuisson ».

À retenir

• Déboguer suit quatre temps : reproduire, isoler, comprendre, corriger.
• console.log et console.table montrent des valeurs, avec un libellé pour s'y retrouver.
• Un point d'arrêt met le code en pause pour inspecter les variables, dans l'onglet Sources ou Débogueur.
• Expliquer le problème à voix haute, méthode du canard en plastique, révèle souvent la réponse.
• Réduire le code jusqu'à ce que le bug disparaisse montre où il se trouve.
• git bisect retrouve le commit qui a introduit un bug récent.