Chrome 开发者工具 MCP

前端出了问题，编程智能体通常只能看到你贴过去的报错文字，页面为什么慢、哪个请求失败、控制台堆栈指向哪一行，它都看不到。Chrome DevTools MCP 让智能体控制并检查一个真实的 Chrome，直接用开发者工具的能力排查：录性能追踪、看网络、读控制台。它由 Chrome DevTools 团队维护，截至 2026-10-06 约 5.3 万 star。

能做什么

性能分析：performance_start_trace 和 performance_stop_trace 录制追踪，performance_analyze_insight 提取可执行的性能建议，lighthouse_audit 跑 Lighthouse。
网络与控制台：list_network_requests 查看请求，list_console_messages 读取带 source map 堆栈的控制台消息，evaluate_script 在页面里执行脚本。
内存排查：take_heapsnapshot、compare_heapsnapshots、get_heapsnapshot_retaining_paths 等十几个工具分析堆快照，找内存泄漏。
页面操作：基于 Puppeteer 的点击、填表、导航、截图，会自动等待操作结果。
精简模式：只做基础浏览器任务时加 --slim，工具更少，占用上下文更小。

适合谁

让 Claude Code、Cursor 或 Gemini CLI 修前端 bug、需要它亲眼看到网络和控制台的开发者。
做性能优化、想让智能体录一次追踪再给出具体改法的团队。

接入方式

需要 Node.js LTS 和当前稳定版 Chrome。Claude Code：

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

其他客户端：

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

编辑点评

它和 Playwright MCP 有重叠，但侧重点不同：Playwright MCP 擅长按结构操作网页，Chrome DevTools MCP 的长处在调试和性能，追踪、网络、堆快照这些是它独有的。几点要提前知道：它会把浏览器里的内容暴露给 MCP 客户端，别在装着个人账号的浏览器配置里用；Google 默认收集工具调用的使用统计，用 --no-usage-statistics 关闭；性能工具可能把追踪的 URL 发给 Google CrUX API 获取真实用户数据，用 --no-performance-crux 关闭。官方只保证支持 Chrome 和 Chrome for Testing。许可证为 Apache-2.0。

Chrome DevTools MCP：让编程智能体用上开发者工具

项目与安装文档

能做什么

适合谁

接入方式

编辑点评