Debugging AI-Generated Code

Things will break. That’s not a failure of vibe coding — it’s a normal part of building software. The difference between someone who gives up and someone who ships is knowing how to fix things quickly.

This lesson teaches a systematic approach to debugging AI-generated code, even if you don’t fully understand the code itself.

🔄 Quick Recall: In the previous lesson, you built a complete app step by step, committing after each feature. Those commits become your safety net in this lesson — you can always roll back to a working state.

The Debugging Mindset

When something breaks, resist two urges:

1. Don’t panic and start over. The problem is usually one small thing.
2. Don’t paste “fix it” without context. You’ll get a guess, not a fix.

Instead: read the error, understand what broke, and give the AI specific information.

Step 1: Read the Error

Most errors tell you exactly what’s wrong. You just need to find them.

Browser Console Errors

Open your browser’s developer tools (F12 or right-click → Inspect → Console):

How to Share Errors with AI

Bad:

“My app is broken”

Good:

“When I click the ‘Add Bookmark’ button, the browser console shows: TypeError: Cannot read property 'map' of undefined at line 42 in BookmarkGrid.jsx. The error started after I added the tag filtering feature.”

Include: what action triggers the error, the exact error message, which file and line, and what change caused it.

✅ Quick Check: The browser console shows ReferenceError: tags is not defined at line 15. Without looking at the code, what’s likely the problem? (Answer: Line 15 uses a variable called tags that was never created or imported. The AI probably referenced a variable from a different file without importing it, or renamed it during a refactor. The fix is to find where tags should come from and import or define it.)

Step 2: The Rollback Strategy

If you committed after each feature (as taught in the previous lesson), you have checkpoints:

Commit 1: Layout ✓ (working)
Commit 2: Add bookmarks ✓ (working)
Commit 3: Tag filtering ✓ (working)
Commit 4: Search ✗ (broke something)

Roll back to Commit 3. Your layout, bookmarks, and tags still work. Now try the search feature again with a fresh approach.

In a code editor (Cursor/Claude Code):

git log --oneline       # see your commits
git checkout [commit]   # go back to a working state

In Lovable/Bolt.new: Use the built-in version history to restore a previous working version.

Rule of thumb: If you’ve spent 15 minutes debugging and it’s getting worse, roll back. It’s faster to redo one feature from a working state than to untangle cascading bugs.

Step 3: The Fresh Conversation Fix

When the AI keeps making things worse, the problem is often context poisoning:

1. The AI made an error in message 5
2. Messages 6-10 reference the error as if it’s correct
3. Every “fix” is building on a broken foundation

Solution: Start a brand new conversation. Include:

I'm building a bookmark manager with [tech stack].
Here's my current working code: [paste relevant file or describe the state]
I need to add search functionality.
Previous attempt broke the tag filtering. Here's the error I was getting:
[paste error]
Please implement search WITHOUT modifying the tag filtering logic.

The fresh context means the AI doesn’t carry forward any previous confusion.

✅ Quick Check: You’ve been debugging in the same AI conversation for 20 messages. Each fix creates a new problem. What should you do? (Answer: Stop. Start a fresh conversation. The current conversation is poisoned — the AI is building on a chain of errors. Roll back to your last working commit, start a new chat, and describe the feature you want with only relevant context.)

Common Vibe Coding Bugs

The Debugging Prompt Template

When asking AI to fix something, use this structure:

BUG REPORT:
What I expected: [describe desired behavior]
What actually happens: [describe the actual behavior]
Error message: [paste exact error from console]
File and line: [if visible in the error]
When it started: [what change introduced the bug]

IMPORTANT: Only modify the code needed to fix this bug.
Do not refactor or change unrelated code.

The last line is critical — without it, the AI might “helpfully” refactor working code while fixing the bug, creating new problems.

When to Ask for Help

If you’ve tried:

1. Reading the error
2. Rolling back
3. Fresh conversation with specific context
4. The bug still persists

It might be a genuine complexity issue. Options:

• Search the error message online (someone has probably encountered it)
• Ask in a community forum (r/webdev, Discord servers, Stack Overflow)
• Consider if the feature needs a different technical approach

Practice Exercise

1. Build a simple counter app (button that increments a number)
2. Ask the AI to add a “reset” button — but deliberately give a vague prompt
3. When it produces something unexpected, practice the debugging cycle: read error → describe bug → fix
4. Try breaking the app by asking for a conflicting feature, then practice rollback
5. Start a fresh conversation and fix the issue cleanly

Key Takeaways

• Always read the actual error message before asking AI to fix something
• Include specific context: what you expected, what happened, the error, and what change caused it
• Roll back to your last working commit after 15 minutes of unsuccessful debugging
• Start fresh conversations when context is poisoned (multiple failed fix attempts)
• End every fix prompt with “Only modify what’s needed for this fix — don’t change unrelated code”
• The browser console and version control are your two most important debugging tools

Up Next

In the next lesson, you’ll learn to take your vibe-coded prototype and make it production-ready — handling the gap between “it works on my machine” and “it works for real users.”