Agent SkillsAgent Skills
jezweb

deep-debug

@jezweb/deep-debug
jezweb
696
56 forks
Updated 4/6/2026
View on GitHub

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

$npx agent-skills-cli install @jezweb/deep-debug
Claude Code
Cursor
Copilot
Codex
Antigravity

Details

Pathskills/deep-debug/SKILL.md
Branchmain
Scoped Name@jezweb/deep-debug

Usage

After installing, this skill will be available to your AI coding assistant.

Verify installation:

npx agent-skills-cli list

Skill 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

CommandPurpose
/debugGuided 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:

SignalMeaning
All 3 agree on root causeHigh confidence - fix it
2 agree, 1 differentInvestigate the difference
All 3 differentNeed 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

AgentFinding
debuggerstate.messages in useCallback deps causes callback recreation
code-reviewerSame finding + explained React pattern causing it
ExploreVerified 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

ToolUse For
read_network_requestsSee all fetch/XHR calls, duplicates, failures
read_console_messagesErrors, warnings, debug logs
read_pageCurrent DOM state
javascript_toolExecute debug code in page context

Tips for Success

  1. Evidence first, hypotheses second - Don't guess until you have concrete data
  2. Network tab is gold - Most frontend bugs show symptoms there
  3. Parallel agents save time - 3 perspectives at once vs sequential guessing
  4. Cross-reference findings - Agreement = confidence
  5. Verify with same evidence - Confirm fix with same tools that found bug

More by jezweb

View all
electron-base
696

Build 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.

dependency-audit
696

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.

firebase-storage
696

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.

developer-toolbox
696

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.