为什么 - 你 - 投降 - mcp

一个 MCP 磁共振 连接的服务器 为什么... 你.. 从浏览器到编码代理的数据。 它能实时捕捉到不必要的React re-restrest reports,并被曝光为MCP工具,因此代理商无需人工浏览器检查就可以诊断并解决性能问题.

如何运作

Browser (React app)
  │
  │  why-did-you-render detects unnecessary re-render
  │
  ▼
Client (runs in browser)  ── WebSocket ──▶  MCP Server (Node.js)
                                                │
                                                ├─ Persists to ~/.wdyr-mcp/renders/
                                                │
                                                ▼
                                          Coding Agent (Claude, etc.)
                                          queries via MCP tools

这个 客户端 在您的 React app 中运行 why-did-you-render当发现不必要的重报时,它会将渲染数据进行消毒,并通过WebSocket发送给 MCP 服务器. 服务器存储作为JSONL文件报告,并通过编码代理商可以查询的MCP工具将其曝光.

软件包

这个项目是一个单曲,有两个已公布的软件包:

软件包	无	说明
@0x1f320.sh/why-did-you-render-mcp		MCP服务器(Node.js)——曝光渲染数据作为MCP工具
@0x1f320.sh/why-did-you-render-mcp-client		浏览器客户端 — 抓取重报数据并发送给服务器

客户端可以独立安装,而不牵引服务器依赖性(MCP SDK,socket.io服务器等).

安装

# In your React project (client only — no server deps)
npm install @0x1f320.sh/why-did-you-render-mcp-client@latest @welldone-software/why-did-you-render

设置

1. 配置为何与客户投降

在您的应用程序的切入点( 如 . src/main.tsx 或者说 src/index.tsx),设置 why-did-you-render 以MCP客户端作为其通知人:

import React from "react";
import whyDidYouRender from "@welldone-software/why-did-you-render";
import { buildOptions } from "@0x1f320.sh/why-did-you-render-mcp-client";

if (process.env.NODE_ENV === "development") {
  whyDidYouRender(React, {
    ...buildOptions(),
    trackAllPureComponents: true,
  });
}

客户端自动使用 location.origin 作为工程标识符并连接到 ws://localhost:4649 默认。 您可以自定义 :

const { notifier } = buildOptions({
  wsUrl: "ws://localhost:5555",
  projectId: "my-app",
});

2. 将 MCP 服务器添加到您的代理服务器

claude mcp add why-did-you-render -- npx -y @0x1f320.sh/why-did-you-render-mcp@latest

claude mcp add-json why-did-you-render '{"command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}' -s user

{
  "mcpServers": {
    "why-did-you-render": {
      "command": "npx",
      "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"]
    }
  }
}

cursor --add-mcp '{"name":"why-did-you-render","command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}'

{
  "mcpServers": {
    "why-did-you-render": {
      "command": "npx",
      "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"]
    }
  }
}

{
  "mcpServers": {
    "why-did-you-render": {
      "command": "npx",
      "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"]
    }
  }
}

code --add-mcp '{"name":"why-did-you-render","command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}'

{
  "servers": {
    "why-did-you-render": {
      "command": "npx",
      "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"]
    }
  }
}

3. 启动您的 Dev 服务器并与应用程序交互

MCP服务器和您的 React Dev 服务器运行后,在浏览器中与您的应用交互. 该代理现在可以使用下面的MCP工具重新查询数据.

MCP 工具

当多个项目正在运行时, 工具接受一个可选 project 参数(浏览器的由来 URL,例如. http://localhost:3000) (中文(简体) ). 如果省略,且只有一个项目存在,则自动选择.

堆叠痕迹

每份报告都载有: stackFrames 数组可以跟踪触发重交的钩子链和组件树。 客户端在每一个渲染的更新上都捕捉到一个堆栈跟踪,并用它来描述 error-stack-parser,过滤出 React/WDYR 内部,并通过源图将捆绑的位置解回原始源文件.

每个框架的结构如下:

{
  type: "hook" | "component",  // "hook" for names starting with `use`, otherwise "component"
  name: string,                // e.g. "useFilter", "Dashboard"
  location: {
    path: string,              // source file path (source-mapped when available)
    line: number,              // line number in the source file
  },
}

探员可以使用 stackFrames 指定每次不必要的重报的确切源位置——直接导航到导致它的文件和行上,而不需要人工浏览器检查.

抓图

快照让特工在某个时间点捕捉到当前渲染摘要,并将其与后期状态相提并论. 这对于衡量代码更改是否实际减少不必要的重报很有用:

1. 打电话 save_snapshot 并有名称(例如. "before-fix"(中文(简体) )
2. 更改代码并与应用程序交互
3. 打电话 save_snapshot 使用另一个名称(例如:. "after-fix"(中文(简体) )
4. 打电话 compare_snapshots 以查看每个组件的计数变化

将快照存储为 JSON 文件 ~/.wdyr-mcp/snapshots/。 。 。 .

HMR - 意识等待

wait_for_renders 允许代理在代码更改后等待新制作 。 它从Vite和webpack中检测出HMR(热模块替换)事件,因此它知道浏览器何时应用了更新. 这使得工作流程能够:

1. 代理编辑代码
2. 代理电话 wait_for_renders (可选的超时)
3. 工具等待HMR完成, 并需要更新
4. 返回新渲染数据进行分析

提交级别分组

每个渲染报告都标记为反应 执行标识,允许特工检查哪些部件在同一项承诺中重新交接在一起。 客户端追踪通过钩入 __REACT_DEVTOOLS_GLOBAL_HOOK__.onCommitFiberRoot,每一次行动都会同步呼叫。 典型的工作流程 :

1. 打电话 get_commits 以列表可用的承诺ID
2. 打电话 get_renders_by_commit 带有特定识别码,可以看到所有犯罪

建筑

Browser (project-a) ──┐
Browser (project-b) ──┤
                      ▼
                MCP #1 → WS(:4649)  (first instance binds, "owner")
                MCP #2 → WS(:4649)  → relay client ──▶ MCP #1
                      │
                      ▼
               ~/.wdyr-mcp/
               ├─ renders/  (JSONL files, shared across instances)
               │  ├─ http___localhost_3000.jsonl
               │  └─ http___localhost_5173.jsonl
               └─ snapshots/  (JSON files, named snapshots)
                  └─ before-fix.json

• 多个 MCP 实例 可以同时运行。 只有第一审("所有者")启动WebSocket服务器;其他客户端作为 socket.io 客户端连接到转发指令(如暂停/重置)到所有者. 所有实例都共享相同的数据目录 .
• 多项目支助 - 每个项目由下列人员确定: location.origin. Render 数据存储于每个项目的 JSONL 文件.
• 不需要守护进程 ——每个MCP实例都是独立的. WebSocket 服务器是机会性的, 由任何先开始的例子来声称 。 需要WS访问的指令被转发给所有者.
• 值字典分解 ——招标报告经常重复同样内容 prevValue编号 :nextValue 跨越上千个条目的物体。 每个JSONL文件在其一行存储一个内容地址的字典,将xxhash-wasm hashes映射到独特的值. 线条通过 @@ref:<hash> 监视器而不是内入全部对象,大大缩小了文件大小. 透明地读取水合物.

配置

许可证

麻省理工学院