Lesson 1.5 · 45 minFixing problems with Claude

What you will have

The student has diagnosed and fixed three broken mini-projects (a visual bug, a crash and a silent failure) and has written the cause of each in one sentence.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 3 — Demonstration: evidence, cause, fix

Purpose: The quote calculator in practice/broken/2-crash/ does nothing when I click Calculate. I want to understand why before anything is changed.

Context: Steps to reproduce: open practice/broken/2-crash/index.html in Chrome and click "Calculate". Expected: an estimated price appears under the button. Actual: nothing appears. The browser console shows this error as soon as the page loads:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at script.js:6:8

Done looks like: You tell me the cause in one or two plain sentences, and propose the smallest change that fixes it.

Constraints: Do not change any file yet.

Apply that fix and nothing else. Then tell me exactly how to check it myself.

Do along

Work on your own project. For each broken project: reproduce, collect evidence, ask for the cause first, then the fix, then verify and review the diff. Type /clear between projects.

1. Before you start. Copy the three folders from the materials into practice/broken/ and commit (checkpoint please, message "Lesson 1.5: add broken projects"). Create a notes file, practice/broken/CAUSES.md.
2. Pause after Part 3. Project 2, the crash. Repeat the demonstration with your own wording. Copy the error from your own console. Write the cause in CAUSES.md in one sentence.
3. After Part 4. Project 1, the visual bug. Open practice/broken/1-visual/index.html and make the browser window about half the width of your screen. Something is wrong with the three cards. Is there an error in the console? Take a screenshot. Write a brief with the steps to reproduce (including the window width), what you expected (all three cards visible, no sideways scrolling), what you see, and the pasted screenshot. Cause first, then the fix. Verify at wide and narrow widths.
4. Project 3, the silent failure. In a second terminal window, go to practice/broken/3-silent/ and run node server.js. Open the address it prints. Open the developer tools on the Network tab, fill in the form and send it. The page thanks you. Now open leads.json. Collect three pieces of evidence: the line for your form in the Network tab with its status number, the lines the server printed in its terminal, and the contents of leads.json. Put all three in your brief, cause first. After the fix, restart the server (Control+C stops it), reload the page, submit, and check leads.json.
5. For project 3, ask one more question before accepting the fix:

After your fix, what will a visitor see if the server fails for some other reason? Show me where the code handles that.

1. When all three work, commit: checkpoint please, message "Lesson 1.5: three problems diagnosed and fixed".
2. Compare your three sentences with the answer sheet in the materials.

Check your work

1. Open 1-visual/index.html in a half-width window. Expected: all three cards fully visible, no sideways scrolling.
2. Open 2-crash/index.html with the console open. Expected: no red error; clicking Calculate shows an estimated price.
3. With node server.js running, submit the form in project 3. Expected: the Network tab shows the request with a status starting with 2; the server terminal prints a line ending in 201; leads.json contains the name and email you entered.
4. Open practice/broken/CAUSES.md. Expected: three causes, one sentence each, that you could say aloud without reading.
5. Run git status. Expected: nothing to commit.

Common problems

• No red error in the console for project 2. → You are on the wrong tab, or the tools were opened after the page loaded. → Choose Console, keep the developer tools open and reload the page.
• Project 3: the browser says the site cannot be reached. → The server is not running, or you opened the HTML file directly. → Run node server.js in practice/broken/3-silent/ and open the address it prints.
• Project 3: node server.js fails with an "address already in use" error. → An earlier copy of the server is still running. → Close the terminal where it runs, or paste the exact error to Claude and ask for the cause.
• Claude fixed the problem although you asked for the cause only. → The constraint was missing or unclear. → Restore the folder to the last commit and send the request again with "Do not change any file yet."
• Claude's explanation does not match your evidence. → Say so: "That does not explain why [the thing you saw]. Look again."

Homework

About 30 minutes, after the lesson. Nothing later depends on it. Start with everything committed. New files go in practice/homework/1.5/; at the end, commit with checkpoint please and the message "Homework 1.5" (no tag).

1. Roll-back drill. Ask Claude for a deliberately bad change: "In practice/broken/1-visual/, make each card 900 pixels wide. Change nothing else." Look at the page. Then say: "Restore every file under practice/broken/1-visual/ to the last commit." If you like, repeat it and go back with /rewind instead. Done when: the page looks as it did after your fix, and git status shows nothing to commit.
2. A mystery bug. Send the prompt below, type /clear, then run the whole routine on the copy: reproduce, evidence, cause first, fix, verify. Done when: the calculator in mystery/ works, and practice/homework/1.5/CAUSES.md states the cause in one sentence.

Purpose: I want to practise diagnosing a problem I have not seen before.

Context: Copy practice/broken/2-crash/ to practice/homework/1.5/mystery/.

Done looks like: The copy has one new bug of a different kind from the original one, and the calculator in it no longer works correctly.

Constraints: Change only the copy. Do not tell me what the bug is or where it is, and leave no comment in the files that gives it away.

1. Where would I look? In where-to-look.md, list five things that could go wrong for a visitor on your own future site, such as "the form says thank you but I get no email". For each, write which place you would check first: terminal, console, Network tab, server log or a screenshot. Done when: five lines, each naming one place.