The Mental Model
Every bug leaves fingerprints.
Debugging is detective work. The error message is your first clue. Learn to read the scene before you start guessing.
They tell you what happened and where.
They show you the chain of events that led to the crash.
When in doubt, print everything and follow the trail.
Read the evidence before you start guessing.
The Crime Scene
TypeError
The suspect doesn't exist. You called .map() on undefined.
const items = data.results;
// data is undefined
items.map(i => i.name);
// TypeError: Cannot read
// properties of undefined
ReferenceError
Wrong name. The variable was never declared.
console.log(userName);
// You wrote userName
// but declared username
// ReferenceError:
// userName is not defined
NetworkError
Lost connection. The API didn't respond.
fetch('/api/users')
// Server is down or
// wrong URL endpoint
// ERR_CONNECTION_REFUSED
// net::ERR_FAILED
The Interrogation
Bad prompt vs Good prompt
"Fix my code"
No context. No error. No code. The AI has nothing to work with.
"Here is my error:
[paste full error message]
Here is the relevant code:
[paste the component]
This happens when:
[describe the trigger]
I expected:
[describe expected behavior]"
Error + Code + Context
AI Analysis
Targeted Fix + Explanation
The Self-Healing Loop
If new error appears after testing → loop back to step 1
1. Copy the FULL error message
2. Include 10 lines above and below the error line
3. Paste into AI with context
4. Apply the fix
5. If new error → GOTO 1
6. If clean → Ship it
Common Patterns
✗ Dead Ends
"I'll just guess what's wrong"
Read the error first. It literally tells you the file and line number.
"The error message is gibberish"
It's actually very specific. Learn to read it — file, line, type.
"I'll rewrite everything"
90% of bugs are one wrong line. Don't nuke it from orbit.
"It works on my machine"
Check environment variables. Check node version. Check .env files.
✓ Clean Console
Read the error message first
It tells you the file and line number. Start there.
Reproduce before fixing
If you can't trigger it, you can't verify the fix.
One change at a time
Change one thing, test, repeat. Never change three things at once.
console.log everything
When in doubt, print it out. Follow the data trail.
The Exercises
Hunt your first ghost.
The Autopsy
Read an Error
- →Open DevTools in your browser
- →Find the Console tab
- →Read an actual error message
- →Identify the file and line number
The Interrogation
Prompt for Fix
- →Copy the error + relevant code
- →Paste into AI with full context
- →Apply the suggested fix
- →Test the result
The Clean Room
Verify the Fix
- →Check Console is clean (no red)
- →Check Network tab (no failures)
- →Confirm the feature works end-to-end
Quick Reference
Open Console
Cmd+Option+J (Mac)
F12 (Windows)
Stack Trace
Read bottom to top.
The bottom is where it started. The top is where it crashed.
Fix Loop
Error → AI → Test → Repeat
Until the console is clean.