Programming · Lesson 6 of 7
Debugging with AI
Broken code is not a failure. It's the most normal thing in programming.
After This Lesson, You Will Be Able To
Debug a broken piece of code using AI — by learning what to paste, how to describe the problem, and how to apply the fix.
Why Code Breaks (and Why That's Normal)
AI has made this process dramatically faster. What used to take an hour of Stack Overflow searching now takes 2 minutes with Claude.
The 4-Step AI Debugging Process
Step 1: Get the exact error message
Open your browser's developer console (F12 or right-click → Inspect → Console). Find the red error message. Copy it exactly — don't paraphrase. The error message contains the specific information Claude needs to diagnose the problem.
Step 2: Paste code + error into Claude
Paste the error message AND the relevant code into Claude. Say: 'This is the error I'm getting: [error]. Here is the code: [code]. Explain what's causing the error and how to fix it.' More context = better diagnosis.
Step 3: Understand the fix before applying it
Before copying Claude's fix, read the explanation. Ask if you don't understand: 'Why did this cause the error and why does your fix solve it?' Blindly applying fixes without understanding them leads to the same bugs recurring.
Step 4: Test thoroughly after the fix
After applying a fix, test the specific thing that was broken AND everything else around it. Fixes sometimes break adjacent functionality. Test the whole flow, not just the fixed line.
Common Error Types and What They Mean
ReferenceError
'variableName is not defined' — you're using a variable that doesn't exist. Either you misspelled it, forgot to declare it, or you're trying to use it in the wrong part of the code.
TypeError
'Cannot read properties of undefined' — you're trying to use a variable that exists but has no value yet. Usually happens when data is loading asynchronously (from an API) but you're trying to use it before it arrives.
SyntaxError
A typo in your code — a missing bracket, comma, or quote. Claude can spot these instantly by looking at the code.
Exercise
~10 minutes · ChatGPT or Claude
Prompt to use
I have a bug in my code. Here's the error message from my browser console: [paste exact error]. Here's the relevant code: [paste code]. What I was trying to do: [describe expected behavior]. What is actually happening: [describe the broken behavior]. Please: 1) Explain what is causing this error in plain language, 2) Show me the fixed code, 3) Explain why your fix works so I understand it and don't make the same mistake again.
Debugging is where you actually learn to code. Every error message is a lesson. What's the error you've been avoiding fixing in your current project?
Key Takeaways
Broken code is normal. A fast debugging process is the skill, not never having bugs.
Always provide the exact error message AND the code when asking Claude for debugging help.
Understanding the fix is as important as applying it. Ask Claude to explain why the error happened.
Test the full flow after any fix — not just the specific line that was changed.
Intentionally break your app and then fix it.
Open your app's code. Delete one important line of JavaScript or change a variable name to something wrong. Save and open in your browser — see the error. Open the console to see the error message. Paste the error and code into Claude. Fix it. Do this 3 times with different lines. After 3 rounds of intentional break-and-fix, you'll be much less afraid of real bugs.
Next Lesson
Deploying Your App
Programming · Lesson 7 of 7 · 10 min