Déboguer JavaScript et PHP pas à pas

Comprendre et pratiquer

Fiche complémentaire au contenu de Mehdi Laraibi pour Lara Academy. La vidéo est en darija ; cette fiche accompagne la pratique.

À la fin, vous pourrez

• Décrire le résultat attendu et reproduire un bug sur un petit exemple.
• Poser un point d’arrêt et comparer les variables avant et après une instruction.
• Corriger une hypothèse puis relancer le même cas pour la vérifier.

Un exemple concret

Un message d’erreur ou une proposition de l’IA donne une piste. Pour vérifier cette piste, observez ce que le programme fait réellement. La méthode du Reel tient en 4 actions : reproduire le bug, annoncer le résultat attendu, poser un point d’arrêt près de l’endroit suspect, puis avancer ligne par ligne.

Voici le piège de l’échange de variables. Au départ, a vaut 5 et b vaut 3 ; après un échange correct, a doit valoir 3 et b doit valoir 5. Dans DevTools, ouvrez Sources, placez un point d’arrêt avant a = b et relancez le code. Une pause avant une instruction montre l’état qui précède son exécution. Avec Step over, observez la valeur de a dans Scope : après a = b, le 5 est perdu.

Une variable temporaire conserve l’ancienne valeur. En PHP, la même observation se fait avec Xdebug et un environnement de débogage configuré : poser un point d’arrêt ne suffit pas sans connexion active au débogueur. var_dump reste utile pour une vérification ponctuelle ; le pas à pas aide à suivre le moment exact où la valeur change.

// Erreur : les 2 valeurs deviennent 3
let a = 5;
let b = 3;
a = b;
b = a;

// Correction : repartir de a = 5 et b = 3
a = 5;
b = 3;
const tmp = a;
a = b;
b = tmp; // a = 3, b = 5

À vous de jouer

Prédisez le résultat de let total = "0"; puis de for (const price of [10, 20, 30]) total += price;. Quel changement permet d’obtenir 60 ? Vérifiez avec un point d’arrêt.

Pour approfondir

• Chrome DevTools : points d’arrêt
• Xdebug : débogage pas à pas en PHP