Debug avec console.log
L'outil de debug le plus simple et le plus efficace
⏱ Estim. ~5 min
01 · Lire
Il existe des outils de debug sophistiqués avec breakpoints, watch expressions, exécution pas-à-pas. Tu les apprendras plus tard. Mais l'outil que tu utiliseras le plus, même en tant qu'ingénieur sénior, c'est l'humble console.log().
L'idée est ridiculement simple : imprime des trucs pour voir ce qui se passe réellement. Quand ton code ne se comporte pas comme prévu, la manière la plus rapide de comprendre pourquoi, c'est de logger les valeurs à chaque étape et comparer ce que tu attendais avec ce qui se passe réellement.
C'est pas glamour. C'est pas raffiné. Mais ça marche, et c'est rapide.
💡 Imagine çaDebug avec console.log, c'est comme placer des pièges photo dans une forêt. Tu ne peux pas regarder chaque arbre en continu, mais tu peux placer des caméras à des points clés pour voir ce qui passe. Quelque chose d'inattendu apparaît ? Tu sais exactement où chercher.
02 · Lire
Tu as une app de boutique boguée. La fonction getAffordableElectronics est censée renvoyer des produits électroniques dans une certaine fourchette de prix et en stock. Mais elle renvoie les chers et ceux en rupture. On enquête.
03 · Pratique terminal
Lis d'abord le log de sortie pour voir ce que la fonction produit réellement vs ce qui était attendu.
(Cette section est interactive — active JavaScript pour l'utiliser.)
04 · Pratique terminal
Maintenant lis le code pour suivre la logique. Regarde les étapes de filter — l'une d'elles contient un bug d'opérateur subtil.
(Cette section est interactive — active JavaScript pour l'utiliser.)
05 · Exemple de code
Voici à quoi ça ressemble quand tu ajoutes des logs de debug à chaque étape. Compare les résultats intermédiaires pour traquer l'erreur.
Ajouter des logs de debug
function getAffordableElectronics(items, maxPrice) {
console.log('Input:', items.length, 'items, max price:', maxPrice);
const electronics = items.filter(item => item.category === 'electronics');
console.log('After category filter:', electronics.map(i => i.name));
const affordable = electronics.filter(item => item.price > maxPrice);
console.log('After price filter:', affordable.map(i => i.name));
// ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
const available = affordable.filter(item => item.inStock);
console.log('After stock filter:', available.map(i => i.name));
return available.map(item => item.name);
}
Avec un log à chaque étape, le bug saute aux yeux : après le filtre de prix, tu vois les articles chers survivre au lieu des moins chers. Le > aurait dû être un <. Sans logs, tu peux deviner pendant longtemps — avec les logs, tu trouves en quelques secondes.
06 · Lire
Le logging stratégique est un art. Ne sème pas des logs partout — place-les aux points de transformation de données ou là où ça peut mal tourner.
Points clés
- Logge au début de la fonction (a-t-elle été appelée ? avec quoi ?)
- Logge avant et après chaque transformation (qu'est-ce qui a changé ?)
- Étiquette chaque log : console.log('step 3 - data:', data)
- Retire les logs de debug avant de commiter
07 · Compléter
Quand tu débuggues avec console.log, ajoute toujours une _____ pour savoir quel log est lequel.
08 · Quiz
Pourquoi chaque console.log devrait-il être étiqueté ?
- Pour faire tourner le programme plus vite
- Pour distinguer quel log produit quelle sortie
- JavaScript exige que console.log ait des étiquettes
- Seul le code de production a besoin d'étiquettes
Autres leçons de ce chapitre
⚠ L'expérience interactive complète nécessite JavaScript. Active-le et recharge la page.
※ Ce site est un projet éducatif indépendant — pas un produit officiel d'Anthropic. Claude™ est une marque déposée d'Anthropic, PBC.