AI-Assisted Troubleshooting

When to Call in AI for Help

In Lesson 5.2, you learned to debug systematically: describe the problem, narrow it down, change one thing at a time. Sometimes that's enough. But other times you'll hit a wall — the bug is in unfamiliar code, the error message is cryptic, or you've tried everything you can think of.

That's when AI becomes your debugging partner. AI is excellent at translating error messages, explaining what code does, suggesting fixes, and thinking through problems step by step. The key is knowing how to describe the problem so AI can actually help.

The Perfect Bug Report for AI

The quality of AI's debugging help depends entirely on how well you describe the problem. Here's the template that works:

1. What you were trying to do: "I'm building a streak counter that increases when a habit is checked off."
2. What you expected to happen: "When I click the checkbox, the streak number should go up by 1."
3. What actually happens: "Nothing changes. The number stays at 0 no matter how many times I click."
4. What you've already tried: "I refreshed the preview, I checked the page, and nothing seems to happen when I click — no errors, no change."
5. Where to look: "It feels like the click isn't connected to the counter — but I'm not sure where in the code."

This pattern gives AI everything it needs to diagnose the issue. In Replit you don't need to paste code — the AI panel can already see your project. Compare a good bug report to "my code doesn't work, fix it" — which would produce a generic, probably unhelpful response.

Error Messages Are Your Friends

Sometimes when something breaks, the browser shows an error message. They look scary, but they're actually the most helpful debugging tool you have — they tell you what went wrong and often where.

When you see an error message, do these three things:

1. Read it once. Don't skip it because it looks technical. The first few words usually say what kind of problem it is.
2. Copy the whole message exactly. Don't paraphrase. The exact wording is what AI needs to recognize the pattern.
3. Paste it into the AI panel with this prompt: "I'm seeing this error: [paste exact error]. What does it mean in plain English, and how do I fix it in my project?"

If you're curious about the most common error types you'll see in this course, here's a quick translation guide — none of which you have to memorize:

• SyntaxError = there's a typo somewhere in the code (missing punctuation, etc.). AI usually fixes these in one shot.
• ReferenceError = the code is trying to use something that doesn't exist or got renamed. Often happens after AI changes one part but forgets to update another.
• TypeError = the code expected one kind of thing (like a number) and got another (like undefined or text). Common when data isn't loaded yet.

Whatever the error type is, the fix is the same: paste the exact message into AI and ask for the fix.

When AI Sends You in Circles

Sometimes AI's suggested fix doesn't work. You try it, get a new error, ask AI about that, try the new fix, get another error... This is called a debugging loop, and it's a sign you need to change approach.

When this happens:

1. Stop. Don't keep trying AI's suggestions if they're not converging on a solution.
2. Revert to the last version that worked. Undo all the failed fixes.
3. Start a fresh conversation. The old conversation's context is probably confused.
4. Reframe the problem. Instead of "fix this error," try: "Explain what this code is supposed to do and identify any logical problems."
5. Simplify. Can you solve the problem with a simpler approach? Sometimes the fix is to rewrite the component more simply rather than patching complicated code.