# @0x1f320\.sh/why-did-you-render-mcp-client 中文文档 规范地址：https://npmcn.com/package/%400x1f320.sh/why-did-you-render-mcp-client/ 版本：1\.0\.5 npm 元数据更新时间：2026-04-05T12:46:26.797Z 中文译文更新时间：2026-11-06T14:10:01.048Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%400x1f320.sh/why-did-you-render-mcp-client 原文对照：https://npmcn.com/package/%400x1f320.sh/why-did-you-render-mcp-client/?lang=original 项目主页：https://github.com/0x1f320/why-did-you-render-mcp#readme 源码仓库：https://github.com/0x1f320/why-did-you-render-mcp ## 关键信息（来自 npm 元数据） - 包体积（解压后）：29 kB，6 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：3 个 - peer 依赖：@welldone-software/why-did-you-render ^10\.0\.1 - 首次发布：2026-04-05T04:11:09.406Z - 最新版本发布：2026-04-05T12:46:26.679Z - 近 30 天下载量：3035（2026-10-04 至 2026-11-02，npm 官方下载统计） - 已发布版本数：12（近 12 个月 12 个） ## 中文简介 浏览器客户端,通过WebSocket获取不必要的React re-restors 并流到 MCP 服务器 ## 安装 ```sh npm install @0x1f320.sh/why-did-you-render-mcp-client ``` 也可以使用：`pnpm add @0x1f320.sh/why-did-you-render-mcp-client`、`yarn add @0x1f320.sh/why-did-you-render-mcp-client`、`bun add @0x1f320.sh/why-did-you-render-mcp-client` ## README # 为什么 - 你 - 投降 - mcp [![mcp](https://img.shields.io/npm/v/@0x1f320.sh/why-did-you-render-mcp.svg?label=mcp&style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp) [![web-client](https://img.shields.io/npm/v/@0x1f320.sh/why-did-you-render-mcp-client.svg?label=web-client&style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp-client) [![CI](https://img.shields.io/github/actions/workflow/status/0x1f320/why-did-you-render-mcp/ci.yml?style=flat&colorA=000000&colorB=000000)](https://github.com/0x1f320/why-did-you-render-mcp/actions/workflows/ci.yml) [![license](https://img.shields.io/npm/l/@0x1f320.sh/why-did-you-render-mcp?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp) 一个 [MCP 磁共振](https://modelcontextprotocol.io/) 连接的服务器 [为什么... 你..](https://github.com/welldone-software/why-did-you-render) 从浏览器到编码代理的数据。 它能实时捕捉到不必要的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` | [![npm](https://img.shields.io/npm/v/@0x1f320.sh/why-did-you-render-mcp.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp) | MCP服务器(Node.js)——曝光渲染数据作为MCP工具 | | `@0x1f320.sh/why-did-you-render-mcp-client` | [![npm](https://img.shields.io/npm/v/@0x1f320.sh/why-did-you-render-mcp-client.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@0x1f320.sh/why-did-you-render-mcp-client) | 浏览器客户端 — 抓取重报数据并发送给服务器 | 客户端可以独立安装,而不牵引服务器依赖性(MCP SDK,socket.io服务器等). ## 安装 ```sh # 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客户端作为其通知人: ```tsx 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` 默认。 您可以自定义 : ```ts const { notifier } = buildOptions({ wsUrl: "ws://localhost:5555", projectId: "my-app", }); ``` ### 2\. 将 MCP 服务器添加到您的代理服务器 克劳德代码 ```sh claude mcp add why-did-you-render -- npx -y @0x1f320.sh/why-did-you-render-mcp@latest ``` 克劳德桌面 ```sh claude mcp add-json why-did-you-render '{"command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}' -s user ``` 或手动编辑 `~/Library/Application Support/Claude/claude_desktop_config.json` (macOS)/ (中文(简体) ) `%APPDATA%\Claude\claude_desktop_config.json` (温道: ```json { "mcpServers": { "why-did-you-render": { "command": "npx", "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"] } } } ``` 光标 ```sh cursor --add-mcp '{"name":"why-did-you-render","command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}' ``` 或加进 `.cursor/mcp.json` 在您的项目中 : ```json { "mcpServers": { "why-did-you-render": { "command": "npx", "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"] } } } ``` 风起浪起 添加为 `~/.codeium/windsurf/mcp_config.json`数字 : ```json { "mcpServers": { "why-did-you-render": { "command": "npx", "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"] } } } ``` VS 代码 (GitHub 副驾驶) ```sh code --add-mcp '{"name":"why-did-you-render","command":"npx","args":["-y","@0x1f320.sh/why-did-you-render-mcp@latest"]}' ``` 或加进 `.vscode/mcp.json` 在您的项目中 : ```json { "servers": { "why-did-you-render": { "command": "npx", "args": ["-y", "@0x1f320.sh/why-did-you-render-mcp@latest"] } } } ``` ### 3\. 启动您的 Dev 服务器并与应用程序交互 MCP服务器和您的 React Dev 服务器运行后,在浏览器中与您的应用交互. 该代理现在可以使用下面的MCP工具重新查询数据. ## MCP 工具 | 工具 | 说明 | | --- | --- | | `get_renders` | 返回所有捕获到的不必要的重接,包括堆栈痕迹 。 可选过滤器 `component` 名称. | | `get_render_summary` | 返回按计数和持续时间的构成部分分组的重新提交摘要. | | `get_commits` | Lists React 输入已记录数据的ID。 使用这些标识符 `get_renders_by_commit`。 。 。 . | | `get_renders_by_commit` | 返回用于特定 React 承诺ID 的所有不必要的重报, 包括堆栈痕迹 . | | `get_tracked_components` | 列出目前追踪的组件, 由为什么- dod-you- refers. | | `get_projects` | 列出所有正在运行的项目(以其源代码 URL 所识别). | | `save_snapshot` | 将当前渲染摘要保存为命名快照供日后比较. | | `list_snapshots` | 所有被保存的列表都会用时间戳显示快照 . | | `compare_snapshots` | 比较所保存的两张快照并显示每个组件的计数变化 . | | `delete_snapshot` | 按名称删除已保存的快照 . | | `wait_for_renders` | 等待代码更改后的新制作( 如 HMR), 可配置的超时 . | | `clear_renders` | 清除所有存储的数据 。 可选择的特定项目范围. | | `pause_renders` | 暂停生成浏览器中的数据收集 。 客户停止报告直至恢复. | | `resume_renders` | 复选使先前暂停的数据收集工作 `pause_renders`。 。 。 . | 当多个项目正在运行时, 工具接受一个可选 `project` 参数(浏览器的由来 URL,例如. `http://localhost:3000`) (中文(简体) ). 如果省略,且只有一个项目存在,则自动选择. ### 堆叠痕迹 每份报告都载有: `stackFrames` 数组可以跟踪触发重交的钩子链和组件树。 客户端在每一个渲染的更新上都捕捉到一个堆栈跟踪,并用它来描述 `error-stack-parser`,过滤出 React/WDYR 内部,并通过源图将捆绑的位置解回原始源文件. 每个框架的结构如下: ```ts { 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:` 监视器而不是内入全部对象,大大缩小了文件大小. 透明地读取水合物. ## 配置 | 环境变量 | 默认 | 说明 | | --- | --- | --- | | `WDYR_WS_PORT` | `4649` | WebSocket 服务器端口 | ## 许可证 麻省理工学院 ## 常见问题 ### @0x1f320\.sh/why-did-you-render-mcp-client 是什么？ 浏览器客户端,通过WebSocket获取不必要的React re-restors 并流到 MCP 服务器 ### 如何安装 @0x1f320\.sh/why-did-you-render-mcp-client？ 在项目目录运行 npm install @0x1f320\.sh/why-did-you-render-mcp-client，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@welldone-software/why-did-you-render（^10\.0\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @0x1f320\.sh/why-did-you-render-mcp-client 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @0x1f320\.sh/why-did-you-render-mcp-client 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @0x1f320\.sh/why-did-you-render-mcp-client 可以商用吗？ @0x1f320\.sh/why-did-you-render-mcp-client 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @0x1f320\.sh/why-did-you-render-mcp-client 的下载量有多少？ 根据 npm 官方下载统计，@0x1f320\.sh/why-did-you-render-mcp-client 在 2026/10/04 – 2026/11/02 这 30 天内被下载 3,035 次，日均约 101 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @0x1f320\.sh/why-did-you-render-mcp-client 还在维护吗？ 最新版本 1\.0\.5 发布于 2026/04/05（7 个月前）；至今共发布 12 个版本，其中过去 12 个月发布了 12 个；首次发布于 2026/04/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。