You didn't write the code, but you can still fix it. The debugging loop, reading error messages, and knowing when to escalate.
The stack trace screams but you don't speak its tongue, Paste the whole thing in — let the agent get it done. You ain't the author but you're still in the chair, Debug the vibe, or debug the despair.
I Debugging Is Different Now
Traditional debugging has a prerequisite that nobody talks about: you wrote the code. You remember why that function exists, what the variable name means, what edge case prompted that weird conditional on line 47. When something breaks, you retrace your own steps. It's archaeology of your own thinking.
Vibe-coded projects don't give you that luxury. You described what you wanted, the agent built it, and now something is broken in code you've never read. You're debugging someone else's work — except that someone else is available 24/7 and has perfect recall of every line it wrote.
This is the counterintuitive unlock: the same agent that wrote the code is often the best debugger of that code. It doesn't forget what it built. It doesn't get tired of reading stack traces. And it's seen thousands of variations of whatever error you're staring at. Andrej Karpathy hasn't typed code since late 2025 — and when his agent-delegated builds break, he's said the failure is always a skill issue on the human side: unclear instructions, missing memory, poor parallelization. Never a capability ceiling on the agent.
That's both liberating and demanding. Liberating because you don't need to become a software engineer to fix things. Demanding because you doneed to become good at describing problems, reading signals, and knowing when you're out of your depth.
Key Insight
Debugging with an agent isn't about understanding the code. It's about understanding the problem. You don't need to know why line 142 throws a TypeError. You need to know what you were trying to do, what happened instead, and what the error message says. The agent handles the rest — if you give it the right inputs.
II The Debugging Loop
If you've read the Agents series, the debugging loop will feel familiar. It's the think-act-observe cycle applied to your own broken code:
You describe the error. What were you doing? What happened? What did you expect instead? Paste the full error message.
The agent reads code + error. It examines the relevant files, the stack trace, the surrounding context.
The agent proposes a hypothesis."The API endpoint changed its response format" or "The environment variable isn't set in production."
You verify. Does the hypothesis match what you see? Can you reproduce it? Does the proposed fix make sense?
The agent fixes.It writes the patch, you test it. If it works, you're done. If not, loop back to step 1 with new information.
The most important step is the first one. The quality of the fix is directly proportional to the quality of your error report."It doesn't work" gives the agent nothing. "When I click Submit on the checkout page, I get a white screen and the console shows 'TypeError: Cannot read properties of undefined (reading map)' at line 84 of CartSummary.jsx" gives it everything.
Builder Tip
Paste the full error. Always.New builders instinctively paraphrase error messages: "it says something about a missing module." Don't. Copy the entire error — every line, every path, every number. The parts that look like meaningless noise to you are the parts the agent uses to pinpoint the problem. A full stack trace is worth a thousand descriptions.
The loop typically converges in one to three cycles. If you're on cycle four and still stuck, it's a signal — either the problem is outside the agent's view (an environment issue, a missing API key, a deployment configuration) or the problem is complex enough to need a human engineer. We'll cover how to tell the difference in Section V.
III Reading Error Messages
Error messages are written by engineers for engineers. If you're a builder without a CS background, they look like encrypted transmissions from a hostile civilization. But they follow a pattern, and the pattern is learnable.
Every error message has three parts, and you need exactly zero programming knowledge to identify them:
The error type— the first capitalized phrase, usually ending in "Error." TypeError, ReferenceError, ModuleNotFoundError, 404 Not Found. This is the category of what went wrong. You don't need to understand it — but the agent does, and it narrows the search space immediately.
The message— the human-readable sentence right after the type. "Cannot read properties of undefined" or "No module named 'flask'." This is the what. It tells you (and the agent) what specific thing failed.
The file and line number — the path that tells you where the error happened. src/components/Cart.jsx:84 means line 84 of the Cart component. The top of the stack trace is where the error surfaced, but it's not always where the bug lives. The agent reads the full trace to find the root cause, which might be several files deeper.
You don't need to memorize error types. You need to know that they exist and that the agent needs them. Think of yourself as a paramedic relaying vitals to the ER doctor — you don't need to diagnose the condition, but you do need to read the numbers off the monitor accurately.
Analogy
A stack trace is a flight recorder.When a plane (your app) crashes, the black box doesn't tell you why in plain English. But it records every altitude change, every system warning, every input from the cockpit — in reverse chronological order. The investigators (the agent) read from the top down to reconstruct the sequence that led to the crash. Your job is to hand over the black box intact, not summarize it from memory.
Try it yourself
Error Decoder
Pick a simulated error message. See it broken down into type, file, and cause — with a plain-English explanation of what went wrong.
Terminal
TypeError: Cannot read properties of undefined (reading 'map')
at CartSummary (src/components/CartSummary.jsx:84)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049)
Error Type
TypeError
The code tried to do something with a value that doesn't exist or is the wrong kind of thing.
Location
CartSummary.jsx:84
Line 84 of the CartSummary component. The other files in the trace are React internals — ignore them.
Root Cause
undefined.map()
The code called .map() on something that was undefined — probably an array that hasn't loaded yet.
What the agent would tell you
Your cart component is trying to loop through a list of items, but the list is undefined— it hasn't loaded from the API yet. The fix is to add a check: items?.map() or a loading state that waits for the data before rendering. This is one of the most common React errors.
IV Common Failure Patterns
Not all bugs are created equal. Some are trivial for the agent, some require context you have to provide, and some are signals that you're past the vibe coding frontier. Here are the patterns you'll encounter most, and what to tell the agent for each.
API changes breaking integrations.You shipped a working Stripe checkout last month. This month, it throws 400 errors. The API version changed, an endpoint was deprecated, or a required field was added. What to tell the agent: "The Stripe checkout that was working last month now returns this error [paste error]. I haven't changed the code. Check if the Stripe API has breaking changes."
Dependency version conflicts. You ran npm installand now nothing works. A library updated and broke compatibility with another library. What to tell the agent: "After running npm install, the app crashes with [paste error]. Here's my package.json. What changed and how do I pin the versions?"
Environment mismatches.The dreaded "works locally, fails deployed." Your app runs perfectly on your laptop but crashes on Vercel, Render, or Replit's hosting. The difference is usually environment variables, Node versions, or build settings. What to tell the agent: "This works locally but fails when deployed to [platform]. Here's the deploy log [paste]. My local Node version is [version]."
Silent data errors.The most insidious category. Nothing crashes. No error message. But the numbers are wrong, the list is incomplete, or the data is stale. A query returns 10 results when there should be 50. A calculation is off by a penny on every transaction. What to tell the agent: "No error, but [specific thing] shows [wrong value] when it should show [correct value]. Here's the data source and the function that processes it."
CSS layout bugs.Surprisingly common and surprisingly frustrating. The sidebar overlaps the content on mobile. The button is invisible against its background. The spacing looks wrong but only on Safari. What to tell the agent: "On [device/browser], [element] looks like [describe or screenshot]. It should look like [describe]. Here's the CSS file." The agent is quite good at CSS — layout bugs are usually its fastest fixes.
Key Insight
The pattern across all these failures is the same: context the agent doesn't have.The agent can see your code but not your deploy environment, your API dashboard, your browser's viewport size, or the state of your database. Your job is to bridge that gap. Every piece of environmental context you provide saves a round trip in the debugging loop.
V When the Agent Can't Help
The agent is a brilliant debugger within its field of view. But some categories of problems are outside that field, and no amount of prompt engineering will change that. Recognizing these early saves you from the most expensive debugging mistake: going in circles with an agent that can't see the real problem.
Race conditions.Two things happen at almost the same time and interfere with each other. A user clicks "submit" twice before the first request finishes. Two API calls try to update the same database row simultaneously. These bugs are intermittent — they happen sometimes, under specific timing conditions, and they're nearly impossible to reproduce on demand. The agent can suggest fixes in theory, but testing those fixes requires engineering infrastructure: load testing, concurrent request simulation, transaction isolation. If your bug only happens "sometimes" and involves concurrent users, bring in a human.
Performance problems. The page loads in 2 seconds instead of 200 milliseconds. The API takes 10 seconds to respond. The app freezes when the dataset grows past 1,000 rows. The agent can suggest general optimizations, but real performance work requires profiling — measuring exactly where time is spent, identifying bottlenecks in database queries, network calls, or rendering. This is specialist work.
Security vulnerabilities. The agent that wrote SQL-injection-vulnerable code (remember the checkout from Part 3?) is unlikely to catch its own security oversights through debugging alone. Security requires adversarial thinking — what can go wrong if someone triesto break it — which is fundamentally different from "does it work correctly for honest users." If your app handles authentication, personal data, or payments, security review needs human eyes.
Architectural problems.Your app was built as a single file and now it's 3,000 lines long. Adding a feature requires changing code in six places. Data flows through three intermediate functions before reaching the component that displays it. These aren't bugs — the code works. But the architecture is fighting you, and the solution is restructuring, not patching. Boris Cherny's observation applies here with full force: the constraint has moved from coding to architecture and intent. The agent can restructure code you tell it to restructure, but diagnosing whichrestructuring will solve the problem requires the kind of systems thinking that remains firmly human. If every fix creates a new bug somewhere else, that's the signal.
Builder Tip
The three-cycle rule:If you've been through the debugging loop three times for the same issue and you're no closer to a fix, stop. Either the problem is outside the agent's field of view (environment, timing, architecture) or you're missing context that you can't provide through text. This is the moment to bring in an engineer — not as a failure, but as a signal that the problem has graduated past the vibe coding tier. Frame it the way Part 3 taught you: "Here's what I built, here's what's broken, here's what I've tried."
Try it yourself
Debug or Escalate?
Read each scenario and decide: can you debug this with the agent, or should you bring in a human engineer?
Scenario
Your sidebar overlaps the main content on mobile devices. The layout looks fine on desktop. The browser console shows no errors.
0of 6 correct
VI The Maintenance Mindset
Part 3 introduced the one-month test: can you come back to your project in a month and still work on it? Debugging is where that test gets real. The first time something breaks after you've stepped away, you discover whether you built a sustainable project or a ticking clock.
Remember the Replit production database deletion incident — an AI agent trying to fix a bug deleted a user's entire production database instead. The agent had the access, the intent was reasonable, and the outcome was catastrophic. That's an extreme case, but the pattern is everywhere: debugging without understanding creates risk. If you can't explain what the code does, you can't predict what a fix might break.
Tests are the best debugging documentation.When your app breaks six months from now, the first question is "what changed?" If you have tests, the answer is immediate — the failing test tells you exactly which behavior stopped working. Without tests, you're guessing. Ask the agent to write tests for your critical paths: the checkout flow, the login process, the data transformation that feeds your dashboard. Tests aren't about catching bugs when you write them. They're about catching bugs when something else changes.
Git blame is archaeology.When something breaks and you don't know why, git logshows you every change in reverse chronological order. "The dashboard broke on Tuesday" becomes "on Tuesday, this commit changed the API response parsing" — which is a debuggable statement. If you don't use version control, every debugging session starts from zero. If you do, every session starts with a timeline of what changed and when.
The Linux kernel AI code policy is instructive here.The kernel project allows AI-generated code, but requires a human submitter who takes full legal responsibility. The code isn't reviewed any differently — but a real person's name is on the line. That principle applies to your projects too. You built it with an agent. That's fine. But the bugs are yours, the maintenance is yours, and the consequences are yours. The agent is a tool, not an owner.
Stanford's 2026 AI Index documented that SWE-bench performance — the standard benchmark for AI coding agents — jumped from around 60% to roughly 80% in a single year. The agents are getting remarkably good at writing and debugging code. But the gap between "agent can fix this" and "I understand what was fixed and why" is the gap between a project that survives and a project that accumulates invisible risk with every patch.
Summary
The debugging playbook for builders: 1. Paste the full error.Don't paraphrase. Don't truncate. The whole thing. 2. Describe what you did, what happened, and what you expected. Three sentences that give the agent everything it needs. 3. Provide environmental context.Deploy platform, browser, device, Node version — anything the agent can't see from the code alone. 4. Three cycles max.If the loop hasn't converged, the problem is bigger than the agent's field of view. 5. Invest in tests and version control. They make future debugging sessions start from knowledge instead of guesswork.
Test your understanding
Article Recap
5 questions covering the key concepts from this article.
1 of 5
Your vibe-coded app crashes and you see a long error message you don't understand. A colleague suggests paraphrasing the error to the agent: "it says something about a missing module." Why is this a bad approach?