Debugging AI Code — When Your Vibe Coded App Breaks
Your AI-built app just broke. Here's how to find the problem and fix it — without starting over.
What Is Debugging?
Debugging is the process of finding why something in your app isn't working and fixing it. When you write code yourself, you debug your own mistakes. When you use vibe coding, you're debugging what the AI built — which is a different skill, but not a harder one.
Here's the key thing: the AI is like a very fast junior developer who doesn't always read your mind. It builds what it thinks you asked for. Sometimes that's right. Sometimes it's close. Sometimes it's completely off. Debugging is how you close that gap.
You don't need to know how to write code from scratch to debug. You just need to be able to read what's there, understand what went wrong, and describe the fix to the AI. That's it.
AI Code Breaks — That's Normal
One of the biggest surprises for new vibe coders is that AI-built apps break. A lot. This isn't because you're doing something wrong — it's just how it works. AI generates code based on patterns it has seen, and it can miss important details about your specific situation.
What separates good vibe coders from frustrated ones isn't their ability to write code. It's their ability to debug. When you can quickly spot what's wrong and describe it clearly to the AI, you fix things in minutes instead of hours.
💡 Key Insight
Most vibe coding beginners give up too soon — not because the problem is hard, but because they don't know how to read the error message. Learning to read errors is the single most valuable debugging skill you can develop.
The Debugging Steps
Here's a simple four-step process for debugging any vibe coded app. You don't need to know programming — just follow these steps and describe what you find to the AI.
Step 1 — Read the Error
When something breaks, the browser shows a red error message. It looks scary but it's just describing what went wrong. Look for the last line — it usually says what kind of problem it is (a missing part, a typo, something not found).
Step 2 — Copy the Error
Click on the error message and copy it. Then paste it into your AI tool with a short explanation of what you were trying to do. The AI can usually tell exactly what's broken from the error text alone.
Step 3 — Describe the Fix
If the error message isn't enough, describe what happened: "I clicked the button and nothing appeared" or "The page shows a blank white screen." The more specific, the better. Tell the AI what you expected vs. what actually happened.
Step 4 — Test Again
After the AI makes changes, test the app again. Does it work now? If not, go back to step 1. Debugging is often a loop — you fix one thing, find another, fix that, and keep going until everything works.
Fixing a Broken Button
Let's say you asked the AI to build a login form with a username field, a password field, and a "Log In" button. The AI built it, but when you click the button, nothing happens. Here's how you'd debug it:
Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLButtonElement.<anonymous> (app.js:15)
That error says: "I tried to add a click listener to something, but it was empty — nothing was there." This usually means the JavaScript ran before the page finished loading, so the button didn't exist yet. Here's what you'd say to the AI:
The login button doesn't work. I get this error: "Cannot read property 'addEventListener' of null" The JavaScript is running before the button exists on the page. Move the script tag to the bottom of the body, just before </body>, so the page loads first.
The AI will fix it — usually by moving the script or wrapping the code in a "wait for page load" command. That's one bug, fixed in under a minute, just by reading an error and describing it.
Knowledge Check
Test what you learned with this quick quiz.