React应用调试工具

import * as Ids from 'ids-wc/dist/react/components';
import { nameLibraryComponents } from './react-debug-helper';

nameLibraryComponents(Ids);   // forwardRef(Anonymous) → MdcButton, MdcGrid, …

You: "The checkout total is wrong. Debug it."

Agent: (reads src/hooks/useCheckout.ts from filesystem)
  → 40 │ function calculateTotal(items) {
     41 │   const subtotal = items.reduce((s, i) => s + i.price, 0);
     42 │   const taxRate = getTaxRate();
     43 │   const tax = subtotal * taxRate;
     44 │   return { subtotal, tax, total: subtotal + tax };

Agent: set_breakpoint({ file: "useCheckout.ts", line: 42 })
  → "Breakpoint set. Have user trigger the code path."

Agent: "Please click the checkout button."

You: (click checkout in the browser)

Agent: wait_for_breakpoint()
  → paused at useCheckout.ts:42
     scope: { items: [...], subtotal: 29.97, taxRate: undefined }

Agent: "Found the bug — getTaxRate() returns undefined at line 42."

Agent: resume()

Agent: (edits src/hooks/useCheckout.ts on disk to fix the bug)
  → webpack dev server hot-reloads the fix

Agent: search_source({ query: "item.price" })
  → CartItem.tsx:23, PriceDisplay.tsx:8, calculateTotal.ts:12

Agent: (reads src/components/CartItem.tsx from filesystem around line 23)
Agent: set_breakpoint({ file: "CartItem.tsx", line: 23 })
Agent: "Click an item to add to cart."
You: (click)
Agent: wait_for_breakpoint()
  → scope: { item: { id: 5, price: "9.99" } }    ← price is a string!

Agent: (reads src/utils/calculateTotal.ts from filesystem around line 12)
Agent: set_breakpoint({ file: "calculateTotal.ts", line: 12 })
Agent: resume()
Agent: wait_for_breakpoint()
  → scope: { items: [...], sum: "09.999.99" }     ← string concatenation!

Agent: "Root cause: price comes from API as string, not number."
Agent: (edits src/utils/calculateTotal.ts to add parseFloat)

You: "Some cart items show wrong prices but I'm not sure which ones."

Agent: (reads src/components/CartItem.tsx from filesystem)
  → line 15: const displayPrice = formatPrice(props.price);

Agent: set_logpoint({
  file: "CartItem.tsx",
  line: 15,
  expressions: { "id": "props.id", "price": "props.price", "computed": "displayPrice" },
  label: "cart-price"
})
  → "Logpoint set. Please browse through the cart items."

Agent: "Please scroll through your cart so all items render."

You: (scroll through)

Agent: (uses chrome-devtools-mcp) list_console_messages
  → Finds messages with ⚡RDM|cart-price prefix:
    ⚡RDM|cart-price|1711234567|{"id":1,"price":9.99,"computed":"$9.99"}
    ⚡RDM|cart-price|1711234568|{"id":2,"price":"5.00","computed":"$NaN"}
    ⚡RDM|cart-price|1711234569|{"id":3,"price":12.50,"computed":"$12.50"}

Agent: "Item 2 has price as string '5.00' instead of number."
Agent: (edits the API response handler on disk to fix the type)

cd react-debug-mcp
yarn install

npm i -g .        # or: npm link

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "react-debug": {
      "type": "local",
      "command": ["react-debug-mcp"],
      "environment": {
        "CDP_PORT": "9222",
        "CDP_TARGET_URL": "localhost:3000"
      },
      "enabled": true
    },
    "chrome-devtools": {
      "type": "local",
      "command": ["npx", "-y", "chrome-devtools-mcp@latest", "--browser-url", "http://127.0.0.1:9222"],
      "enabled": true
    }
  }
}

"command": ["npx", "tsx", "/path/to/react-debug-mcp/src/index.ts"]

1. You run `opencode` in your project directory.

2. OpenCode reads opencode.jsonc, finds the "react-debug" MCP config.

3. OpenCode spawns:  react-debug-mcp
   with CDP_PORT=9222 and CDP_TARGET_URL=localhost:3000 in the env.
   The process's stdin/stdout become the JSON-RPC transport.

4. MCP handshake (over stdin/stdout):
   ← Client sends:   { method: "initialize", params: { capabilities: { ... } } }
   → Server responds: { capabilities: { tools: {}, logging: {} } }
   ← Client sends:    { method: "notifications/initialized" }

   The server advertises `logging: {}` — this tells the client it
   supports the `logging/setLevel` request and will send
   `notifications/message` log events.

5. Client discovers tools:
   ← Client sends:   { method: "tools/list" }
   → Server responds: [ { name: "get_component_tree", ... }, ... ]  (26 tools)

   OpenCode now includes these tools in the LLM's tool list.

6. Server connects to Chrome eagerly in the background (non-blocking).
   If Chrome isn't ready yet, retries on first tool call.

7. You ask the agent to debug something. The LLM picks a tool:
   ← Client sends:   { method: "tools/call", params: { name: "get_page_info" } }

   → Server evaluates the snippet in the browser, returns result.
   (If eager connect failed, this tool call triggers the retry.)

8. Throughout, the server sends log events. `data` is a structured object
   (not a flattened string), so clients render it as expandable JSON:
   → { method: "notifications/message",
       params: { level: "info", logger: "react-debug-mcp",
                 data: { msg: "connected", pageUrl: "http://localhost:3000" } } }

   These appear in OpenCode's log output and in the MCP Inspector
   logging panel (if running under the Inspector).

yarn start:inspect         # Inspector UI (config from .env)
yarn start:inspect:debug   # Inspector UI + Node inspector on :9229 (breakpoints map to .ts)

npx @modelcontextprotocol/inspector -e CDP_TARGET_URL=localhost:3000 \
  node --env-file-if-exists=.env --import tsx src/index.ts

LOG_FILE=./agent.log LOG_TOOL_RESULTS=1 yarn start   # then, in another terminal:
tail -f agent.log

{"level":"info","msg":"tool done","data":{"tool":"list_breakpoints","ms":1,"ok":true,"chars":35,"preview":"No active breakpoints or logpoints."}}
{"level":"info","msg":"tool done","data":{"tool":"get_page_info","ms":2,"ok":false,"chars":143,"preview":"Error: Cannot connect to Chrome on 127.0.0.1:1 …"}}

cp .env.example .env   # then edit values
yarn start             # picks up .env automatically

bin/
└── cli.mjs                    # `react-debug-mcp` executable: registers tsx, imports src/index.ts

src/
├── index.ts                   # Entry point
├── env.ts                     # Parses all env vars once → typed ENV object
├── limits.ts                  # Centralized limits & tunables (single source of truth)
├── cdp-client.ts              # Lazy CDP connection (memoized) + evaluate()
├── logger.ts                  # Dual-mode logging (MCP notifications + stderr)
├── url-filters.ts             # Shared browser-internal URL-prefix filters
├── types/
│   ├── chrome-remote-interface.d.ts # Type shim (package ships no types)
│   └── globals.d.ts           # Window augmentations for browser-side snippet globals
├── collectors/
│   ├── network.ts             # Captures API requests/responses (live + historical backfill)
│   └── debugger/              # CDP Debugger domain (split into sub-modules)
│       ├── index.ts           # Barrel: attach() + re-exports
│       ├── state.ts           # Shared mutable state (CDP client, script map, pause state)
│       ├── scripts.ts         # Script tracking, source map resolution, URL helpers
│       ├── breakpoints.ts     # Set/remove breakpoints and logpoints (source map fallback)
│       ├── pause.ts           # Wait, step, resume, scope inspection
│       └── source-reading.ts  # Read and search bundled script source (parallel search)
├── tools/
│   ├── react.ts               # React component inspection (8 tools)
│   ├── store.ts               # State store reading (1 tool)
│   ├── network.ts             # Network response querying (1 tool)
│   ├── debugger.ts            # Breakpoints, source reading + logpoints (15 tools)
│   └── general.ts             # evaluate_in_page (1 tool)
└── snippets/                  # Browser-side code that runs inside the page
    ├── index.ts               # Barrel: bundles functions → CDP-ready strings
    ├── bundle.ts              # fn.toString() bundler utility
    ├── helpers.ts             # Shared helpers (fiber lookup, display name, hooks, …)
    ├── page-info.ts           # get_page_info snippet
    ├── component-tree.ts      # get_component_tree snippet
    ├── component-path.ts      # get_react_component_path snippet
    ├── find-components.ts     # find_react_component snippet
    ├── inspect-by-name.ts     # inspect_react_component_by_name snippet
    ├── inspect-by-selector.ts # inspect_react_component snippet
    ├── inspect-context.ts     # inspect_react_context snippet
    ├── error-boundaries.ts    # get_react_error_boundaries snippet
    └── store-reader.ts        # get_store_state snippet

Uncaught ReferenceError: __name is not defined
    at componentTree (<anonymous>:16:838)

⚡RDM|<label>|<timestamp>|<JSON data>