🇺🇸English
Deep Debug - Multi-Agent Investigation
Status : Production Ready Last Updated : 2026-02-03 Dependencies : Chrome MCP tools (optional), debugger agent, code-reviewer agent
When to Use
- Going in circles - You've tried multiple fixes but nothing works
- Browser + API interaction bugs - Need to see Network tab, console logs
- Symptoms don't match expectations - Something deeper is wrong
- Complex state management bugs - React hooks, closures, race conditions
Commands
| Command | Purpose |
|---|
/debug | Guided debugging workflow with evidence gathering and parallel investigation |
Quick Start
/debug [description of the bug]
Or invoke naturally:
- "I'm stuck on this bug, can you do a deep investigation?"
- "This bug is resisting normal debugging"
- "I need you to really dig into this"
The Process
Phase 1: Gather Evidence (Before Hypothesizing)
For browser-related bugs , use Chrome MCP tools:
// Get network requests (look for duplicates, failures, timing)
mcp__claude-in-chrome__read_network_requests
// Get console logs (errors, warnings, debug output)
mcp__claude-in-chrome__read_console_messages
// Get page state
mcp__claude-in-chrome__read_page
For backend bugs , gather:
- Error logs and stack traces
- Request/response payloads
- Database query logs
- Timing information
Phase 2: Launch Parallel Investigation (3 Agents)
Launch these agents simultaneously with the gathered evidence:
Agent 1: Execution Tracer (debugger)
Task(subagent_type="debugger", prompt="""
EVIDENCE: [paste network/console evidence]
Trace the execution path that leads to this bug. Find:
1. Where the bug originates
2. What triggers it
3. The exact line/function causing the issue
Focus on TRACING, not guessing.
""")
Agent 2: Pattern Analyzer (code-reviewer)
Task(subagent_type="code-reviewer", prompt="""
EVIDENCE: [paste evidence]
Review the relevant code for common bug patterns:
- React useCallback/useMemo dependency issues
- Stale closures
- Race conditions
- State update ordering
- Missing error handling
Find patterns that EXPLAIN the evidence.
""")
Agent 3: Entry Point Mapper (Explore)
Task(subagent_type="Explore", prompt="""
EVIDENCE: [paste evidence]
Map all entry points that could trigger this behavior:
- All places [function] is called
- All event handlers involved
- All state updates that affect this
Find if something is being called MULTIPLE TIMES or from UNEXPECTED places.
""")
Phase 3: Cross-Reference Findings
After agents complete, look for:
| Signal | Meaning |
|---|
| All 3 agree on root cause | High confidence - fix it |
| 2 agree, 1 different | Investigate the difference |
| All 3 different | Need more evidence |
Phase 4: Verify Fix
After implementing the fix, re-gather the same evidence to confirm:
- Network tab shows expected behavior
- Console has no errors
- State updates correctly
Real Example: Duplicate API Calls Bug
Evidence Gathered
Network tab showed 2 fetch requests for the same message.
Parallel Investigation Results
| Agent | Finding |
|---|
| debugger | state.messages in useCallback deps causes callback recreation |
| code-reviewer | Same finding + explained React pattern causing it |
| Explore | Verified UI layer wasn't double-calling (ruled out) |
Root Cause (Consensus)
sendMessage useCallback had state.messages in dependency array. Every state update recreated the callback, causing duplicate calls during React re-renders.
Fix
Use stateRef to access current state without including in dependencies:
const stateRef = useRef(state);
stateRef.current = state;
const sendMessage = useCallback(async (text) => {
// Use stateRef.current instead of state
const messages = stateRef.current.messages;
// ...
}, [/* state.messages removed */]);
Common Bug Patterns This Catches
React Hook Issues
state in useCallback dependencies causing recreation- Missing dependencies causing stale closures
- useEffect running multiple times
API/Network Issues
- Duplicate requests (visible in Network tab)
- Race conditions between requests
- CORS failures
- Timeout handling
State Management Issues
- State updates not batching correctly
- Optimistic updates conflicting with server response
- Multiple sources of truth
Chrome Tools Quick Reference
| Tool | Use For |
|---|
read_network_requests | See all fetch/XHR calls, duplicates, failures |
read_console_messages | Errors, warnings, debug logs |
read_page | Current DOM state |
javascript_tool | Execute debug code in page context |
Tips for Success
- Evidence first, hypotheses second - Don't guess until you have concrete data
- Network tab is gold - Most frontend bugs show symptoms there
- Parallel agents save time - 3 perspectives at once vs sequential guessing
- Cross-reference findings - Agreement = confidence
- Verify with same evidence - Confirm fix with same tools that found bug
Weekly Installs
162
Repository
jezweb/claude-skills
GitHub Stars
650
First Seen
Feb 2, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykFail
Installed on
claude-code130
opencode110
gemini-cli103
replit98
codex97
cursor95
