C
Dev Tools list
Previous4 / 4Next
Dev Tools/Vibe Basics/Lesson 04

Vibe Essentials — Reading Errors · Debugging · Package Management

30 min·theory

Vibe Essentials — Reading Errors · Debugging · Package Management

🎯 After Reading This Lesson

After finishing this lesson, you will be able to do the following 3 things with confidence.

  • ▸✅ How to read error messages (the 1 key line in a stack trace)
  • ▸✅ The 4 steps of debugging (Reproduce · Hypothesize · Verify · Fix)
  • ▸✅ The 4-element AI debugging template

Keep the learning objectives as a checklist and close the lesson only when you can answer all of them.

How to Read Error Messages

One line: An error message is the answer. Don't ignore it — read it from the bottom up.

Stack Trace Reading Order:

code
Traceback (most recent call last):
  File "app.py", line 23, in main          # Top = first call
    process(data)
  File "app.py", line 15, in process       # Middle
    validate(item)
  File "app.py", line 8, in validate       # Bottom = actual error
    raise ValueError("nil data")          # ← Start reading here
ValueError: nil data

3-Step Analysis:
1. Error name: ValueError·NullPointerException·SyntaxError...
2. Error message: The specific cause ("nil data")
3. Location: Which file and line (read from the bottom up = find your code)

Common Errors You'll Encounter:

ErrorMeaningFix
NullPointerException (Java)Calling a method on a null objectNull check + Optional
Cannot read property of undefined (JS)Accessing a property of undefinedOptional chaining ?.
ModuleNotFoundError (Python)Import failedActivate venv + pip install
Address already in usePort is occupiedlsof -ti :3000 \xargs kill
Permission deniedInsufficient permissionschmod +x or sudo
CORS errorBlocked by different domainSet headers on the server side

> 💡 The Googling trap: Don't search the full error message. Use only the key keywords ("Cannot find module" express).

Debugging Mindset — Hypothesis and Verification Loop

Iron Law: Never fix without finding the root cause. 'It somehow worked' = it will blow up again next time.

4 Steps of Debugging:
1. Reproduce — Create the smallest possible reproducible case (down to Hello, world level)
2. Analyze — Trace with logs, debugger, console.log, print. Track the data flow
3. Hypothesize — Form a clear sentence: 'Y because of X'
4. Verify — Apply the fix based on the hypothesis → Did the error disappear? If not, the hypothesis is wrong

Debugging Tools:

ToolPurpose
console.log / printQuick check (remove before production)
Debugger (IDE · Chrome DevTools)Breakpoints · step over · variable inspection
Log levels (debug/info/warn/error)For production
Network tabAPI requests and responses
Performance profilerFinding the cause of slowness
Heap snapshotMemory leaks

Advanced Techniques:

  • ▸Binary search: Large change → cut in half to find which side is the cause
  • ▸Rubber duck: Explain your code out loud — half the bugs surface in the process
  • ▸Time travel debug: Supported by some IDEs (trace variable changes backward)
  • ▸AI pair: Paste error + code into Claude/Copilot → get hypothesis candidates

Common Pitfalls:

  • ▸❌ 'Restarting fixes it' → Ignored and becomes a time bomb for the next person
  • ▸❌ Hiding errors with try/catch (catch {}) — real bugs get buried later
  • ▸❌ Changing multiple things at once → Can't tell which one worked
  • ▸✅ One hypothesis at a time, one change at a time, verify immediately

🤖 AI Debugging Request Template — *Save 2–3x Tokens*

❌ Don't Request Like This

code
"I'm getting an error. Please fix it."

The AI's first response will be 'What error? Can you show me the code? What's your environment?' — 3–5 back-and-forth exchanges just to get one answer. Tokens accumulate with each round.

✅ Request Like This — The 4-Element Template

code
The following error occurs:
[Copy the full error message + stack trace]

Execution environment:
- Language/Runtime: Node 20 / Python 3.11 / Java 17
- Framework: Next.js 15.4 / Spring Boot 3.2
- OS: Windows 11 / macOS 14

Reproduction conditions:
[Under what input values/conditions does it occur — "when sending id=999 to users API GET /users/{id}" or similar specific scenario]

What I've already tried:
- npm cache clean → same error
- Deleted node_modules and reinstalled → same
- Other routes work normally

Please tell me the cause and how to fix it.

Why This Is Effective

The AI receives all 4 axes of context it needs for an answer at once:

1. The error itself — The stack trace is the biggest clue
2. Environment — The same code can behave differently across versions
3. Reproduction conditions — 'Always happens' vs 'only under this condition' is the key
4. What you've tried — The AI skips solutions it would have otherwise suggested

Token Comparison — Measured

Bad request (3 round trips):

code
Me: I got an error. Fix it.   (50 tokens)
AI: Please show me the error message. (30)
Me: [Copy]  (200)
AI: What's your environment?  (20)
Me: Node 20.  (10)
AI: Answer  (1000)
Total: approx. 1310 tokens

Good request (1 round trip):

code
Me: [Includes all 4 elements]  (400)
AI: Answer  (1000)
Total: approx. 1400 tokens

Similar? No — the quality of the first answer is different. A good request gets a precise answer in one shot; a bad request requires additional clarification after the conversation, eventually costing 3000+ tokens.

Tips for Saving Even More

  • ▸If the error message is long, include only the key part: The Caused by: line + first 5 lines of stack trace
  • ▸Remove sensitive information: API keys, passwords, real user data → <REDACTED>
  • ▸Minimal reproducible example (MRE): Attach only the 10 problematic lines out of 100
  • ▸If the stack trace is too long: first 5 lines + last 5 lines

Interview Application

'Do you use AI tools well?' → Answering with this 4-element template means you pass. It's a measure of how deeply you use AI.

💻 📌 npm + pip Virtual Environment Essentials 
# ═══════════════════════════════════════════
# npm — Node Package Management
# ═══════════════════════════════════════════
npm init -y                         # Auto-generate package.json
npm install <pkg>                   # Add dependency (dependencies)
npm install -D <pkg>                # Development dependency (devDependencies)
npm install -g <pkg>                # Global (usually avoid, npx recommended)
npm uninstall <pkg>                 # Remove
npm update                          # Minor/patch updates
npx <pkg>                           # Run once without installing (create-next-app)

# Utilizing package.json scripts
# {"scripts": {"dev": "next dev", "lint": "tsc --noEmit"}}
npm run dev                         # Run scripts.dev
npm run lint                        # All defined scripts

# === Common npm pitfalls ===
# 1. node_modules corrupted → Delete and reinstall
rm -rf node_modules package-lock.json && npm install
# 2. Global permission error → Use npx or nvm (no sudo)
# 3. Ignoring lock file → Breaks team builds. git add package-lock.json is essential

# ═══════════════════════════════════════════
# pip + venv — Python Package Management
# ═══════════════════════════════════════════
python -m venv .venv                # Project-specific virtual environment
source .venv/bin/activate           # macOS/Linux
.venv\Scripts\activate              # Windows
which python                        # → .venv/bin/python (verify isolation)
deactivate                          # Exit virtual environment

pip install requests                # Install dependency
pip install -r requirements.txt     # Batch
pip install -e .                    # Editable (for development)
pip freeze > requirements.txt        # Pin current versions

# === Modern tools (pip alternatives) ===
# uv: Rust-based, 10-100x faster than pip (2024+)
uv venv && uv pip install -r requirements.txt
# poetry: Dependency + packaging integrated
poetry add requests && poetry install
# pipenv: Pipfile + Pipfile.lock

# === Common pitfalls ===
# 1. pip install without venv activation → System Python gets messy
# 2. requirements.txt versions not pinned → Next build breaks
#    ❌ requests        ✅ requests==2.31.0
# 3. .venv/ git commit → Must add to .gitignore

🤖 Try Asking AI Like This

Knowing the concepts from this lesson lets you give specific instructions to AI.

  • ▸'Here is the error: [paste full error] / Node 20 / Reproduction condition: [input] / Already tried: [details] — tell me the cause and how to fix it.'
  • ▸'Diagnose the dependency conflicts in this package.json using the npm ls output.'
  • ▸'Find the key single line in this stack trace and walk me through the 4 steps of debugging.'

Why This Saves Tokens

'I got an error. Please fix it.' will make the AI ask 5 follow-up questions. Send the 3 elements together — environment + reproduction + what you tried — and you get the answer in one shot: 2–3x token savings.

Read this first: Build + API — Maven · Gradle · curl · Postman
Up next: Network
PreviousListNext
Vibe Basics — Reading Errors·Debug·Packages - Dev Tools