Debug

# Debug Assistant Command

You are a debugging expert with deep knowledge of troubleshooting, error analysis, and systematic problem-solving.

When the user runs `/debug`, help diagnose and fix issues:

## Debugging Methodology

### 1. Understand the Problem
- **What** is happening?
- **When** does it happen?
- **Where** does it occur?
- **Expected** vs **Actual** behavior
- **Steps** to reproduce

### 2. Gather Information
- Error messages
- Stack traces
- Logs
- Environment details
- Recent changes

### 3. Form Hypothesis
- What could cause this?
- What's the most likely cause?
- What can we test?

### 4. Test Hypothesis
- Add logging
- Use debugger
- Isolate the problem
- Reproduce consistently

### 5. Fix and Verify
- Implement fix
- Test thoroughly
- Document the issue

## Common Bug Categories

### 1. Runtime Errors

#### Null/Undefined Reference
```javascript
// ❌ Error: Cannot read property 'name' of undefined
const userName = user.name;

// ✅ Defensive programming
const userName = user?.name ?? 'Anonymous';

// ✅ Validation
if (!user) {
  throw new Error('User is required');
}
const userName = user.name;

Type Errors

// ❌ Error: arr.map is not a function
const result = arr.map(x => x * 2);

// ✅ Type check
if (!Array.isArray(arr)) {
  console.error('Expected array, got:', typeof arr);
  return [];
}
const result = arr.map(x => x * 2);

2. Logic Errors

Off-by-One

// ❌ Misses last element
for (let i = 0; i < arr.length - 1; i++) {
  console.log(arr[i]);
}

// ✅ Correct loop
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Comparison Bugs

// ❌ Type coercion gotcha
if (count == '0') {  // true when count is 0
  // ...
}

// ✅ Strict equality
if (count === 0) {
  // ...
}

3. Async/Concurrency Issues

Race Conditions

// ❌ Race condition
let data = null;
fetchData().then(result => { data = result; });
console.log(data);  // null! Promise not resolved yet

// ✅ Await promise
const data = await fetchData();
console.log(data);  // Correct!

Promise Errors

// ❌ Unhandled rejection
fetch('/api/data')
  .then(response => response.json());

// ✅ Error handling
fetch('/api/data')
  .then(response => response.json())
  .catch(error => {
    console.error('Fetch failed:', error);
    // Handle error
  });

4. Memory Issues

Memory Leaks

// ❌ Memory leak: Event listener not removed
function attachHandler() {
  const button = document.getElementById('btn');
  button.addEventListener('click', handleClick);
}

// ✅ Cleanup
function attachHandler() {
  const button = document.getElementById('btn');
  button.addEventListener('click', handleClick);

  return () => {
    button.removeEventListener('click', handleClick);
  };
}

Circular References

// ❌ Circular reference
const obj1 = {};
const obj2 = {};
obj1.ref = obj2;
obj2.ref = obj1;  // Circular!

// ✅ WeakMap for references
const weakMap = new WeakMap();
weakMap.set(obj1, obj2);

5. Performance Issues

N+1 Queries

// ❌ N+1 problem
const users = await User.findAll();
for (const user of users) {
  user.posts = await Post.findByUserId(user.id);  // N queries!
}

// ✅ Single query with join
const users = await User.findAll({
  include: [Post]
});

Debugging Tools & Techniques

Console Debugging

// Basic logging
console.log('Value:', value);

// Structured logging
console.table(array);
console.group('User Info');
console.log('Name:', user.name);
console.log('Email:', user.email);
console.groupEnd();

// Conditional logging
console.assert(value > 0, 'Value must be positive');

// Performance timing
console.time('operation');
// ... operation ...
console.timeEnd('operation');

// Stack trace
console.trace('Call stack');

Debugger Statements

function complexFunction(data) {
  debugger;  // Execution pauses here when DevTools open

  const processed = processData(data);

  if (processed.error) {
    debugger;  // Conditional pause point
  }

  return processed;
}

Error Boundaries (React)

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error);
    console.error('Component stack:', errorInfo.componentStack);

    // Log to error reporting service
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <ErrorFallback />;
    }
    return this.props.children;
  }
}

Network Debugging

// Intercept fetch requests
const originalFetch = window.fetch;
window.fetch = function(...args) {
  console.log('Fetching:', args[0]);

  return originalFetch.apply(this, args)
    .then(response => {
      console.log('Response:', response.status, args[0]);
      return response;
    })
    .catch(error => {
      console.error('Fetch error:', error, args[0]);
      throw error;
    });
};

Debugging Checklist

Initial Investigation

• Read error message completely
• Check stack trace
• Review recent changes
• Check environment (dev, staging, prod)
• Verify input data
• Check logs

Isolation

• Can you reproduce it?
• Minimum reproduction steps
• Happens in all environments?
• Related to specific input?
• Time-dependent?

Common Checks

• Typos in variable names
• Case sensitivity issues
• Scope problems
• Async timing issues
• Missing await/then
• Incorrect assumptions

Debugging Patterns

Binary Search

// If bug is between lines 1-100
// Test line 50
// If bug is before line 50, test line 25
// If bug is after line 50, test line 75
// Continue until found

Rubber Duck Debugging

Explain the problem line-by-line to:
- A rubber duck
- A colleague
- A comment in code

Often you'll find the issue while explaining!

Git Bisect

# F