Vibe Coding for Beginners: From Zero to App/Use a coding agent
Lesson 4 / 4 · 30 min · 0 / 3 exercises
Course contents
Project · 3 hands-on exercises

Fix a few mistakes

Debug without reading code: reproduce the bug, collect the exact error, give the agent evidence, ask for the cause before the fix, and test the edge cases.

Every app has bugs, and agents create their share. You don't need to read code to get them fixed. You need evidence. An agent given the exact error message and the steps that cause it fixes most bugs on the first try. An agent told “it's broken” guesses, and guesses often break something else.

Four bugs you'll probably meet

SymptomUsual causeEvidence to collect
A section is blankA JavaScript error stopped the script, or the data file has a typoThe red error in the browser console
Works on your laptop, broken onlineFile names differ in capital letters, such as Bun.jpg and bun.jpg. Macs and Windows usually ignore the difference; most web hosts don'tThe live address, and the missing file's name from the console
The badge says “Open” on a MondayLogic: JavaScript numbers the days from 0, starting on Sunday, which makes off-by-one mistakes easyThe day and time you tested, and what the badge said
A price shows as 4.5 instead of $4.50The number isn't formatted as moneyA screenshot of the wrong price

Open the browser console

The console is where the browser writes errors. Right-click the page, choose Inspect, and click the Console tab. Red lines are errors. You don't need to understand them: copy them exactly and paste them to the agent. The first red line usually matters most, because later errors are often knock-on effects of the first.

Spot the problemsExercise 1 of 3

The specials section is blank. Here's the console. Click the lines worth pasting to the agent.

Console0 of 2 found

The bug report an agent needs

  • What you did: “I added a pumpkin bun to specials.json and reloaded.”
  • What you expected: “The new item appears.”
  • What happened: “The whole specials section is blank.”
  • The evidence: the exact console error, a screenshot, or the live address.
  • What you want: “Explain the cause first, then fix it.”
Put it in orderExercise 2 of 3

Put the debugging loop in order.

  1. Read the explanation, then approve the fix
  2. Send a bug report and ask for the cause before the fix
  3. Commit the fix with a message that names the bug
  4. Reproduce the bug so you can see it happen
  5. Repeat your steps to confirm the bug is gone
  6. Collect the evidence: the exact error, your steps, a screenshot
You make the callExercise 3 of 3

The quick fix

The Open now badge throws an error every Sunday.

  1. The agent proposes: “I'll wrap the badge code in a try/catch so the error doesn't show.”

Ask for a test, not a promise
When the agent says it's fixed, ask: “Show me how you know.” For logic like opening hours, give it specific moments to check, such as Sunday at noon, Monday at noon, and one minute either side of opening and closing.
Definition of done0 / 5
Pick your track · finish either one
Steps · 0 / 5 done

  1. Break the data on purpose

    Open specials.json in any text editor, delete one comma between two items, save, and reload the page with the console open.

    VerifyThe specials section is blank, and the console shows a red SyntaxError.

  2. Report it like a pro

    Send a bug report with the exact error lines.

    prompt
    The specials section is blank since I edited specials.json.
Console error: [paste the red error line, and the line under it]
Explain the cause in one sentence first. Then fix it, and tell me how to avoid this next time.
    VerifyThe agent names the missing comma and where it was, then fixes it. The specials are back.

  3. Let the agent plant a bug

    Ask the agent to hide one realistic bug for you to find. This is the safest way to practice: you know a bug exists, and the agent knows the answer.

    prompt
    Plant one realistic bug somewhere in this site's JavaScript, the kind a beginner's project might really have. Don't tell me what it is or where. Don't commit it. I'm going to find it.
    VerifySomething on the site is now wrong. Look in the browser and the console for a clue.

  4. Find it and fix it

    Use the console and the visitor check to find the symptom. Send a bug report with the evidence and ask for the cause before the fix.

    VerifyThe bug is gone when you repeat your steps, and the agent confirms it was the one it planted.

  5. Test the edge cases, then commit

    Ask the agent to check the badge at specific times. It can do this without waiting for the clock, by testing the logic with chosen dates.

    prompt
    Check the "Open now" badge at each of these local times and show me what it says for each: Sunday 12:00, Monday 12:00, Tuesday 6:59, Tuesday 7:00, Tuesday 14:59, Tuesday 15:00. Expected: open, closed, closed, open, open, closed.
    VerifyAll six moments match the expected results. Commit, then push.
Check your understanding
Q1. Which bug report gets the fastest, safest fix?
Q2. Your site works on your laptop, but one photo is missing on the live site. What's a likely cause?
· Tick off the 5 step(s) above.
· Work through the 3 remaining exercises above (stuck? each one can show you the answer).
· Score 100% on the quiz.
Vocabulary in this lesson
AgentA model wired to tools and a loop: it reads, acts, checks the result, and goes again until the task is done or you stop it.

Plain-English definitions from the AI Coding Dictionary.