2.4 The Debug Loop

Time: ~25 minutes

What You'll Learn

• The four-step debug loop that works every time
• How to diagnose problems before asking AI
• How to verify fixes instead of blindly accepting them
• Common debugging patterns for vibe coders

The Debug Loop

Every experienced developer, whether they realize it or not, follows the same process when something breaks. Here it is, adapted for vibe coders:

Step 1: Read the Error

Don't panic. Don't immediately paste it to AI. Read it first.

• What's the error type? (Syntax, Type, Reference, Network?)
• What file and line is it pointing to?
• What operation failed?

You learned this in lesson 1.4. Now it's time to use it as a habit.

Step 2: Understand the Context

Before asking AI for help, gather context:

• What were you doing when it broke? (What did you last change?)
• Can you reproduce it? (Does it happen every time or randomly?)
• What should be happening instead?

Step 3: Give It to AI (With Context)

Now bring in AI, but give it everything it needs:

Error: [paste the error]
File: [the file it points to]
What I changed: [your recent changes]
What should happen: [expected behavior]
Here's the relevant code: [paste the code around the error]

Step 4: Understand the Fix

This is the step most vibe coders skip. When AI gives you a fix, don't just paste it in. Ask yourself:

• What was wrong?
• Why does this fix work?
• Could this same problem happen elsewhere?

If you can't answer these questions, ask AI to explain:

Before I apply this fix, explain what was wrong and why your change fixes it.

The Loop in Practice

Let's walk through a real example:

The Error

TypeError: Cannot read properties of null (reading 'email')
    at Dashboard (src/pages/dashboard.tsx:15:28)

Step 1: Read It

• Type: TypeError
• What failed: Tried to read .email from something that's null
• Where: dashboard.tsx, line 15

Step 2: Context

You just added user profile data to the dashboard. The page crashes when you first load it.

Step 3: Give to AI

I'm getting TypeError: Cannot read properties of null (reading 'email') on line 15 of src/pages/dashboard.tsx. This happens when the dashboard first loads. I'm fetching user data from /api/user and trying to display user.email. Here's the component: [paste code]

Step 4: Understand

AI says: "The user data is null on the first render because the API call hasn't completed yet. Add a loading check before accessing user properties."

Understanding: The component renders before the data arrives. I need to handle the loading state. This could happen anywhere I fetch data and immediately try to use it.

Now you'll never make this exact mistake again.

Debugging Without Errors

Sometimes things break without throwing an error. The page loads but something is wrong. Here's how to debug those:

The Blank Screen

Something is rendering but nothing shows up.

1. Open browser dev tools (right-click, Inspect)
2. Check the Console tab for errors
3. Check the Elements tab -- is the HTML there but hidden?
4. Check the Network tab -- did the data load?

The Wrong Data

The page shows data but it's wrong or stale.

1. Check the Network tab -- what did the API actually return?
2. Console.log the data right before you display it
3. Is the data being transformed somewhere between the API and the display?

The Infinite Loop

The page freezes or keeps re-rendering.

1. This is usually a useEffect with bad dependencies or a state update inside a render
2. Check for state updates that trigger re-renders that trigger more state updates
3. Tell AI: "My component is re-rendering infinitely. Here's the code: [paste]"

The Works-Locally-But-Not-In-Production Bug

1. Check environment variables -- are they set in production?
2. Check API URLs -- are they pointing to the right environment?
3. Check the production logs (Vercel, Netlify, etc.)
4. Most common cause: missing environment variables

The Debugging Mindset

Good debugging is less about tools and more about mindset:

1. Reproduce first, fix second

Before trying to fix something, make sure you can reliably make it happen. If you can't reproduce it, you can't verify the fix.

2. Change one thing at a time

If you change three things and the bug goes away, you don't know which change fixed it. Worse, the other two changes might introduce new bugs.

3. Binary search for bugs

If something worked before and doesn't now, figure out when it broke:

• What was the last change that worked?
• What was the first change that broke?
• The bug is in that range

This is where good Git habits (lesson 1.6) pay off. You can check out earlier commits to find exactly when things broke.

4. Rubber duck debugging

Explain the problem out loud (or in writing). The act of explaining often reveals the answer. Your AI is the ultimate rubber duck -- explaining the problem to it often helps you solve it before it even responds.

Practice

Next time you encounter a bug:

1. Resist the urge to immediately paste to AI
2. Read the error for 30 seconds
3. Gather context (what changed, what should happen)
4. Give AI the full picture
5. Ask AI to explain the fix before you apply it

Do this five times and it will become a habit.

Key Takeaways

• The debug loop: Read, Context, AI, Understand
• Don't skip the "understand" step -- it prevents repeat bugs
• Gather context before asking AI for help
• For no-error bugs, use browser dev tools (Console, Elements, Network)
• Change one thing at a time and reproduce before fixing

Course Complete

You've made it through the entire Vibe Coder's Survival Kit. Here's what you now have:

Fundamentals:

• How the web works (HTML, CSS, JS)
• File structures and why they matter
• Reading error messages like a pro
• APIs and data flow
• Git and version control

Best Practices:

• Prompting for code effectively
• Knowing when to accept vs push back
• Keeping projects structured as they grow
• A repeatable debug loop for fixing anything

These aren't theoretical skills. They're the practical foundations that let you build bigger, more ambitious things with AI -- and actually ship them.

The best way to solidify everything you've learned is to apply it to a real project. Pick something you want to build and use these skills from the start. You'll be surprised how much more confident you feel.

Happy building.