AI导哈

React开发调试工具

为AI代理提供React应用实时调试能力的开发工具，支持组件状态检查、性能分析和UI问题诊断。

  • by skylarbarrera
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 skylarbarrera/react-devtools-mcp

使用说明

react-devtools桥

让AI代理看到你的React应用程序。

设置

1.将MCP服务器添加到Claude Code

.mcp.json:

{
  "mcpServers": {
    "react-devtools": {
      "command": "npx",
      "args": ["react-devtools-bridge"]
    }
  }
}

2.连接你的React应用

网络 -添加到HTML中（在应用程序捆绑包之前）：

<script src="http://localhost:8097"></script>

React Native -DevTools是内置的。不需要额外的设置。

3.（可选）安装技能

教克劳德何时使用这些工具：

npx add-skill skylarbarrera/react-devtools-mcp

或手动：

cp node_modules/react-devtools-bridge/SKILL.md ~/.claude/skills/react-devtools/SKILL.md

用法

当你的React应用程序运行时，问Claude这样的问题：

  • “计数器组件的当前状态如何？”
  • “为什么单击此按钮不更新UI？”
  • “哪些组件过于频繁地重新渲染？”

文档

许可证

麻省理工学院

相关 MCP