Playwright React Debug MCP

剧作家React调试MCP

使用Claude和Playwright在人工智能的帮助下调试React应用程序。

A. 模型上下文协议 （MCP）服务器，使Claude能够通过浏览器与实时web应用程序进行交互。导航页面、检查DOM、监视网络请求、调试React组件和分析错误——所有这些都是通过自然对话完成的。

______________________________________________________________________

为什么使用这个？

______________________________________________________________________

特性

• 40个调试工具 跨越10个类别
• 浏览器控件 -导航、单击、填写表单、自动化用户流
• DOM检查 -元素细节、计算样式、文本提取
• 网络监控 -请求/响应正文、标头、时间
• 控制台捕获 -错误、警告、带过滤的日志
• React工具 -组件树、道具、状态、钩子检查
• 状态管理 -Redux、Zustand、React查询、上下文检查
• 演出 -渲染跟踪、慢速组件、Web重要信息
• 错误检测 -水合错误、错误边界、内存泄漏
• 无障碍 -WCAG风格审计、ARIA树检查
• 误差分析 -基于人工智能的分析，并提出修复建议

______________________________________________________________________

快速开始

安装

npm install -g playwright-react-debug-mcp
npx playwright install chromium

配置Claude桌面

添加到 ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "playwright-debug": {
      "command": "npx",
      "args": ["playwright-react-debug-mcp"]
    }
  }
}

配置Claude代码

添加到您的项目 .mcp.json:

{
  "mcpServers": {
    "playwright-debug": {
      "command": "npx",
      "args": ["playwright-react-debug-mcp"],
      "transport": "stdio"
    }
  }
}

试试看

You: Navigate to https://example.com and take a screenshot

Claude: I'll navigate to the page and capture a screenshot.
[Browser opens, navigates, returns screenshot]

Done! The page shows...

______________________________________________________________________

示例会话

You: Navigate to my app at localhost:3000/login and try logging in
     with test@example.com

Claude: I'll navigate to the login page and fill in the credentials.

[Navigates, fills email/password, clicks submit]

The login failed. Let me check what happened:

- Console: "TypeError: Cannot read property 'token' of undefined"
- Network: POST /api/auth returned 200 but body is empty
- React: AuthProvider shows { isAuthenticated: false, error: null }

The API returns 200 without a token. The frontend expects response.data.token
but data is undefined. The error state isn't being set because the HTTP
status was 200.

Suggestions:
1. Backend should return { data: { token: "..." } } or proper error status
2. Frontend should validate response structure, not just HTTP status

______________________________________________________________________

可用工具

导航与交互（11个工具）

检查（3个工具）

网络（3个工具）

控制台（2个工具）

React（4个工具）

状态管理（4个工具）

性能（3个工具）

错误检测（3个工具）

可访问性（2个工具）

高级（5个工具）

______________________________________________________________________

用例

交互式调试

What errors are on this page?
Why did the form submission fail?

自动化测试

Fill the registration form and verify it submits successfully
Click through the checkout flow and check for errors

React开发

Find the UserProfile component and show its state
What props are being passed to the Modal?
Collect all Button instances and compare their usage

API集成

What requests were made when I clicked submit?
Show me the response from the failed API call

______________________________________________________________________

配置

环境变量

{
  "mcpServers": {
    "playwright-debug": {
      "command": "npx",
      "args": ["playwright-react-debug-mcp"],
      "env": {
        "PLAYWRIGHT_HEADLESS": "true"
      }
    }
  }
}

______________________________________________________________________

发展

# Clone
git clone https://github.com/Lars-Albinsson/playwright-react-debug-mcp
cd playwright-react-debug-mcp

# Install
npm install
npx playwright install chromium

# Build
npm run build

# Run
npm start

# Watch mode
npm run dev

______________________________________________________________________

文档

• 入门指南
• 工具参考
• 例子

______________________________________________________________________

需求

• Node.js 18+
• 剧作家（铬）
• 克劳德桌面或克劳德代码

______________________________________________________________________

贡献

欢迎投稿！看 贡献.md 作为指导方针。

______________________________________________________________________

许可证

MIT许可证-请参阅 许可证 了解详情。

______________________________________________________________________

相关

• 模型上下文协议
• 剧作家
• 克劳德