メニュー
Debug a running web app via the web-debugger SDK: app logs, application state, runtime snapshots, React state, query cache.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | web-debugger |
| description | Debug a running web app via the web-debugger SDK: app logs, application state, runtime snapshots, React state, query cache. |
Runtime debugging for web applications via the web-debugger-mcp server. Provides structured logs and on-demand state snapshots from both browser and server — all saved to files for context-efficient consumption.
┌─────────────┐ WebSocket ┌──────────────────┐ stdio ┌───────────┐
│ Web App │────────────→│ web-debugger-mcp │←────────→│ Claude │
│ (SDK) │ port 7600 │ (MCP server) │ │ (agent) │
└─────────────┘ └──────────────────┘ └───────────┘
The web app uses the client SDK to send logs and register state providers. The MCP server receives these over WebSocket, writes them to .web-debugger/, and exposes three MCP tools for the agent.
| Tool | Purpose | Returns |
|---|---|---|
get_logs | Get path to current session's JSONL log file | { logFile: "<path>" } |
get_snapshot | Request state snapshot from a provider | { snapshotFile: "<path>", provider: "<name>" } |
list_providers | List all registered state providers | { providers: [{ name, source }] } |
The MCP server is bundled with the ai-resources plugin. When the plugin is installed, the web-debugger MCP server starts automatically — no manual claude mcp add needed.
The server listens on WebSocket port 7600 (override with WEB_DEBUGGER_PORT env var). Output directory defaults to .web-debugger/ (override with WEB_DEBUGGER_DIR env var).
After building (cd web-debugger-mcp && bun run build), the binary is placed in the plugin's servers/ directory.
The web app must integrate the client SDK. This is done by the app developer, not the agent.
import { createDebugger } from "web-debugger-mcp/client";
const dbg = createDebugger();
// Log events
dbg.log("info", "User logged in", { userId: "abc123" });
// Register state providers for on-demand snapshots
dbg.registerProvider("app-state", () => store.getState());
dbg.registerProvider("react-query", () => queryClient.getQueryCache().getAll());
The SDK auto-detects browser vs server environment, silently degrades when the MCP server isn't running, and is a no-op in production (NODE_ENV explicitly set to non-development).
Always start by discovering what state the app exposes:
list_providers → see what's available
Get the log file path and read it to understand what happened:
get_logs → { logFile: ".web-debugger/logs/session-20260330-143022-a1b2.jsonl" }
Then read the file. Each line is a JSON object:
{"timestamp":"2026-03-30T14:30:22.000Z","level":"error","source":"server","message":"Failed to fetch user","context":{"userId":"abc","statusCode":500}}
Log fields: timestamp, level (info/warn/error/debug), source (browser/server), message, context (optional structured data).
Request a snapshot from a specific provider to inspect runtime state:
get_snapshot → provider: "app-state"
→ { snapshotFile: ".web-debugger/snapshots/app-state-20260330-143045-c3d4.json" }
Then read the snapshot file. Snapshots are pretty-printed JSON.
For full debugging, combine with browser automation:
get_logs to check what errors occurred during the interactionget_snapshot to inspect application state at the point of failureSee /browser-automation for Playwright tool usage.
Snapshots automatically serialize non-JSON-native types. When reading snapshot files, recognize these tagged objects:
| Type | Serialized Form |
|---|---|
Set | { "__type": "Set", "values": [...] } |
Map | { "__type": "Map", "entries": [[key, value], ...] } |
Date | { "__type": "Date", "value": "2026-03-30T..." } |
RegExp | { "__type": "RegExp", "source": "\\d+", "flags": "gi" } |
Error | { "__type": "Error", "name": "TypeError", "message": "...", "stack": "..." } |
BigInt | { "__type": "BigInt", "value": "12345" } |
undefined | { "__type": "undefined" } |
Function | { "__type": "Function", "name": "myFunc" } |
| Circular ref | { "__type": "circular" } |
All output is under .web-debugger/ (relative to the project root):
.web-debugger/
├── logs/
│ └── session-YYYYMMDD-HHmmss-XXXX.jsonl # one per server connect
└── snapshots/
└── <provider>-YYYYMMDD-HHmmss-XXXX.json # one per snapshot request
get_logs returns "No active session" — The web app hasn't connected yet. Start the dev server and ensure the SDK is initialized.list_providers returns empty — No providers registered. The app must call debugger.registerProvider().get_snapshot returns "provider_not_found" — The provider name doesn't match. Use list_providers to check exact names.get_snapshot returns "snapshot_timeout" — The provider took >10s to respond. The app may be frozen or the provider callback is hanging.Add terms, context, or instructions to Shama voice-to-text files for clipboard mode (Ctrl+Opt+Space) or shell-command mode (Ctrl+Opt+S), at project or global level.
Initialize Shama voice-to-text config for the project — create voice.json, voice-vocabulary.md, voice-context.md, and register the project in Shama's registry.toml.
Reflect on codebase navigation effectiveness at end of conversation. Surfaces dead ends, inefficiencies, missing context. Does not write files — pair with /kiro:steering-custom to persist.
Use when picking or vetting a keyboard shortcut on macOS. Triggers include "what hotkey should I use for X", "is `<combo>` available", "does this shortcut conflict", "recommend a keybinding for…", "check `<combo>` against my setup", "pick a hotkey for…", or any mention of choosing/binding/changing a shortcut in WezTerm, tmux, Zed, Chrome, Claude Code, or macOS. Determines whether a proposed combo collides with OS-reserved bindings, app defaults, or the user's customizations, and recommends ergonomic alternatives when needed.
Detect and remove dead code with knip. Use when the user asks to "run knip", "find unused files", "find unused exports", "find unused dependencies", "clean up dead code", "remove dead code", "set up knip", "configure knip", "knip.json", "knip false positive", "knip CI", or mentions a `knip` config, dependency bloat, bundle bloat from unused imports, or tree-shaking unused exports. Covers the configuration-first workflow, confidence-gated deletion, framework-specific gotchas (Next.js 15+, Tailwind, Storybook, Jest, Bun's test runner and `bun build --compile`), monorepos, CI integration, and performance tuning.
This skill should be used when the user asks to "set up react-scan", "install react-scan", "diagnose React re-renders", "find unnecessary renders", "find unstable props", "automate React render checks with Playwright", "react-scan + playwright", "measure component renders programmatically", "check why a React component is slow", or mentions React rendering issues, slow React interactions, render counts, or component-level perf attribution. Covers install across Next.js/Vite/Remix/script-tag/browser-extension, the lite headless API for CI, and the canonical render-attribution → fix → validate loop driven through Playwright.