Tester, lire une erreur, corriger

Cette leçon est encore en test : elle s'améliore avec les retours des apprenants. Si quelque chose n'est pas clair, c'est la leçon qu'il faut corriger, pas toi.

À la fin de cette leçon, tu sauras

tester ton outil avant et après chaque modification ;
ouvrir la console du navigateur et y trouver un message d’erreur ;
donner à l’agent un signalement qu’il peut corriger ;
vérifier la correction, puis tout le reste.

Pourquoi ça t’intéresse

Tôt ou tard, un bouton ne fera rien. Sans méthode, on décrit le problème vaguement, l’agent devine, et il modifie parfois trois choses pour en réparer une. Avec la console du navigateur, tu as le message exact de l’erreur. Avec lui, la correction est souvent d’une ligne. Cette leçon te fait réparer un vrai bug, sur un fichier d’exercice.

Avant de commencer


Il te faut	Claude Code (appli ou terminal), en mode Manuel, ton outil (leçon 3), le fichier d’exercice avec une erreur (ressource), et Chrome ou un autre navigateur avec ses outils de développement
Coût	L’abonnement de l’agent : Claude Pro au minimum, 18 € par mois hors taxes en facturation mensuelle, ou 15 € par mois hors taxes avec l’abonnement annuel de 180 € payé d’avance ; prix affichés sur claude.com/pricing au 24/10/2026
Durée	60 minutes
Rappel	Relis un message d’erreur avant de le coller : il ne doit contenir aucune donnée personnelle

Comprendre en 3 minutes

Tester, c’est refaire les essais de ta spécification, un par un : avant une modification (pour savoir ce qui marchait), et après (pour savoir ce qui marche encore).

La console est une partie des outils de développement du navigateur. D’après la documentation de Chrome (24/10/2026), elle sert à afficher les messages enregistrés par la page et à exécuter du JavaScript. Les erreurs du JavaScript s’y affichent. Pour l’ouvrir dans Chrome :

	La console	Les outils de développement
Mac	Cmd + Option + J	Cmd + Option + I
Windows	Ctrl + Maj + J	Ctrl + Maj + I, ou F12

Ces raccourcis sont ceux de Chrome, que cette leçon utilise : installe-le si tu ne l’as pas. Si tu préfères Safari sur Mac, et que son menu Développement n’apparaît pas dans la barre des menus, choisis Safari > Réglages > Avancés, puis coche « Afficher les fonctionnalités pour les développeurs web ». Le texte d’une même erreur peut différer d’un navigateur à l’autre (dans notre essai avec le moteur de Safari : « Can’t find variable: aujourdui »).

Un bon signalement, en quatre lignes :

ce que tu as fait (« je clique sur Rendu, puis sur OK ») ;
ce que tu attendais (« le livre sort de la liste ») ;
ce qui s’est passé (« rien, le livre reste ») ;
le message exact de la console, copié tel quel.

Et trois consignes : explique en deux phrases, change le moins possible, dis comment vérifier.

Faire ensemble

1Étape 1 : Le fichier d’exercice

Télécharge le carnet d’emprunts avec une erreur (ressources) : clic droit sur le lien, Enregistrer le lien sous (le nom de ce choix varie selon le navigateur), dans ton dossier de projet. Vérifie que le nom du fichier se termine par .html : sinon, renomme-le en carnet-emprunts-avec-erreur.html. Ouvre-le par un double-clic (si ton navigateur par défaut n’est pas Chrome : clic droit, Ouvrir avec, puis Chrome). Ajoute deux emprunts inventés, puis clique sur Rendu pour l’un d’eux, et sur OK. Rien ne se passe.

2Étape 2 : Trouver le message

Ouvre la console (Cmd + Option + J sur Mac, Ctrl + Maj + J sur Windows, dans Chrome). Recommence le clic sur Rendu. Un message rouge apparaît. Copie-le exactement.

Lors de notre essai du 24/10/2026, le message relevé dans Chromium disait : « aujourdui is not defined ».

3Étape 3 : Le signalement

Dans Claude Code, sur ton dossier de projet, en mode Manuel :

Quand je clique sur « Rendu » dans [nom du fichier], puis sur OK, rien ne se passe : le livre reste dans la liste.
J'ai ouvert la console du navigateur, elle affiche en rouge : [colle le message exact]
Explique-moi en 2 phrases simples ce qui ne va pas, puis corrige le fichier en changeant le moins possible. Ne touche à rien d'autre. Dis-moi ensuite comment vérifier que c'est réparé.

Lors de notre essai, une séance neuve, avec seulement ce signalement, a répondu : il manque un « h » dans le nom d’une fonction du programme, la partie qui donne la date du jour (« aujourdui » au lieu de « aujourdhui »). Elle a changé une seule ligne, celle de l’erreur. Le fichier d’exercice garde ses données à part : ce que tu y saisis ne se mélange pas à ton carnet de la leçon 3.

4Étape 4 : Vérifier, puis tout revérifier

Recharge la page (Cmd + R ou Ctrl + R), console ouverte.
Refais le clic sur Rendu : le livre sort de la liste, aucun message rouge.
Refais tous les essais de la spécification : une correction peut casser autre chose.

Faire toi-même

Répare le fichier d’exercice, avec la méthode des étapes 2 à 4.
Sur ton propre outil, prends l’habitude : la console ouverte quand tu essaies une nouvelle fonction.
Note dans ton journal chaque erreur rencontrée : le message, la cause, la correction.

Ressources à télécharger

Le carnet d’emprunts avec une erreur : le même outil que l’exemple de la leçon 3, avec une erreur plantée, et ses données gardées à part. Données inventées.

Vérifier

C’est réussi si :

tu as trouvé le message d’erreur dans la console ;
ton signalement a les quatre lignes, avec le message exact ;
la correction ne change que ce qui était nécessaire ;
tu as refait tous les essais de la spécification après la correction.

Erreurs fréquentes :

« ça marche pas » sans le message de la console ;
laisser l’agent « améliorer » d’autres parties pendant la correction ;
vérifier seulement la correction, pas le reste ;
coller un message d’erreur sans le relire.

Conserver et reprendre

Avant une correction, enregistre une version qui marche (leçon 5) : si la correction empire les choses, tu reviens en arrière.
Garde ta liste d’erreurs dans le journal : elle se répète souvent.

Pour aller plus loin

facultatif

Dans Claude Code, tu peux demander : « Ajoute un test simple qui vérifie [le critère] ». Mais un test écrit par l’agent se relit aussi : vérifie qu’il échoue quand le critère n’est pas respecté.

Mots nouveaux

5 mots expliqués

Mot	Ce que ça veut dire
Bug	Une erreur dans un programme, qui l’empêche de faire ce qui est prévu
Console	La partie des outils de développement où s’affichent les messages et les erreurs
Outils de développement	Les outils intégrés au navigateur pour inspecter une page
Signalement	La description d’un problème : ce que tu as fait, attendu, obtenu, et le message
Régression	Une correction qui casse quelque chose qui marchait

L’erreur plantée, le message et la correction par une séance neuve ont été joués réellement avec Claude Code 2.1.310 et Chromium (rapport de tests, T55). Les séances d’essai avec Claude Code ont été jouées en mode non interactif (claude -p), une seule fois chacune : ce que tu verras peut différer (demandes d’autorisation, formulation, nombre de questions). À vérifier : les outils de développement de Safari, Firefox et Edge ne sont pas décrits.