| name | debug-assistant |
| description | Systematic debugging assistant that helps identify and fix bugs through
structured analysis, hypothesis testing, and root cause identification.
Use when facing errors, unexpected behavior, or mysterious bugs.
|
Debug Assistant Skill
Goal
Provide systematic debugging support through structured analysis, hypothesis generation, and methodical testing to identify and fix bugs efficiently.
Activation Triggers
- User reports an error or bug
- User says "debug", "fix this error", "why isn't this working"
- Test failures need investigation
- Unexpected behavior reported
Debugging Framework
1. Gather Information
echo "=== Recent Error Logs ==="
tail -50 *.log 2>/dev/null || echo "No log files"
echo "=== Test Failures ==="
npm test 2>&1 | tail -50 || echo "No test command"
echo "=== Type Errors ==="
npm run typecheck 2>&1 | tail -30 || tsc --noEmit 2>&1 | tail -30 || echo "No typecheck"
echo "=== Console Errors ==="
2. Reproduce the Bug
Questions to ask:
- What is the expected behavior?
- What is the actual behavior?
- What are the exact steps to reproduce?
- When did this start happening?
- What changed recently?
Reproduction checklist:
git log --oneline -10
git diff HEAD~5 --name-only
npm ci && npm run build && npm test
3. Form Hypotheses
Based on the error, generate possible causes:
| Symptom | Possible Causes |
|---|
TypeError: undefined | Missing null check, async timing, wrong import |
Network error | API down, wrong URL, CORS, auth expired |
Test timeout | Infinite loop, missing async/await, slow DB |
Build failure | Type mismatch, missing dependency, syntax error |
Runtime crash | Memory leak, stack overflow, unhandled promise |
4. Investigate Systematically
For Each Hypothesis:
A. Identify relevant code
grep -rn "errorKeyword" src/ --include="*.ts" | head -20
grep -rn "functionName" src/ --include="*.ts" | head -10
B. Trace the execution path
grep -rn "functionName(" src/ --include="*.ts" | head -20
grep -rn "from.*module" src/ --include="*.ts" | head -10
C. Check the data flow
- What inputs does this code receive?
- What state does it depend on?
- What outputs does it produce?
D. Add diagnostic logging (temporarily)
console.log('[DEBUG] Input:', JSON.stringify(input, null, 2));
console.log('[DEBUG] State:', JSON.stringify(state, null, 2));
console.log('[DEBUG] Output:', JSON.stringify(output, null, 2));
5. Isolate the Bug
Binary Search Method:
- Find a known working state (git bisect or manual)
- Find the breaking point
- Narrow down to the specific change
git bisect start
git bisect bad HEAD
git bisect good <known-good-commit>
Minimal Reproduction:
- Remove unrelated code
- Simplify inputs
- Isolate the failing case
6. Fix the Bug
Fix Categories:
| Bug Type | Fix Pattern |
|---|
| Null/undefined | Add null check, optional chaining |
| Type mismatch | Fix types, add type guards |
| Race condition | Add await, use mutex, fix ordering |
| Logic error | Fix conditional, fix algorithm |
| Missing error handling | Add try/catch, handle edge case |
Fix Verification:
npm test -- --testPathPattern="related-test"
npm test
npm run typecheck
7. Prevent Regression
After fixing:
- Add a test that would have caught this bug
- Consider if similar bugs exist elsewhere
- Update documentation if behavior was unclear
- Add comments explaining the fix
Debug Output Format
🔍 Debug Session: [Bug Description]
### 1. Symptoms
- Error: [Exact error message]
- Location: [File:line]
- Frequency: [Always/Sometimes/Rare]
### 2. Reproduction
```bash
[Steps to reproduce]
3. Hypotheses
| # | Hypothesis | Likelihood | Evidence |
|---|
| 1 | [Cause] | High/Med/Low | [Why] |
| 2 | [Cause] | High/Med/Low | [Why] |
4. Investigation
Testing Hypothesis 1:
[Investigation steps and findings]
Result: [Confirmed/Ruled out]
5. Root Cause
[Detailed explanation of what's actually wrong]
6. Fix
[problematic code]
[fixed code]
7. Verification
8. Prevention
## Common Bug Patterns
### JavaScript/TypeScript
**Async/Await Issues**
```typescript
// Bug: Not awaiting
const data = fetchData(); // Returns Promise, not data
// Fix:
const data = await fetchData();
Closure Issues
for (var i = 0; i < 10; i++) {
setTimeout(() => console.log(i), 100);
}
for (let i = 0; i < 10; i++) {
setTimeout(() => console.log(i), 100);
}
This Binding
class Foo {
handleClick() { console.log(this.value); }
}
button.onClick = foo.handleClick;
button.onClick = foo.handleClick.bind(foo);
handleClick = () => { console.log(this.value); }
React Specific
Stale Closure in useEffect
useEffect(() => {
const interval = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
useEffect(() => {
const interval = setInterval(() => {
setCount(c => c + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
Integration with Persistence Skill
When persistence skill is active:
- Keep investigating until root cause found
- Keep fixing until tests pass
- Keep refining until fix is clean
- Don't give up on mysterious bugs