Avant d'écrire des scripts, il faut savoir où les exécuter et où lire leurs messages. La console développeur, intégrée à tous les navigateurs, est l'outil n°1 du développeur web : essai rapide de code, affichage de variables, traque des erreurs.
| Navigateur | Raccourci |
|---|---|
| Chrome / Edge | F12 ou Ctrl+Shift+I |
| Firefox | F12 ou Ctrl+Shift+K |
| Safari | Cmd+Option+C (activer d'abord le menu Développement dans les préférences) |
Un panneau apparaît en bas (ou sur le côté) de la page. Plusieurs onglets : Console, Éléments, Réseau, Sources, etc. On reste sur Console pour commencer.
Le prompt de la console accepte du JavaScript. Tape, valide avec Entrée — c'est exécuté immédiatement dans le contexte de la page courante.
> 2 + 2
4
> let nom = "Alice"
undefined
> `Bonjour ${nom}`
"Bonjour Alice"
> document.title
"Mon super site"C'est parfait pour :
document, window…),console.log() — afficher depuis ton scriptC'est l'outil de débogage le plus utilisé au monde, tous langages confondus.
let age = 17;
let nom = "Alice";
console.log(nom); // "Alice"
console.log(age); // 17
console.log("Nom :", nom, "| Âge :", age); // Nom : Alice | Âge : 17
console.log({ nom, age }); // { nom: "Alice", age: 17 }Quelques astuces :
console.log(monObjet) affiche un arbre dépliable.console.warn, console.error, console.tableVariantes utiles selon le contexte :
console.warn("Attention, valeur étrange"); // jaune, avec icône avertissement
console.error("Quelque chose a planté"); // rouge, avec stack trace
console.table([
{ nom: "Alice", age: 16 },
{ nom: "Bob", age: 17 }
]); // tableau visuelconsole.table sur un tableau d'objets est particulièrement spectaculaire — essaie une fois et tu l'utiliseras tout le temps.
Quand ton script plante, le navigateur affiche une erreur rouge dans la console. Elle contient en général :
Uncaught ReferenceError: foo is not defined).Quelques erreurs classiques :
| Message | Cause typique |
|---|---|
Uncaught ReferenceError: x is not defined |
Variable mal orthographiée ou non déclarée |
Uncaught TypeError: ... is null |
Tu utilises un élément avant qu'il existe (script avant <body>) |
Uncaught SyntaxError: Unexpected token |
Erreur de syntaxe : parenthèse, accolade, virgule manquante |
is not a function |
Tu appelles () sur quelque chose qui n'est pas une fonction (faute de frappe sur le nom) |
Lire l'erreur, c'est 80% du débogage. Beaucoup de débutants paniquent à la première erreur rouge et la ferment. Au contraire : la console te dit exactement ce qui cloche et où. Lis le message, clique sur le lien de la ligne, et la moitié du problème est déjà résolu.
alert, console.log, document.write — lequel ?Trois manières d'afficher quelque chose. Elles ne sont pas équivalentes.
| Méthode | Pour quoi ? |
|---|---|
alert("msg") |
Message à l'utilisateur (boîte de dialogue bloquante). À utiliser parcimonieusement. |
console.log(...) |
Message pour toi, le développeur. À utiliser sans modération. |
document.write(...) |
Insère dans la page. À éviter : casse complètement la page si appelé après chargement. |
Règle simple : console.log pour déboguer, alert pour parler à l'utilisateur, jamais document.write.
Au-delà de la console, l'onglet Éléments (ou Inspecteur sur Firefox) montre l'arbre HTML de la page en direct.
F12 ouvre la console.console.log(...) est ton meilleur ami pour comprendre ce qu'il se passe dans ton script. Sème-en partout pendant le débogage, retire-les avant la version finale.alert pour l'utilisateur, console.log pour toi, jamais document.write.