Multi-agent investigation for stubborn bugs. Use when: going in circles debugging, need to investigate browser/API interactions, complex bugs resisting normal debugging, or when symptoms don't match expectations. Launches parallel agents with different perspectives and uses Chrome tools for evidence gathering.
Installation
Details
Usage
After installing, this skill will be available to your AI coding assistant.
Verify installation:
npx agent-skills-cli listSkill Instructions
name: deep-debug description: | Multi-agent investigation for stubborn bugs. Use when: going in circles debugging, need to investigate browser/API interactions, complex bugs resisting normal debugging, or when symptoms don't match expectations. Launches parallel agents with different perspectives and uses Chrome tools for evidence gathering. user-invocable: true
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
statein 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
More by jezweb
View allBuild secure desktop applications with Electron 33, Vite, React, and TypeScript. Covers type-safe IPC via contextBridge, OAuth with custom protocol handlers, native module compatibility (better-sqlite3, electron-store), and electron-builder packaging. Use when building cross-platform desktop apps, implementing OAuth flows in Electron, handling main/renderer process communication, or packaging with code signing. Prevents: NODE_MODULE_VERSION mismatch, hardcoded encryption keys, context isolation bypasses, sandbox conflicts with native modules.
Comprehensive dependency health auditing for JavaScript/TypeScript projects. Run npm audit, detect outdated packages, check for security advisories, and verify license compliance. Prioritises vulnerabilities by severity and provides actionable fix recommendations. Use when: auditing project dependencies, checking for vulnerabilities, updating packages, preparing for release, or investigating "npm audit" warnings. Keywords: audit, vulnerabilities, outdated, security, npm audit, pnpm audit, CVE, GHSA, license.
Build with Firebase Cloud Storage - file uploads, downloads, and secure access. Use when: uploading images/files, generating download URLs, implementing file pickers, setting up storage security rules, or troubleshooting storage/unauthorized, cors errors, quota exceeded, or upload failed errors. Prevents 9 documented errors.
Essential development workflow agents for code review, debugging, testing, documentation, and git operations. Includes 7 specialized agents with strong auto-discovery triggers. Use when: setting up development workflows, code reviews, debugging errors, writing tests, generating documentation, creating commits, or verifying builds.
