Skip to content
AI Coding GuildAI Coding Guild
Sign InGet Started Free

Debugging With AI — Better Than Stack Overflow

Learn systematic approaches to debugging code with AI assistance, from error messages to complex logic bugs.

12 min readai-tools, workflows, debugging, troubleshooting

Something is broken. Your app shows a blank page, an error message appears in the console, a button doesn't do anything when you click it, or the data shows up wrong. Welcome to debugging — the activity that takes up more of a developer's time than writing new code.

The good news: AI is genuinely excellent at debugging. It's seen millions of error messages, understands common failure patterns, and can often identify the problem faster than searching Stack Overflow or reading documentation.

The key is knowing how to ask for help effectively.

The Debugging Workflow

When something breaks, follow this sequence:

1. OBSERVE  — What exactly is happening vs. what you expected?
2. GATHER   — Collect the error message, relevant code, and reproduction steps
3. ASK      — Give the AI all the context it needs
4. VERIFY   — Test the suggested fix before moving on
5. UNDERSTAND — Make sure you know WHY it was broken

Skipping any of these steps leads to problems. Skipping "observe" means you might fix the wrong thing. Skipping "gather" means the AI doesn't have enough context. Skipping "verify" means you might introduce a new bug. Skipping "understand" means the same bug will come back.

Step 1: Observe — What's Actually Happening?

Before asking AI for help, be precise about the symptom:

Vague: "The page is broken" Precise: "The products page shows a loading spinner that never goes away. The console shows a TypeError. The network tab shows the API call returning 200 with data."

Vague: "The form doesn't work" Precise: "When I click Submit, nothing happens. No console errors. No network request. The button's onClick handler doesn't seem to fire."

The more precise your observation, the faster the AI can identify the cause.

Step 2: Gather — Collect the Evidence

AI can only work with information you give it. For most bugs, you need to provide:

The Error Message (If There Is One)

Copy the full error message, including the stack trace. The stack trace tells the AI exactly where in your code the error occurred.

TypeError: Cannot read properties of undefined (reading 'name')
    at UserProfile (src/components/UserProfile.tsx:15:23)
    at renderWithHooks (node_modules/react-dom/...)

The Relevant Code

Share the code where the error is occurring. Include enough context — not just the line that errors, but the surrounding function or component.

The Expected Behavior

What should have happened? "The user's name should display in the header" is much more helpful than "it should work."

Steps to Reproduce

How do you trigger the bug? "It happens when I click 'Save' on the profile page after changing the display name."

What You've Already Tried

If you've attempted fixes, mention them. This saves the AI from suggesting things you've already ruled out.

Step 3: Ask — The Debugging Prompt

Here's a template that consistently gets good results:

I'm getting an error in my [describe the project/feature].
 
**Error:**
[paste the full error message]
 
**Code:**
[paste the relevant code]
 
**Expected behavior:**
[describe what should happen]
 
**Actual behavior:**
[describe what actually happens]
 
**Steps to reproduce:**
[describe how to trigger the bug]
 
**What I've tried:**
[list any fixes you've already attempted]
 
What's causing this, and how do I fix it?

Example: A Real Debugging Prompt

I'm getting an error in my e-commerce checkout page.
 
**Error:**
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'items')
 
Source: src/app/checkout/page.tsx (line 12)
 
**Code:**
~~~tsx
export default function CheckoutPage() {
  const { cart } = useCart()
  const total = cart.items.reduce(
    (sum, item) => sum + item.price * item.quantity, 0
  )
 
  return (
    <div>
      <h1>Checkout</h1>
      <p>Total: ${total}</p>
    </div>
  )
}
~~~
 
**Expected behavior:**
The checkout page should show the cart total.
 
**Actual behavior:**
The page crashes with the TypeError above on first load.
 
**Steps to reproduce:**
Navigate directly to /checkout without adding items to cart first.
 
**What I've tried:**
Adding `if (!cart) return null` before the reduce, but the error still occurs.

This prompt gives the AI everything it needs. The likely fix is handling the case where cart is null or cart.items is null — but the specific fix depends on the useCart hook implementation, which the AI can now ask about or reason about from the error.

Step 4: Verify — Test the Fix

When the AI suggests a fix:

  1. Read it first. Does the fix make logical sense? Does it address the root cause or just suppress the symptom?
  2. Apply it. Make the change in your code.
  3. Test the original bug. Follow the same reproduction steps. Is the bug gone?
  4. Test the happy path. Does the feature still work correctly when everything is normal?
  5. Test related features. Did the fix break anything nearby?

If the fix doesn't work or introduces new problems, tell the AI:

Your suggested fix prevented the crash, but now the checkout page
always shows $0.00 even when there are items in the cart. Here's
the updated code:
 
[paste updated code]

Step 5: Understand — Learn From the Bug

This is the step that separates vibe coders who keep hitting the same bugs from those who level up. After fixing a bug, ask:

Can you explain why this bug happened? I want to understand
the root cause so I can prevent similar bugs in the future.

The AI will explain the underlying concept (null references, async timing, state management, etc.). This five-minute investment saves you from the same class of bug in future projects.

Common Bug Categories and How to Debug Them

"Cannot read properties of undefined/null"

What it means: Your code tried to access a property on something that doesn't exist yet. AI prompt:

I'm getting "Cannot read properties of undefined (reading 'X')".
[paste code and error]
When does this data become available? How should I handle the case
where it's not loaded yet?

"Module not found" or "Cannot find module"

What it means: Your code is importing something that doesn't exist at the path specified. AI prompt:

I'm getting "Module not found: Can't resolve './components/UserCard'"
Here's my file structure:
[describe or paste relevant file paths]
Here's the import statement:
[paste the import line]

The Page Is Blank (No Error)

What it means: Usually a rendering issue — the component exists but produces no visible output. AI prompt:

My page renders blank with no console errors. Here's the component:
[paste code]
I expect to see [description].
I've confirmed the route is correct and the component is mounted
(I added a console.log in the component body and it fires).

The Button Does Nothing

What it means: The event handler isn't connected, or it runs but doesn't produce a visible result. AI prompt:

Clicking this button does nothing. No console errors, no network
requests, no UI changes. Here's the button and its handler:
[paste code]
The button renders correctly and is not disabled.
I added console.log to the handler — it [does/doesn't] fire.

Data Shows Up Wrong

What it means: The code runs without errors but produces incorrect output. AI prompt:

The data displays but the values are wrong.
Expected: prices should be in dollars (e.g., $29.99)
Actual: prices show in cents (e.g., $2999)
 
Here's the data from the API:
[paste sample data]
 
Here's the display code:
[paste the component that renders the data]

It Works Locally But Not in Production

What it means: Environmental differences — different URLs, missing environment variables, different build behavior. AI prompt:

This feature works in my development environment but fails in production.
 
Dev URL: localhost:3000
Prod URL: myapp.vercel.app
 
The error in production is:
[paste error from production logs or browser console]
 
Environment variables used by this feature:
[list them, without revealing actual values]
 
The relevant code:
[paste code]

Debugging Mindset Tips

Read the Error Message First

It sounds obvious, but many people see an error and immediately paste it into AI without reading it themselves. Error messages often tell you exactly what's wrong. The AI will read it for you, but training yourself to read error messages makes you faster at debugging everything.

Check the Most Recent Change

If something worked and now it doesn't, the bug is almost certainly in whatever you changed last. Start there.

Reproduce Before Debugging

If you can't reliably reproduce the bug, you can't verify the fix. Before asking for help, make sure you can trigger the bug consistently.

One Fix at a Time

When the AI suggests multiple changes, apply them one at a time. If you change five things at once and the bug goes away, you don't know which change fixed it — and the other four changes might be unnecessary or harmful.

Don't Guess — Investigate

When something's wrong, the temptation is to start changing things randomly. Resist this. Adding random null checks, try/catch blocks, and fallback values without understanding the root cause creates code that works by accident. It'll break again later.

Try this now

  • Take one real bug and write down the symptom, expected behavior, actual behavior, and reproduction steps before you ask AI anything.
  • Paste the full error, relevant code, and what you already tried into a single debugging prompt.
  • Apply one fix at a time and test the original reproduction path before you change anything else.

Prompt to give your agent

"Help me debug this issue systematically. Feature: [what is broken] Error or symptom: [full message or precise symptom] Expected behavior: [what should happen] Actual behavior: [what happens instead] Steps to reproduce: [exact steps] Relevant code: [paste code] What I've already tried: [list]

First tell me the likely root causes in order. Then give me the smallest fix to test first. After that, tell me how I should verify the fix and what related areas I should retest."

What you must review yourself

  • Whether you gave the AI enough evidence instead of a vague description
  • Whether the proposed fix explains the cause or only masks the symptom
  • Whether you tested the original bug, the happy path, and nearby behavior after the fix
  • Whether you understood why the bug happened so you can avoid repeating it

Common Mistakes to Avoid

  • Describing the bug vaguely. Precision is half the fix.
  • Applying multiple changes at once. That turns debugging into guesswork.
  • Suppressing the symptom without understanding the cause. Hidden bugs come back.
  • Stopping after the crash is gone. A fix that creates wrong data or broken UX is still a bug.

Key takeaways

  • Follow the debugging sequence: Observe, Gather, Ask, Verify, Understand
  • Be precise about symptoms — "the page is broken" vs. "the spinner never stops and the console shows TypeError"
  • Include full error messages, relevant code, expected behavior, and reproduction steps in your prompt
  • Test the AI's fix thoroughly — does it solve the problem without creating new ones?
  • After fixing, ask why it happened — understanding root causes prevents future bugs
  • One fix at a time — don't apply multiple changes simultaneously

What's Next

Next up: Refactoring With AI — Making Code Better Without Breaking It. Use AI to safely improve, reorganize, and simplify existing code without changing what it does. This builds directly on what you learned here, so carry the same discipline forward: define the constraints first, then use your AI agent to implement against them.