React组件检查工具

react-devtools mcp

React DevTools的MCP（模型上下文协议）服务器——通过AI代理检查组件树、道具、状态、钩子和配置文件渲染。

运作原理

[AI Agent / Warp] <--stdio--> [MCP Server] <--CDP/WebSocket--> [Chrome + React App]

服务器使用 puppeteer-core （约2MB，无捆绑浏览器）通过Chrome DevTools协议（CDP）连接到现有的Chrome实例。然后，它通过以下方式访问React的内部纤维树 __REACT_DEVTOOLS_GLOBAL_HOOK__ 以提取组件信息。

先决条件

1. Node.js≥20
2. 铬、铬、Edge或Brave 已安装（自动检测）
3. React应用程序在开发模式下运行 （生产建设带光纤调试信息）

注： 你做到了 不 需要手动启动Chrome --remote-debugging-portMCP会自动检测您的浏览器安装，并在您调用时自动启动调试实例 connect_to_browser。使用临时配置文件，因此不会影响您现有的会话。

如果你喜欢手动控制，你仍然可以自己启动Chrome：

复制

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

安装

来自npm

npm install -g @ferryhinardi/react-devtools-mcp

来源

git clone https://github.com/ferryhinardi/react-devtools-mcp.git
cd react-devtools-mcp
npm install
npm run build

配置

弯曲

添加到MCP配置中：

{
  "name": "react-devtools-mcp",
  "command": "react-devtools-mcp"
}

或者，如果从源代码安装：

{
  "name": "react-devtools-mcp",
  "command": "node",
  "args": ["/path/to/react-devtools-mcp/dist/index.js"]
}

开源代码

添加 ~/.config/opencode/opencode.json:

{
  "mcp": {
    "react-devtools": {
      "type": "local",
      "command": ["node", "/path/to/react-devtools-mcp/dist/index.js"],
      "enabled": true
    }
  }
}

克劳德桌面版

添加 claude_desktop_config.json:

{
  "mcpServers": {
    "react-devtools": {
      "command": "react-devtools-mcp"
    }
  }
}

可用工具

connect_to_browser

连接到Chrome。自动检测安装，并在需要时通过远程调试启动。必须先打电话。

get_component_tree

拿到 React组件树 （不是HTML DOM树）。默认情况下只返回React组件——use includeHtml: true 还包括主机元素，如 div, span.

inspect_component

深入检查组件的道具、状态、钩子、上下文和源位置。

search_components

按名称搜索组件（不区分大小写的部分匹配）。

get_page_info

获取页面URL、标题、React版本和钩子可用性。

start_profiler

开始分析组件渲染。连接到React的提交周期。

stop_profiler

停止分析并返回渲染统计信息（渲染计数、每个组件的总/平均持续时间）。

modify_state

修改组件的状态以触发重新渲染。

示例用法

> connect_to_browser
✓ Connected to http://localhost:3000 — React 18.2.0 detected

> get_component_tree { depth: 3 }
[
  { fiberIndex: 0, name: "App", type: "FunctionComponent", children: [
    { fiberIndex: 1, name: "Header", ... },
    { fiberIndex: 5, name: "TodoList", ... }
  ]}
]

> inspect_component { componentName: "TodoList" }
{
  name: "TodoList",
  props: { items: [...] },
  hooks: [
    { index: 0, type: "useState", value: [...] },
    { index: 1, type: "useEffect", value: null }
  ],
  ...
}

> start_profiler
Profiler started.

> stop_profiler
[
  { componentName: "TodoItem", renderCount: 12, totalDuration: 3.45, avgDuration: 0.29 },
  { componentName: "TodoList", renderCount: 3, totalDuration: 1.2, avgDuration: 0.4 }
]

浏览器自动检测

MCP按以下顺序搜索浏览器：

macOS： 谷歌浏览器→ 铬金丝雀→ 铬→ 微软边缘→ Brave

Linux： 谷歌chrome→ 铬→ 铬浏览器（snap）→ 微软边缘→ Brave

窗户： Chrome（程序文件）→ Chrome（x86）→ Chrome（AppData）→ Edge → Brave

如果没有找到，则返回到 which google-chrome / which chromium 在unix系统上。

局限性

• 仅适用于开发模式：Production React构建带状光纤调试信息。应用程序必须在开发模式下运行。
• 单浏览器：一次连接一个Chrome实例。
• 纤维指数是短暂的：当你打电话时，它们会重置 get_component_tree 或 search_components 再一次。
• 反应16.8+：需要带有钩子支持的React（光纤架构）。

许可证

麻省理工学院