AI导哈

Chrome DevTools MCP 服务器

Chrome DevTools MCP 服务器集成了 Chrome 的调试功能，通过 Model Context Protocol 与 Claude Code 集成，提供实时代码验证、网络诊断、用户行为模拟等功能。

  • by mitchallen
  • 本地部署
  • 更新于
在 GitHub 查看 mitchallen/claude-chrome-mcp

使用说明

Chrome DevTools MCP服务器设置

该项目配置了Chrome DevTools MCP服务器，该服务器通过模型上下文协议将Chrome的调试功能与Claude Code集成在一起。

设置

这 .mcp.json 此项目中的文件配置Chrome DevTools MCP服务器：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

入门指南

  1. 重新启动Claude代码 -重新启动Claude Code会话以加载MCP服务器
  2. 批准服务器 -当Claude Code重新启动时，它将检测MCP服务器并提示您批准它
  3. 测试IT -一旦获得批准，您可以通过询问Claude来测试它，例如：“请检查web.dev的LCP”

能力

一旦激活，Claude将可以访问Chrome DevTools功能，包括：

  • 浏览器中代码更改的实时验证
  • 网络和控制台错误诊断
  • 用户行为模拟（导航、表单填写）
  • 实时DOM和CSS检查
  • 绩效跟踪和审计

测试结果示例

以下是一个测试Chrome MCP服务器以验证所有功能的示例：

核心功能

  • 配置：已验证 .mcp.json 已正确配置 chrome-devtools-mcp@latest
  • 页面管理：已成功列出和管理浏览器页面
  • 导航：导航到多个URL（例如.com、iana.org、web.dev）

交互能力

  • 快照：通过可访问性树捕获的页面结构，显示所有带有UID的元素
  • 点击事件：成功单击链接并在页面之间导航
  • 截图：捕获页面的视觉截图
  • 脚本执行：运行JavaScript以提取页面信息（标题、URL、userAgent）

DevTools功能

  • 网络监控：列出了带有状态代码和资源类型的网络请求
  • 控制台的日志：已成功检查控制台消息
  • 性能跟踪：对web.dev进行全面的性能分析，包括：
    • 核心网络生命体征（LCP:736ms，CLS:0.07）
    • 性能洞察（LCP故障、渲染阻塞、第三方影响）
    • 网络依赖性分析
    • 缓存建议

所有MCP工具均已验证工作正常，使Claude能够：

  • 浏览网页并与之交互
  • 检查DOM结构和样式
  • 监控网络活动
  • 执行绩效审计
  • 执行自定义JavaScript
  • 截取屏幕截图和快照

更多信息

有关完整的工具文档，请参阅 Chrome DevTools MCP工具参考.

相关 MCP