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