AI Dev Guide
Debugging Techniques

Debugging with AI

How to efficiently find and fix bugs by working with AI coding tools, from error analysis to systematic debugging

Debugging Is AI’s Sweet Spot

AI coding tools are often better at fixing existing problems than designing new features.

Reading error messages, tracing code, deducing causes from patterns — these are tasks AI can do quickly.

The Basic Debugging Steps

1. Describe the Problem Precisely

Not “it doesn’t work” — be specific.

[Problem]
Clicking the login button does nothing

[Steps to reproduce]
1. Go to /login
2. Enter email: test@example.com, password: password123
3. Click the login button

[Expected]
Redirect to /dashboard

[Actual]
Nothing happens. Console shows a 401 error

2. Paste the Error Message

If there’s an error, give the AI the full text.

After following the steps above, the console shows:

POST /api/auth/login 401 (Unauthorized)
Error: Request failed with status code 401
    at createError (createError.js:16)

3. Let AI Investigate

Ask “investigate the cause of this error” and the AI will read relevant files and identify the issue.

4. Commit Before Fixing

Before AI starts making changes, commit the current state. If the fix fails, you can revert.

git add . && git commit -m "Save point before debugging"

5. Fix, Verify, Commit

Apply the fix, test it, then commit if it works.

How to Communicate Effectively

Bad: Not enough information

There's a bug, fix it

Good: Reproducible information

The login form in src/pages/Login.tsx sends a POST to
/api/auth/login when submitted, but it returns 401.

Checking the Network tab, the request headers don't
include an Authorization header.

Related files:
- src/pages/Login.tsx (form)
- src/api/auth.ts (API client)
- server/routes/auth.ts (server-side)

The Binary Search Approach

When the cause is unclear, systematically narrow it down by halves.

Problem: Page is completely blank

1. Comment out half the components, check if it renders
   → It renders → Problem is in the commented-out half
   
2. Comment out half of that section
   → Still blank → Problem is in the remaining half
   
3. Repeat until you find the exact component

Tell the AI “use binary search to isolate the cause” and it can do this automatically.

Tips for AI-Assisted Debugging

1. Use Browser Dev Tools

  • Console tab: JavaScript error messages
  • Network tab: API request status codes and response bodies
  • Elements tab: Whether the HTML structure looks right

Copy this information as text and give it to the AI for better accuracy.

2. Mention What You Just Changed

Bugs almost always appear right after a change.

I modified the fetchUser function in src/api/auth.ts
5 minutes ago. Login stopped working after that.
The changes are visible in git diff.

3. Try One Fix at a Time

If AI suggests multiple fixes, apply them one by one. Otherwise you won’t know which one actually worked.

4. Even Failed Fixes Give You Information

If AI’s fix doesn’t work, “this approach didn’t work” is still valuable information. Tell the AI and continue.

I tried your suggestion but nothing changed.
Same error message. Please try a different approach.

Next Steps