Debug

Debug: $ARGUMENTS

Systematically investigate and fix the reported bug.

Process

1. Reproduce the Issue

• Understand the expected vs actual behavior
• Identify steps to reproduce
• Run the app or tests to confirm the bug exists

2. Gather Information

# Check recent changes
git log --oneline -10

# Check for related errors
npm run build 2>&1
npm test 2>&1 | head -50

3. Locate the Problem

Search strategies:

• Grep for error messages or related keywords
• Trace the code path from UI to data
• Check recent git changes to affected files

Narrow down:

1. Which file(s) are involved?
2. Which function(s)?
3. Which line(s)?

4. Understand Root Cause

Read the code and understand:

• What is the code supposed to do?
• What is it actually doing?
• Why is there a difference?

Common causes:

• Off-by-one errors
• Null/undefined not handled
• Async timing issues
• State not updated correctly
• Wrong variable referenced

5. Develop Fix

• Fix the root cause, not just symptoms
• Consider edge cases
• Keep the fix minimal and focused

6. Add Regression Test

Create a test that:

• Would have caught this bug
• Verifies the fix works
• Prevents future regression

test('should handle [specific case that was broken]', () => {
  // Test the exact scenario that was failing
});

7. Validate

npm run build
npm run lint
npm test

8. Document

Summarize:

• What was the bug
• Root cause
• How it was fixed
• Test added

Debugging Tools

Console debugging:

console.log('variable:', variable);
console.trace('call stack');

React DevTools: Check component state and props

Network tab: Check API requests/responses

Node debugging:

node --inspect script.js