Testing, reading an error, fixing it

This lesson is still being tested: it improves with learners' feedback. If something is unclear, it is the lesson that needs fixing, not you.

By the end of this lesson, you will be able to

test your tool before and after each change;
open the browser console and find an error message in it;
give the agent a report it can fix;
check the fix, then everything else.

Why it matters to you

Sooner or later, a button will do nothing. Without a method, you describe the problem vaguely, the agent guesses, and it sometimes changes three things to repair one. With the browser console, you have the exact error message. With it, the fix is often one line. This lesson has you repair a real bug, on an exercise file.

Before you start


You need	Claude Code (app or terminal), in Manual mode, your tool (lesson 3), the exercise file with an error (resource), and Chrome or another browser with its developer tools
Cost	The agent subscription: Claude Pro at minimum, €18 per month excl. VAT billed monthly, or €15 per month excl. VAT with the annual plan of €180 paid up front; prices shown on claude.com/pricing on 24/10/2026
Duration	60 minutes
Reminder	Reread an error message before pasting it: it must not contain any personal data

Understand it in 3 minutes

Testing means redoing the tests from your specification, one by one: before a change (to know what worked), and after (to know what still works).

The console is a part of the browser’s developer tools. According to the Chrome documentation (24/10/2026), it is used to display the messages logged by the page and to run JavaScript. JavaScript errors show up there. To open it in Chrome:

	The console	The developer tools
Mac	Cmd + Option + J	Cmd + Option + I
Windows	Ctrl + Shift + J	Ctrl + Shift + I, or F12

These shortcuts are those of Chrome, which this lesson uses: install it if you don’t have it. If you prefer Safari on Mac, and its Develop menu does not appear in the menu bar, choose Safari > Settings > Advanced, then tick “Show features for web developers”. The text of the same error can differ from one browser to another (in our test with Safari’s engine: “Can’t find variable: aujourdui”).

A good report, in four lines:

what you did (“I click Returned, then OK”);
what you expected (“the book leaves the list”);
what happened (“nothing, the book stays”);
the exact console message, copied as is.

And three instructions: explain in two sentences, change as little as possible, say how to check.

Do it together

1Step 1: The exercise file

Download the loan logbook with an error (resources): right-click the link, Save Link As (the name of this choice varies depending on the browser), into your project folder. Check that the file name ends in .html: if not, rename it to carnet-emprunts-avec-erreur.html. Open it with a double-click (if your default browser is not Chrome: right-click, Open With (exact label not confirmed), then Chrome). Add two made-up loans, then click Returned on one of them, and OK. Nothing happens.

2Step 2: Find the message

Open the console (Cmd + Option + J on Mac, Ctrl + Shift + J on Windows, in Chrome). Click Returned again. A red message appears. Copy it exactly.

In our test on 24/10/2026, the message found in Chromium said: “aujourdui is not defined”.

3Step 3: The report

In Claude Code, on your project folder, in Manual mode:

When I click "Returned" in [file name], then OK, nothing happens: the book stays in the list.
I opened the browser console, and it shows in red: [paste the exact message]
Explain to me in 2 simple sentences what is wrong, then fix the file, changing as little as possible. Don't touch anything else. Then tell me how to check that it is repaired.

In our test, a new session, with only this report, answered: a letter “h” is missing in the name of a function of the program, the part that gives today’s date (“aujourdui” instead of “aujourdhui”, the way this file spells the French word for “today”). It changed a single line, the one with the error. The exercise file keeps its data separate: what you enter in it does not get mixed with your logbook from lesson 3.

4Step 4: Check, then check everything again

Reload the page (Cmd + R or Ctrl + R), with the console open.
Click Returned again: the book leaves the list, no red message.
Redo all the tests from the specification: a fix can break something else.

Your turn

Repair the exercise file, with the method from steps 2 to 4.
On your own tool, build the habit: console open when you try a new feature.
Write in your journal each error you meet: the message, the cause, the fix.

Resources to download

The loan logbook with an error: the same tool as the example in lesson 3, with a planted error, and its data kept separate. Made-up data.

Check your work

It worked if:

you found the error message in the console;
your report has the four lines, with the exact message;
the fix changes only what was necessary;
you redid all the tests from the specification after the fix.

Common mistakes:

“it doesn’t work” without the console message;
letting the agent “improve” other parts while fixing;
checking only the fix, not the rest;
pasting an error message without rereading it.

Keep it and pick it up later

Before a fix, save a version that works (lesson 5): if the fix makes things worse, you go back.
Keep your list of errors in the journal: they often come back.

Going further

optional

In Claude Code, you can ask: “Add a simple test that checks [the criterion]”. But a test written by the agent also needs to be reread: check that it fails when the criterion is not met.

New words

5 words explained

Word	What it means
Bug	An error in a program, which stops it from doing what is intended
Console	The part of the developer tools where messages and errors are displayed
Developer tools	The tools built into the browser to inspect a page
Report	The description of a problem: what you did, expected, got, and the message
Regression	A fix that breaks something that used to work

The planted error, the message and the fix by a new session were actually run with Claude Code 2.1.310 and Chromium (test report, T55). The test sessions with Claude Code were run in non-interactive mode (claude -p), once each: what you see may differ (permission requests, wording, number of questions). To be checked: the developer tools of Safari, Firefox and Edge are not described.