Phase 4: When Things Break · 25 min · Any vibe coding tool · Browser dev tools

The AI Debugging Loop

Paste, diagnose, fix, verify. Four steps. Every time.

Hiring signal: What changes when you use this: you can debug systematically instead of randomly pasting errors — which means you fix problems faster and more reliably.

What you will learn

Run the 4-step AI debugging loop: paste, diagnose, fix, verify
Give the AI enough context for effective debugging
Know when to include screenshots vs. text
Verify that fixes don't create new problems

Your Mission

Debug a real bug using the structured 4-step loop: paste with context, diagnose, fix, verify. Output: debugging_loop_log.md.

You need: Any AI coding tool with a project that has (or can have) a bug.

Time: 25 minutes.

Step 1: Learn the 4-Step Loop (5 min)

Step 1 — Paste (with context): Don't just paste the error. Give the AI three pieces of context:

"I was [what you were doing] and expected [what you expected], but instead I got [what actually happened]. Here's the error: [error message]. Here's the relevant code: [paste code]."

Step 2 — Diagnose (ask, don't just accept):

"What's causing this error? Explain the diagnosis before suggesting a fix."

Compare the diagnosis to your prediction. If it doesn't match your symptoms, push back.

Step 3 — Fix (review the proposed fix):

"OK, that diagnosis makes sense. What's the fix?"

Review: does it address the root cause? Does the diff look reasonable? Any new red flags?

Step 4 — Verify (test the fix):

Does the original error go away?
Does the feature work correctly?
Did the fix break anything else?
Are there new edge cases?

If the fix works: commit and move on. If not: go back to step 1.

Why 'diagnose before fix' matters
When you ask the AI to diagnose before fixing, you get two benefits: (1) you can compare the diagnosis to your prediction, building debugging instinct, and (2) you can catch the AI when its diagnosis is wrong. If the AI diagnoses incorrectly and immediately applies a fix, the fix won't work — and now you have the original error PLUS the AI's incorrect fix making things worse.

Unlock the full lesson

You've read the first 2 sections. The rest of this lesson covers Step 2: Build or Open a Project (2 min), Step 3: Run the 4-Step Loop (15 min), Step 1: Paste (with context), Step 2: Diagnose, Step 3: Fix, Step 4: Verify, Outcome, Step 4: If Not Fixed, Run Round 2 (3 min), Round 2, You're Done — plus a hands-on lab, quiz, and project artifact.

Create a free account to unlock Phase 0 and Phase 1 of every course — no credit card.