When AI's code breaks: a debugging primer

Breaking is normal

AI-written code isn't always right the first time — that's not on you, it's normal. The difference is that people who can debug get it fixed, while those who can't just keep telling the AI to "try again" and make it messier. Debugging is a learnable, systematic method, not inspiration.

Step 1: read the error message (don't skip it)

When something breaks, the screen or the browser's Console usually shows a red error. The most common beginner mistake is to panic at the red text and immediately paste it to the AI saying "it's broken." Read it first: the error often tells you exactly which file, which line, what problem. Not understanding it is fine — but capture it in full.

Step 2: narrow it down (bisection)

Don't stare at the whole program at once. Ask: "When did it last work? What did I change?" Cut the suspect range in half — remove or comment out a suspicious section and see if it still breaks. Once you can reproduce it reliably in a small range, it's easy to catch.

Step 3: feed the right clues back to the AI

When the AI can't fix it, it's usually because you gave it too little. Give all three at once and the hit rate jumps:

• The full error message (the whole thing, not "it broke").
• Reproduction steps: what you did to trigger it, what you expected, what actually happened.
• What you've already tried: so the AI doesn't repeat what already failed.

Common traps

• Changing too much at once: when it breaks, you can't tell which change caused it. Change one thing, then test.
• Not opening the Console: many errors only show in the console while the screen "just looks off."
• Endless "try again": when the AI can't fix it repeatedly, step back, narrow it yourself, and give fresh clues — that beats retrying.

Next steps

• Save a version before you change things, so you can roll back: Manage your code with Git
• To collaborate better with AI: see the collaboration playbook