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.pyFrontend 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