| name | debug-pro |
| description | Systematic debugging methodology with language-specific debugging commands and common error pattern reference. Use when debugging code, investigating errors, tracing bugs, or diagnosing system issues across JavaScript, TypeScript, Python, Swift, CSS, and network layers. Keywords: debug, fix bug, error, crash, trace, diagnose, breakpoint, profiling.
|
Debug Pro
Systematic debugging methodology and language-specific debugging commands.
The 7-Step Debugging Protocol
- Reproduce — Get it to fail consistently. Document exact steps, inputs, and environment.
- Isolate — Narrow scope. Comment out code, use binary search, check recent commits with
git bisect.
- Hypothesize — Form a specific, testable theory about the root cause.
- Instrument — Add targeted logging, breakpoints, or assertions.
- Verify — Confirm root cause. If hypothesis was wrong, return to step 3.
- Fix — Apply the minimal correct fix. Resist the urge to refactor while debugging.
- Regression Test — Write a test that catches this bug. Verify it passes.
Language-Specific Debugging
JavaScript / TypeScript
node --inspect-brk app.js
console.log(JSON.stringify(obj, null, 2))
console.trace('Call stack here')
console.time('perf'); /* code */ console.timeEnd('perf')
node --expose-gc --max-old-space-size=4096 app.js
Python
python -m pdb script.py
breakpoint()
python -X tracemalloc script.py
python -m cProfile -s cumulative script.py
Swift
lldb ./MyApp
(lldb) breakpoint set --name main
(lldb) run
(lldb) po myVariable
CSS / Layout
* { outline: 1px solid red !important; }
.debug { background: rgba(255,0,0,0.1) !important; }
Network
curl -v https://api.example.com/endpoint
curl -w "@curl-format.txt" -o /dev/null -s https://example.com
dig example.com
nslookup example.com
lsof -i :3000
netstat -tlnp
Git Bisect
git bisect start
git bisect bad
git bisect good abc1234
git bisect good
git bisect reset
Common Error Patterns
| Error | Likely Cause | Fix |
|---|
Cannot read property of undefined | Missing null check or wrong data shape | Add optional chaining (?.) or validate data |
ENOENT | File/directory doesn't exist | Check path, create directory, use existsSync |
CORS error | Backend missing CORS headers | Add CORS middleware with correct origins |
Module not found | Missing dependency or wrong import path | npm install, check tsconfig paths |
Hydration mismatch (React) | Server/client render different HTML | Ensure consistent rendering, use useEffect for client-only |
Segmentation fault | Memory corruption, null pointer | Check array bounds, pointer validity |
Connection refused | Service not running on expected port | Check if service is up, verify port/host |
Permission denied | File/network permission issue | Check chmod, firewall, sudo |
Quick Diagnostic Commands
lsof -i :PORT
ps aux | grep PROCESS
fswatch -r ./src
df -h
top -l 1 | head -10
Debugging Mindset
- Don't assume — verify every assumption with evidence
- Change one thing at a time — multiple simultaneous changes make it impossible to know what fixed it
- Read error messages carefully — the answer is often right there
- Check logs first — before writing new instrumentation, read what's already recorded
- Simplify — create the smallest possible reproduction case
- Take breaks — fresh eyes catch what tired eyes miss
Example Session
Bug: "API returns 500 intermittently, can't reproduce locally"
Protocol:
- Reproduce: Check if it happens at specific times, with specific payloads, or at high load
- Isolate: Add request logging to capture failing payloads;
git bisect to find when it started
- Hypothesize: Race condition in database connection? Timeout on external service call?
- Instrument: Add structured logging around the suspect area with request ID tracing
- Verify: Reproduce with captured payload; confirm stack trace matches hypothesis
- Fix: Add connection pooling / timeout handling / retry logic
- Test: Add integration test with the failing payload; verify it passes