Debugging

Every app breaks sometimes, even ones built by experts. In this lesson, you'll learn a calm routine for finding and fixing problems with an AI coding tool's help.

What is debugging?

Think of a mechanic. They don't replace random parts. They listen to the engine, find out when the noise happens, and then fix the one broken thing. Debugging is the same: finding the cause of a problem (a bug) and fixing it.

A good debugging routine has five steps:

Stay calm checklist

A red error on screen feels scary. It is really just a message telling you what went wrong. Before you do anything, go through this list:

• Your last commit is safe. Git can always take you back.
• Don't type "fix everything" and let the AI change ten files at once
• Ask: what was the last thing I changed?
• Fix one problem at a time
• Take a short break if you're frustrated. Fresh eyes find bugs faster.

Read the error

Errors show up in two places. Check both.

The browser console

The console is a hidden panel in your browser that shows errors from the page. Open it with F12 (or right-click the page, choose Inspect, then the Console tab). Red lines are errors.

The terminal

The terminal running your app (for example, npm run dev) shows errors from the server side. API routes, payments, and AI calls print their errors here, not in the browser.

Read the first error line slowly. It often names the file, the line number, and the problem, like this:

Error: Missing environment variable STRIPE_SECRET_KEY
    at createCheckoutSession (app/api/checkout/route.ts:8:11)

This one says a key is missing, in the checkout route, on line 8. You may not need the AI at all: check your env file and restart the dev server.

Reproduce the bug

To reproduce a bug means to make it happen again on purpose. If you can't repeat it, you can't be sure it's fixed. Write down the exact steps. For example, in a booking app:

1. Log in as a normal user
2. Pick a date next Friday
3. Click "Book"
4. Expected: a confirmation page
5. Actual: page shows "Something went wrong"

The debug prompt template

Now give the AI everything it needs. Copy this template and fill in the blanks:

I have a bug in my app.

What I did:
[your exact steps]

What I expected:
[what should happen]

What actually happened:
[what you saw]

Error from the browser console / terminal:
[paste the full error]

What I changed recently:
[for example: "added the bookings page"]

Please explain the cause in plain English first.
Then suggest the smallest fix. Do not change unrelated files.

Let's break this down:

• Steps, expected, and actual together tell the AI exactly where to look
• The full error text is worth more than any description of it
• "Explain first" helps you learn and spot a bad guess
• "Smallest fix" stops the AI from rewriting half your app

Going back to the last working version

Sometimes the fastest fix is to undo. This is why you commit after every working step.

git status                  # what changed since the last commit?
git restore app/page.tsx    # undo changes to one file
git restore .               # undo ALL uncommitted changes (careful!)
git log --oneline           # list your commits
git revert a1b2c3d          # undo one bad commit with a new commit

You can also just ask your AI coding tool: "My last commit broke the login page. Show me what changed, and help me go back to the last working commit."

Common errors

Common mistakes

Vague bug reports

Wrong: "Checkout is broken, fix it."
Right: "When I click Checkout as a logged-in user, I see 'Something went wrong'.
The terminal says: Missing environment variable STRIPE_SECRET_KEY."

• Making many changes before testing, so you can't tell which one broke things
• Not committing working versions, so there is nothing safe to go back to
• Pasting secret keys into the debug prompt. Replace them with [hidden].

What's next?

You can now fix problems calmly. Next, you'll learn how to deploy your app, so anyone on the internet can use it.