Skip to content

Debugging and Troubleshooting

MCP Tools

Chrome DevTools (frontend debugging): - Capture console errors and network failures - Set breakpoints and inspect state - Profile performance bottlenecks - Capture screenshots of error states

Workflows

  • [ ] Reproduce: Can you reliably reproduce the issue?
  • [ ] Isolate: What is the minimal code that exhibits the bug?
  • [ ] Trace: Use Grep to follow the call chain
  • [ ] Hypothesize: What could cause this behavior?
  • [ ] Test: Verify or disprove your hypothesis
  • [ ] Fix: Implement the solution
  • [ ] Verify: Confirm the fix and add regression test

Debugging Strategy

1. Gather Information

  • Read error messages and stack traces carefully
  • Check logs for context around the error
  • Identify when the issue started (recent changes?)
  • Use Grep to locate related code around the error

2. Trace the Flow

  • Use Grep to trace data flow through function calls
  • Map the call chain from entry point to error
  • Identify where data transforms unexpectedly

3. Reproduce Consistently

  • Create a minimal test case
  • Document exact steps to reproduce
  • For frontend bugs, use Chrome DevTools to record network/console

4. Common Causes

  • Null/undefined: Check for missing null checks
  • Off-by-one: Verify loop boundaries and array indices
  • Async timing: Check race conditions and await usage
  • State mutation: Look for unexpected side effects
  • Type coercion: Verify type handling (especially in JS/TS)

Tools (Examples by Language)

# Check logs
tail -f /var/log/app.log

# Search for error patterns
grep -r "ERROR" ./logs/

# Debug Node.js
node --inspect-brk app.js

# Python debugging
python -m pdb script.py

Frontend Debugging with Chrome DevTools

  • Open DevTools → Console for errors
  • Network tab for failed requests
  • Sources tab for breakpoints
  • Performance tab for slow operations

Post-Fix Checklist

  • [ ] Root cause identified and documented
  • [ ] Regression test added
  • [ ] Similar code checked (use Grep to locate)
  • [ ] Fix reviewed by another developer