Lire une erreur

Ce que tu vas apprendre

• Ouvrir la console et repérer une erreur.
• Lire un message d'erreur : son type, sa description, son fichier et sa ligne.
• Chercher la solution sans te perdre dans les résultats.

Une erreur n'est pas un échec

Quand ton code plante, le navigateur te dit pourquoi. Le message est souvent précis. Beaucoup de débutants le regardent à peine, alors que la réponse s'y trouve.

Ton premier réflexe : ouvrir la console et lire.

Ouvrir la console

La console est une zone des outils de développement du navigateur où s'affichent les messages et les erreurs de ta page. Dans Chrome, Firefox et Edge, la touche F12 ouvre ces outils. Choisis ensuite l'onglet Console.

Prends cette page, qui contient une faute :

<ul id="liste"></ul>
<script>
  const recettes = ['Crêpes', 'Quiche']
  console.log(recette)
</script>

La console affiche une ligne rouge. En l'ouvrant, tu lis quelque chose comme ReferenceError: recette is not defined.

Tu peux aussi écrire dans la console avec console.log(), qui affiche une valeur pendant l'exécution :

console.log(recettes)
console.error('Quelque chose ne va pas')

Anatomie d'un message d'erreur

Un message contient quatre informations utiles :

1. Le type de l'erreur, avant les deux-points.
2. La description, qui dit ce qui ne va pas.
3. Le fichier concerné.
4. Le numéro de ligne, parfois suivi de la colonne.

Uncaught ReferenceError: recette is not defined
    at recettes.html:4:15

Ici, le type est ReferenceError, la description dit que recette n'existe pas, et l'erreur est à la ligne 4. L'orthographe est en cause : la variable s'appelle recettes, avec un s.

Le navigateur affiche souvent un lien cliquable vers le fichier. Clique dessus pour aller à la ligne en question.

Les erreurs les plus courantes

Les messages varient selon le navigateur, mais les types sont toujours les mêmes :

MDN donne des exemples de messages réels : SyntaxError: missing ) after argument list signale une parenthèse fermante manquante, et SyntaxError: unterminated string literal signale un texte dont le guillemet de fermeture manque.

Un TypeError pas à pas

Voici une erreur que tu croiseras souvent :

const recette = document.querySelector('#recette-du-jour')
recette.textContent = 'Tarte aux pommes'

Si aucun élément n'a l'identifiant recette-du-jour, querySelector renvoie null. La seconde ligne essaie de lire une propriété sur null et plante avec un TypeError.

La cause n'est pas la ligne 2, mais la ligne 1. Pour comprendre une erreur, remonte vers l'endroit où la valeur a été produite. Affiche-la avec console.log(recette) : si tu lis null, tu as trouvé.

La pile d'appels

Quand l'erreur se produit dans une fonction appelée par une autre fonction, le navigateur liste toutes les fonctions en cours. C'est la pile d'appels (stack trace).

TypeError: Cannot read properties of null (reading 'textContent')
    at afficherRecette (recettes.js:12:18)
    at chargerPage (recettes.js:30:5)

Lis de haut en bas. La première ligne est l'endroit où l'erreur éclate, la suivante est la fonction qui l'a appelée. Commence par la première ligne qui désigne ton propre fichier, pas un fichier d'une bibliothèque.

Chercher efficacement

Si le message ne suffit pas, cherche-le sur le web. Quelques habitudes aident :

1. Copie le message d'erreur, sans les noms propres à ton projet.
2. Ajoute le nom du langage ou de l'outil : javascript, nuxt.
3. Garde les guillemets autour de la partie fixe du message.
4. Privilégie la documentation officielle et MDN avant les forums.
5. Vérifie que la réponse correspond à ta version de l'outil.

Un message comme Cannot read properties of null (reading 'textContent') est identique chez des milliers de personnes. Tu trouveras vite une explication.

À retenir

• La console s'ouvre avec F12, onglet Console, et chaque erreur y est détaillée.
• Un message d'erreur donne un type, une description, un fichier et une ligne.
• SyntaxError, ReferenceError et TypeError sont les trois types les plus fréquents.
• Corrige la première erreur de la liste : les autres en découlent souvent.
• Dans une pile d'appels, lis de haut en bas et cherche ton propre fichier.
• Pour chercher, copie le message sans les détails privés et ajoute le nom de l'outil.