Day 15 of 28 · Vibe Coding Challenge
Debugging with AI
⏱ 7 min
📊 Intermediate
Things will break. Buttons won't click. Pages will show errors. Data will disappear. This isn't a failure — it's a normal part of building software.
The difference with vibe coding: you don't suffer alone. You have an AI partner that can find and fix bugs in seconds.
The three types of bugs
Visual bugs — Something looks wrong. The layout is broken. Elements overlap. Colors are off. Spacing is weird on mobile.
Functional bugs — Something doesn't work. The button doesn't do anything. The form doesn't submit. Data doesn't save.
Logic bugs — Something works, but incorrectly. The total is wrong. The filter shows the wrong results. Users can access pages they shouldn't.
Each type needs a different debugging approach — but AI handles all three.
Knowledge Check
A user says "I submitted the form but nothing happened." What type of bug is this?
A
Not a bug — forms are supposed to do that
C
Functional bug — the form isn't performing its intended action
The form exists and looks correct (not visual), but it doesn't perform its action (functional bug). This is different from a logic bug where the form submits but sends the wrong data.
The magic phrase: "It's broken"
When something breaks, most people freeze. They don't know where to start. With AI, you start with the simplest possible approach: tell the AI what's wrong.
The login form doesn't work. When I click "Log In" nothing happens. No error message, no redirect, just nothing.
I found the issue. In `LoginForm.tsx` on line 34, the form's `onSubmit` handler is calling `handleLogin()` but the function is defined as `async` without an `await` on the Supabase auth call. The auth response is being lost.
Fixed:
- Added `await` to the `supabase.auth.signInWithPassword()` call
- Added error handling — wrong credentials now show "Invalid email or password"
- Successful login now redirects to /dashboard
Try logging in again.
↻ Replay conversation
Describe the bug, AI finds it and fixes it — often in seconds.
Happy to help! The missing `await` is one of the most common bugs in async code. Easy to miss, hard to spot without running the code.
↻ Replay conversation
Knowledge Check
What information did the user need to provide to fix the login bug?
A
The programming language and framework version
B
A screenshot of the code
C
The exact line of code that was broken
D
Just a description of what happened — "the login form doesn't work, nothing happens when I click"
You don't need to diagnose the problem. You just need to describe the symptoms. "What did you expect to happen?" vs. "What actually happened?" — that's all the AI needs to start investigating.
Error messages are your friends
When your app shows an error message, don't panic. Copy it and paste it to the AI. Error messages are usually very specific about what went wrong.
I'm getting this error: "TypeError: Cannot read properties of undefined (reading 'map')" on the dashboard page.
This error means your code is trying to loop through something that doesn't exist yet. Found it in `Dashboard.tsx` line 18:
`tasks.map(task => ...)` — but `tasks` is `undefined` when the page first loads (before the API response comes back).
Fixed:
- Added a loading state that shows a spinner while data is fetching
- Added a null check: `tasks?.map(...)` so it won't crash if tasks is briefly undefined
- Added an empty state: "No tasks yet" if the array is empty
The dashboard now handles all three states: loading, empty, and populated.
↻ Replay conversation
Knowledge Check
When you get an error message, what should you do first?
A
Google the error yourself and try to fix it
B
Ignore it and refresh the page
C
Copy the error message and paste it to the AI — it can usually identify and fix the issue immediately
D
Delete the file and start over
Error messages contain specific information about what went wrong and where. AI models have seen millions of error messages and know exactly what causes them. Paste the error, get a fix. It's the fastest debugging loop.
The debugging conversation
Sometimes bugs need investigation. Here's how to have a productive debugging conversation with AI:
Step 1: Describe the symptom. "The sidebar disappears on mobile."
Step 2: Provide context. "It works on desktop. It also worked before I added the new header component."
Step 3: Share relevant code. If the AI is using Cursor or Claude Code, it can see your files. If you're in a chat tool, paste the relevant component.
Step 4: Verify the fix. After the AI makes changes, test the specific scenario that was broken. Don't just assume it worked.
The pricing cards are showing as $0 for all tiers. They were working yesterday. I haven't changed the pricing component.
Let me check what changed... Found it. In yesterday's commit, the API response format changed. The pricing data used to be `response.data.prices` but it's now `response.data.plans[].price`.
The pricing component was reading the old format and getting undefined, which displays as $0.
Fixed the data mapping in `PricingSection.tsx`. Prices now show correctly: Free ($0), Pro ($29), Enterprise ($99).
How did that change happen if I didn't touch the pricing?
When I updated the API endpoints yesterday (for the user dashboard feature), I restructured the response format for consistency. The pricing endpoint changed from flat to nested format, but I didn't update the pricing component to match.
This is called a "regression" — fixing one thing accidentally breaks another. I've now updated both the API and the component so they're in sync.
↻ Replay conversation
Knowledge Check
What is a "regression" bug?
A
A bug that gets worse over time
B
A bug introduced by fixing or changing something else — code that used to work stops working
C
A bug that only appears on older browsers
Regressions are common, especially in AI-assisted coding where changes can ripple across files. That's why testing after every change is important — you want to catch regressions immediately, before they compound.
Prevention beats debugging
The best bugs are the ones that never happen. These habits prevent the most common issues:
Test after every change. Don't make five changes and then test. Make one change, verify it works, then make the next.
Be specific in your prompts. Vague prompts lead to assumptions. Assumptions lead to bugs.
Ask the AI to handle edge cases. "What happens if the list is empty? What if the user has no profile picture? What if the API is slow?" These are the scenarios that cause bugs in production.
Final Check
What's the most effective debugging strategy for vibe coders?
A
Delete everything and start over
B
Describe the symptom to the AI, provide context, and let it investigate and fix the issue
C
Ignore bugs and hope users don't notice
D
Spend hours reading the code yourself
Your AI coding partner can investigate, identify, and fix bugs faster than you can Google the error message. Describe what's wrong, share the context, and let the AI work. That's the vibe coding debugging loop.
🐛
Day 15 Complete
"Bugs aren't failures — they're conversations. Describe the symptom, let AI find the fix."
Tomorrow — Day 16
Refactoring AI Code
AI code works, but is it good? Tomorrow you'll learn to improve AI-generated code — making it cleaner, faster, and more maintainable.