Chapter 9: What to Do When You Encounter Bugs? Debugging Mindset and Leveraging Multiple AIs

During Vibe Coding, while AI is incredibly smart, the code it generates won't be 100% perfect. Sometimes the layout breaks, sometimes buttons don't respond when clicked, and worst of all - when the terminal spits out a long string of terrifying red error messages. When problems arise, many beginners feel frustrated and even want to give up.
But remember: Don't panic when you encounter bugs - this is when you improve the fastest, and it's the critical moment that separates you from average coders!

This chapter will teach you the "debugging mindset" of senior engineers, and when your editor AI starts going in circles, how to break the deadlock through "cross-examination with multiple AIs".

🧐 Step 1: Locate the Crime Scene (Console and Terminal)

To fix a car, you first need to see where the smoke is coming from. When a webpage breaks, there are two "crime scenes" you must immediately check:

Frontend Battlefield: Browser Developer Tools (F12) -> Console Tab
- This records all disasters happening in the user's browser.
- Examples: Failed API calls (CORS errors), undefined React variables (undefined is not a function), or broken image links (404 Not Found).
- Press F12 (or right-click and select "Inspect"), switch to the Console tab, and look for red error messages.
Backend Battlefield: VSCode/Cursor's Terminal
- This records errors from the server and compiler.
- Examples: Missing npm packages (Module not found), database connection failures, or syntax errors preventing the site from running (Syntax error).
- Open the Terminal window at the bottom of your editor to check for red text.

When you see dense red text, don't be intimidated by the English. Stay calm and look for lines containing Error:, Exception, or file paths (e.g., src/app/page.tsx:15:2) - these are the key clues to solving the case!

🗣️ Step 2: The Art of Asking Questions (Context is King!)

If you just tell the AI: "My webpage is broken, login doesn't work, what do I do?", the AI can't help you - it can only make wild guesses.
In Vibe Coding, Context is everything! You need to provide the AI with complete evidence from the crime scene so it can play detective and solve the case.

🔥 [Best Debugging Prompt Template for Vibe Coding] I'm developing a Next.js project, currently implementing login functionality in src/components/AuthForm.tsx.

When I click the login button, nothing happens on the screen, and the browser Console shows this error:
(Paste the complete red Error Message string, including the stack trace)
TypeError: Cannot read properties of undefined (reading 'signInWithPassword')
    at handleLogin (AuthForm.tsx:24:43)
Here's my complete current code in AuthForm.tsx:
(Select and paste your complete code)
Where is the issue? Please explain the reason and provide the complete corrected code.

With such clear clues, the AI can usually pinpoint the problem within seconds: maybe you forgot to import the Supabase client, or there's a typo in your variable name.

🤖 Step 3: When the AI Starts Going in Circles (AI Hallucination)

Sometimes you'll encounter a frustrating situation: the AI in your editor starts "going in circles".
It says: "Sorry, I found the issue, please change this line to A."
You change it to A, but the error persists. You show it the error again, and it says: "Sorry, my mistake, please change it back to B."
You revert to B, but the error remains. This loops endlessly.

This happens because the AI's conversation history (Context Window) is too long. It gets trapped by previous incorrect deductions, "forgetting" the original goal or developing a logical blind spot (AI hallucination).

Solution: Get a second opinion!
Just like seeing a doctor, when one doctor can't cure you, it's time to consult another.

Method 1: Reset the Conversation (New Chat)
In Cursor, start a brand new chat. Present your goal, current code, and latest error message as a fresh case, allowing the AI to rethink without interference from previous misconceptions.
Method 2: Cross-Examination (Bring in External Experts Claude/ChatGPT)
- Open web versions of Claude (currently recommended: Sonnet 3.5) or ChatGPT (GPT-4o).
- For frontend layouts and complex React state logic, Claude 3.5 Sonnet currently outperforms other models.
- Paste your code and error message to Claude with: "My other AI assistant couldn't fix this bug. Their suggestion was XXX, but I'm still getting error YYY. As a senior architect, can you identify the blind spot?"
- Usually, the external AI can immediately spot what the editor AI missed, providing a completely different yet effective solution.

💼 [Business Application] Error Messages Are Client Needs

Learning to debug isn't just about solving your own problems - it's a monetizable hard skill.
In freelance markets or enterprise maintenance, many legacy systems suddenly throw strange errors. Traditional engineers might spend two days digging through source code to find the issue.

When you master this Vibe Coding debugging approach of "collecting Errors -> providing Context -> cross-examination", you can take on those messy debugging projects others can't fix. While others spend two days, you just need two hours to set up the environment, have dual AIs analyze it, identify and fix the issue - easily earning what would be two days' wages.

Your debugging capability determines your project stability and clients' trust in you.
Next chapter, we'll introduce the finale of this course: how to master your IDE and unleash 100% of AI's ultimate potential!

Common Issues & Solutions

| Problem | Cause | Solution | |---------|-------|----------| | Unexpected results | Wrong parameters | Check defaults and edge cases | | Slow execution | Inefficient algorithm | Use better data structures | | Out of memory | Too much data | Use batch processing | | Hard to debug | No logging | Add detailed logging |

Further Learning

Read official documentation
Browse open-source examples on GitHub
Join community discussions
Practice by modifying code and observing results