Lesson 18 · Vibe Coding Mastery · about 20 minutes

🐞 Debug With AI (and Beat It to the Fix)

Vibe-coded pages break. That's not bad luck — that's Tuesday. Today you learn the pro loop for hunting bugs, and how to ask AI for help like a detective instead of crying "it doesn't work 😭".

🎬 Watch first (90 seconds)

Every page breaks. Pros don't panic.

You've vibe-coded whole pages with AI. Awesome. But sooner or later you press refresh and... the button is dead. The colors are gone. Half the page vanished. This happens to EVERY coder on Earth, every single day.

The difference between a beginner and a pro is not "pros make no bugs". It's this: beginners panic, pros follow a loop.

💡 The one idea of this lesson: the pro debugging loop Four steps, always in this order:
  1. LOOK 👀 — What EXACTLY is wrong on screen? Not "it's broken" — be precise: "the Buy button does nothing when I click it."
  2. CONSOLE 🔍 — Right-click the page → Inspect → Console tab. Red text is the browser naming the crime scene — and it even gives you a line number! That's the browser saying "the trouble is HERE."
  3. GUESS 🕵️ — Which of the 3 usual suspects is it?
    • Spelling mismatch — buy vs buyy, .card vs .cards. Computers never guess what you meant.
    • Missing closer — a forgotten </div>, }, or ). One missing closer can swallow half your page.
    • = vs === — one = PUTS a value in a box, three === ASKS "are these the same?". Mix them up and your if goes crazy.
  4. FIX or REPORT 🛠️ — Try YOUR fix first. Can't crack it in 2 minutes? Then write a proper bug report and send it to your AI.
Learning to read error messages calmly is the whole game. The red text is not yelling at you — it's a clue, gift-wrapped.

The Bug Report: how pros ask for help

Compare these two messages to an AI:

The magic template has four parts:

  1. I expected... — what SHOULD happen.
  2. Instead... — what ACTUALLY happens.
  3. Here is the error from the console: [paste the red text]. This is GOLD 🏆 — the console error tells the AI the exact crime and the exact line. ALWAYS paste it.
  4. Here is my code: [paste the code].
⚠️ Two pro rules Rule 1 — Try YOUR fix first (2 minutes). Run the loop yourself before asking. If you fix it — you WIN, and your brain levels up. If you don't — no shame, your bug report is now super sharp because you already looked at the console. Ask-first kids get dependent; try-first kids get smart.

Rule 2 — Leash the AI. AI sometimes "fixes" a bug by rewriting your WHOLE page — and breaks three other things you loved. Always add: "Fix ONLY the bug. Change nothing else."

🛠️ Build it: sabotage practice (break it on PURPOSE)

🧪 Your mission You're going to break your own clicker game 3 different ways — one at a time — and read what the console says each time. Firefighters practice on fires they lit themselves. So do debuggers.
  1. Open practice/clicker.html (your clicker game from lesson 15) in VS Code AND in your browser. Open the Console: right-click → Inspect → Console tab. Keep it open the whole time.
  2. Sabotage 1 — spelling mismatch. Find a getElementById("...") in your script and misspell the id inside it (like "scor"). Save, refresh, click. Now READ the console: what does the red text SAY, and which line number does it point at? Say it out loud. Then undo (⌘Z), save, refresh — game alive again.
  3. Sabotage 2 — the sneaky =. Find an === in an if and change it to a single =. Save, refresh, play. Weird behavior? Any console message? (Sometimes this one is SILENT — the sneakiest bugs don't even leave a red note.) Undo, save, refresh.
  4. Sabotage 3 — missing closer. Delete one } from your script. Save, refresh. The console should shout something like Unexpected end of input — that's browser-speak for "you forgot a closer somewhere!" Note the line number. Undo, save, refresh.
  5. Done? You just read THREE real error messages without panicking. That's a superpower most grown-ups don't have. 🏆

🕹️ Try it right here — the lesson checks your code!

Crime scene 1 is a page an AI wrote with THREE planted bugs — one in HTML, one in CSS, one in JavaScript. All three are "usual suspects" you already know. Then in the second task you'll write a bug report like a pro.

🎮 Quiz time

No peeking at the notes above — trying to remember is what makes it stick!

📚 Want more?

⭐ Best thing to read next MDN: What went wrong? Troubleshooting JavaScript — Mozilla's official guide to reading error messages, with a broken number-guessing game you get to fix. Reading it counts as a lesson block! Keep the JS Cheat Sheet nearby, and the Glossary if a word looks alien.