Debugging AI-Written Apps: Read the Error, Ask for the Right Fix

Learn where errors hide, how to read status codes and logs, and a 5-step process to escape the endless fix loop when vibe coding.

You press "Save" and nothing happens. No warning, and the data never reaches the database. You tell the AI, "It doesn't work, please fix it." The AI says it has fixed it, but nothing changes. Three or four rounds later you are frustrated. The problem is not that the AI cannot fix things. It cannot see what you see, and you have not yet sent it the "evidence" it needs.

What does debugging mean in vibe coding?

Debugging is the process of finding out why a program does not behave as intended and fixing the root cause. In vibe coding, your role is not to edit code but to be a detective who collects evidence for the AI. The more precise the evidence, the more likely the AI fixes it in one round.

Where errors hide

1. The preview

Many tools show an error box on the preview when code breaks. That message is the best starting point. Copy all of it, not just the first line.

2. The browser console

Press F12, or right-click and choose Inspect, then open the Console tab. Red messages are front-end errors and usually name the file and line where the problem occurred.

3. The Network tab

In the same developer tools, the Network tab shows every request the page sends to the server. Click the broken button and look for red requests. The status code points you in a direction immediately:

• 400: the data sent was in the wrong format
• 401: the system does not know who you are, usually a login issue
• 403: it knows who you are, but you lack permission, often a policy or RLS issue
• 404: what you asked for was not found, such as a wrong table name or URL
• 500: the server itself failed, so check the backend logs

4. Backend logs

If you use a database or server functions, there is usually a log viewer. Messages such as "permission denied" or "violates row-level security policy" make it clear the problem is permissions, not the screen.

Learn to read an error

Most error messages have three parts: the type (for example TypeError), the description (for example cannot read properties of undefined) and the location (file and line). You do not need to understand every word. Ask the AI, "Explain this error in simple terms: what caused it?" before asking for a fix. Over time you will recognise common patterns yourself.

A 5-step process to escape the fix loop

1. Reproduce it: write down the steps that cause the problem. If you cannot reproduce it, you cannot fix it yet
2. Collect evidence: the full error, the status code from Network, a screenshot
3. Ask for a diagnosis first: "Based on this evidence, what are the possible causes, most likely first? Do not fix anything yet."
4. Fix one thing at a time: pick the most likely cause, fix only that, then test with the same steps
5. If it persists, roll back: return to the version before the fix and try the next cause. Do not stack fixes until you no longer know what changed

Example: an online clothing shop cannot save orders

The owner of an online clothing shop in Hat Yai builds a page for admins to record orders from chat. One day, pressing Save does nothing. She opens the Network tab and finds a red request with status 403 and a message about violating a row-level security policy. She sends this to the AI and adds: "Logged-in admins must be able to add orders. Regular customers must not." The AI explains that the orders table has a policy allowing reads but none allowing inserts, and adds an insert policy for the admin role only. Fixed in one round, after many rounds of just saying "it doesn't work when I click".

Do not tell the AI "it's broken". Tell it "here is the evidence of how it's broken".

Things to watch out for

• Before pasting logs or screenshots, check they contain no tokens, API keys or real customer data
• If the AI suggests disabling RLS, removing permission checks or deleting tests to make the error go away, that hides the problem rather than fixing it
• Be careful about letting the AI delete or change data in a real database while debugging. Always use test data

What to do next

1. Open the Console and Network tabs in your app today, even with no bugs, to get familiar with them
2. Create a bug report template: steps, expected, actual, evidence
3. Each time a fix works, jot down the cause. It becomes your personal handbook

To get precise fixes from the very first prompt, read Prompt Patterns for Vibe Coding. To practise with a tool that can run commands and read errors itself, try the course Claude Code 101 for beginners on Plants.work.