Chrome DevTools MCP：让编码代理直接调试和分析 Chrome
给编码代理接入 Chrome DevTools，能做性能分析和浏览器调试，不只执行点击脚本。
GitHub ChromeDevTools/chrome-devtools-mcp 更新 2026-09-04 分支 main 星标 52.0K 分叉 3.6K
MCP Chrome DevTools Puppeteer 浏览器自动化

🧭 决策指南

为什么现在热： 无法从材料判断

适合，如果你

  • 你的编码代理运行在 Antigravity、Claude、Cursor 或 Copilot 中
    README“Chrome DevTools for agents”与“Getting started”列出这些 MCP 客户端示例
  • 你需要录制 Chrome trace 并提取性能洞察
    README“Key features”中的“Get performance insights”明确使用 Chrome DevTools 录制 traces
  • 你要分析网络请求、截图和带源码映射的控制台消息
    README“Key features”中的“Advanced browser debugging”列出这些能力

不适合，如果你

  • 你的运行环境不是 Google Chrome 或 Chrome for Testing
    README“Disclaimers”写明其他 Chromium 浏览器可能工作但不保证，官方仅支持两者
  • 你不能让 MCP 客户端接触浏览器中的敏感或个人信息
    README“Disclaimers”说明该工具允许 MCP 客户端检查、调试和修改浏览器数据
  • 环境缺少 Node.js LTS、当前稳定版 Chrome 或 npm
    README“Requirements”明确列出 Node.js LTS、Chrome current stable version or newer 和 npm

前置条件

  • Node.js LTS version；Chrome current stable version or newer；npm / Node.js LTS version; Chrome current stable version or newer; npm
  • 需要 MCP client；README 示例使用 npx 启动 chrome-devtools-mcp@latest / An MCP client is required; the README example starts chrome-devtools-mcp@latest with npx

第一步命令（README 原文）

"args": ["-y", "chrome-devtools-mcp@latest"]

要注意

  • 默认启用 usage statistics；可用 --no-usage-statistics 退出
    README“Usage statistics”章节及其 JSON 配置示例
  • 性能工具可能发送 trace URL；可用 --no-performance-crux 禁用
    README“Disclaimers”关于 Google CrUX API 的说明
  • 服务器默认检查 npm registry 更新并记录通知
    README“Update checks”章节
  • 仅连接 MCP server 不会自动启动浏览器
    README“Your first prompt”中的说明：只有调用需要运行中浏览器的工具时才会启动

材料未说明

  • 主要编程语言和具体版本未在项目数据中提供 / The primary programming language and exact versions are not provided in the project data
  • README 未说明性能开销、并发会话上限或稳定性数字 / The README does not state performance overhead, concurrent session limits, or stability metrics
  • 项目数据标记贡献者 0 人、版本 0 个且 No releases，实际发布流程未说明 / Project metadata reports 0 contributors, 0 versions, and No releases; the actual release process is unspecified
  • README 未给出 MCP 客户端的完整兼容矩阵 / The README does not provide a complete MCP client compatibility matrix
  • 浏览器数据修改的权限边界和隔离细节未说明 / Permission boundaries and isolation details for browser data modification are not specified

💡 深度解析

6
适合 我只需要让代理完成基础网页操作，不需要完整 DevTools 诊断；我的环境有 Node.js LTS、npm 和 Chrome，是否应该使用 slim 与 headless 模式？
适合读者： 只需要基础网页操作的自动化开发者，运行 Node.js LTS、npm 和 Chrome，并希望用无头模式减少代理工具复杂度

适合，README 已明确把 --slim 定位为基础浏览器任务，并提供与 --headless 组合的 MCP 配置。

  • “Getting started”说明，若只做 basic browser tasks，应使用 --slim 模式。
  • 示例配置原样包含 "--slim", "--headless"，因此项目直接支持减少工具集合并以无头 Chrome 运行。
  • “Requirements”要求 Node.js LTS、Chrome current stable version or newer，以及 npm；你的运行环境符合列出的前置条件。
  • 完整模式包含性能追踪、网络分析和控制台诊断，基础任务采用 slim 可以避免暴露不必要的能力。

需要注意，README 没有列出 slim 模式究竟删掉哪些工具，也没有比较 slim 与完整模式的启动耗时、内存占用或代理调用成本。

  • Getting started：If you are interested in doing only basic browser tasks, use the `--slim` mode
  • Getting started 示例：`"args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]`
  • Requirements：Node.js LTS、Chrome、npm
材料未说明：slim 模式包含和排除的完整工具清单未在 README 正文列出；slim 与完整模式的资源消耗和性能差异未说明
适合 我不使用 Claude、Cursor 或其他 MCP 客户端，但环境中有 Node.js LTS、Chrome 和 npm；我能否只通过 CLI 使用这个项目的浏览器调试和性能分析能力？
适合读者： 不使用 MCP 客户端、但已有 Node.js LTS、Chrome 和 npm 的浏览器调试开发者，希望通过 CLI 使用自动化与 DevTools 能力

适合，README 明确说明项目提供不依赖 MCP 的独立 CLI，因此不使用 MCP 客户端并不会排除你的场景。

  • 项目简介写明：“A CLI is also provided for use without MCP.” 这是对独立使用方式的直接承诺。
  • “Requirements”列出 Node.js LTS、Chrome current stable version or newer 和 npm，与你的环境约束一致。
  • “Key features”说明底层能力包括 Chrome DevTools Trace、性能洞察、网络请求分析、截图、控制台消息检查，以及 Puppeteer 自动等待。
  • 项目官方只支持 Google Chrome 和 Chrome for Testing；其他 Chromium 浏览器即使能运行，也不属于保证范围。

README 正文没有给出 CLI 的具体子命令、参数示例或与 MCP 模式完全一致的功能清单，所以可以确认可用方向，但不能确认每项 DevTools 能力都能通过 CLI 调用。

  • 项目简介：A CLI is also provided for use without MCP
  • Requirements：Node.js LTS、Chrome、npm
  • Key features：performance insights、network requests、screenshots、console messages
材料未说明：README 正文未提供 CLI 子命令和参数的完整示例；README 未说明 CLI 与 MCP 模式的功能等价性
适合 我正在把浏览器能力集成到一个浏览器子代理产品中，还需要并发会话、持久化用户目录和连接已有 Chrome；这个项目能否作为底层基础设施？
适合读者： 开发浏览器子代理产品的工程师，需要支持并发会话、持久化用户数据目录，或连接已有 Chrome 实例

适合，README 明确建议开发 agentic tooling 的团队构建在 Chrome DevTools for agents 之上，并列出你需要的高级运行方式。

  • “Integrating as a browser subagent”直接建议将项目作为产品内置 browser subagent 的基础，并给出 Gemini CLI browser agent 作为参考实现。
  • “Advanced Usage”明确覆盖 concurrent sessions、persistent user data directories，以及连接正在运行的 Chrome 实例。
  • “Configuration”还提到可配置 --headless、--isolated 和 WebSocket connections，说明它不只面向单次本地交互。
  • 架构上，MCP 将浏览器能力与具体 AI 客户端解耦，另有 CLI 可脱离 MCP 客户端使用。

但 README 没有说明并发会话的上限、隔离强度、共享 Chrome 实例的权限模型或多租户安全边界；若产品要承载不可信用户，这些信息仍不足。

  • Integrating as a browser subagent：we recommend building on top of Chrome DevTools for agents
  • Advanced Usage：concurrent sessions, persistent user data directories, connecting to a running Chrome instance
  • Configuration：`--headless`, `--isolated`, WebSocket connections
材料未说明：README 未说明并发会话上限、资源隔离方式和会话调度模型；README 未说明多租户权限、Cookie 隔离和已有 Chrome 实例的安全边界
适合 我使用 Cursor 修改前端代码，但目前仍要在 Chrome、DevTools 和代理之间手工切换；我能否用这个项目让代理完成页面交互、截图并定位带源码映射的控制台错误？
适合读者： 使用 Claude、Cursor 或 Copilot 的前端开发者，想让编码代理在修改代码后直接检查真实 Chrome 页面、网络请求和控制台错误

适合，因为它把实时 Chrome 和 Chrome DevTools 能力通过 MCP 暴露给编码代理，正好覆盖“修改—运行—观察—修复”的闭环。

  • README 的“Key features”说明，Puppeteer 会自动等待操作结果，适合处理页面交互后的异步状态。
  • 同一章节列出网络请求分析、截图和浏览器控制台消息检查，并支持带源码映射的堆栈信息。
  • “Getting started”明确列出 Antigravity、Claude、Cursor、Copilot 等客户端，并提供 MCP 配置方式。

但 README 没有说明代理对弹窗、验证码、登录流程或复杂跨域页面的成功率，也没有给出具体断言机制；这些能力不能仅凭工具列表确认。

  • Key features：使用 Puppeteer 自动等待操作结果
  • Key features：Analyze network requests, take screenshots and check browser console messages
  • Getting started：Antigravity, Claude, Cursor or Copilot
材料未说明：README 未说明复杂登录、验证码、弹窗和跨域流程的支持边界；README 未说明是否提供确定性的断言、失败重试或测试报告格式
视情况 我已经用 Chrome DevTools 做实验室 Trace 分析，还想把同一页面的 Google CrUX 真实用户体验数据放进代理的判断中；这个项目是否适合这类性能诊断？
适合读者： 负责页面加载性能的前端性能工程师，已经使用 Chrome DevTools Trace，并希望同时参考 Google CrUX 真实用户体验数据

视情况，项目能把实验室 Trace 与 CrUX 数据放在同一性能分析流程中，但 README 明确提示外部数据请求和数据解释边界。

  • “Key features”说明项目会录制 Chrome DevTools traces 并提取可操作的性能洞察。
  • “Disclaimers”说明性能工具可能把 trace URLs 发送到 Google CrUX API，以获取真实用户体验数据，并用 field data 补充 lab data。
  • 若不允许该外部请求，可使用 --no-performance-crux 禁用 CrUX 功能。
  • 项目洞察指出本地网络、机器资源、浏览器版本和页面状态会影响 Trace，不能直接代表所有真实用户环境。

因此它适合性能诊断辅助，不应被当作完整生产监控或完整用户群体统计系统。README 还未说明 CrUX 返回字段、数据延迟、覆盖范围和失败时的降级行为。

  • Key features：record traces and extract actionable performance insights
  • Disclaimers：Performance tools may send trace URLs to the Google CrUX API
  • Disclaimers：To disable this, run with the `--no-performance-crux` flag
材料未说明：README 未说明 CrUX 返回的具体指标、数据新鲜度和覆盖范围；README 未说明 CrUX API 不可用时的错误处理与降级行为
视情况 我需要在 CI 中运行 Chrome DevTools MCP，并且组织不允许默认收集工具使用统计或把 Trace URL 发送到 Google CrUX；这个项目能否满足这些约束？
适合读者： 在 CI 或共享开发环境中运行 Node.js LTS、Chrome 和 npm 的工程师，要求默认关闭使用统计并避免向 Google CrUX 发送数据

视情况，README 提供了关闭两类数据收集的开关，但是否满足组织合规要求仍取决于 CI 环境和其他外部请求策略。

  • “Usage statistics”说明 Google 默认收集工具调用成功率、延迟和环境信息，可通过 --no-usage-statistics 退出；设置 CI 环境变量也会禁用收集。
  • “Disclaimers”说明性能工具可能向 Google CrUX API 发送 Trace URL，可使用 --no-performance-crux 关闭。
  • “Update checks”说明服务默认定期检查 npm registry，可通过 CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 禁用更新检查。
  • “Requirements”要求 Node.js LTS、Chrome 和 npm，CI 仍需允许这些运行时和浏览器进程。

README 没有给出一条同时关闭所有外部通信的配置，也没有说明更新检查、CrUX 和统计之外是否存在其他网络请求，因此不能直接承诺完全离线运行。

  • Usage statistics：Data collection is enabled by default
  • Usage statistics：`--no-usage-statistics`；`CI` env variable
  • Disclaimers：`--no-performance-crux`
  • Update checks：`CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS`
材料未说明：README 未说明除统计、更新检查和 CrUX 之外是否存在其他外部网络请求；README 未说明 CI 中 Chrome 沙箱、权限和资源限制的具体要求

✨ 核心亮点

  • Chrome DevTools 可录制 trace 并提取性能洞察
  • Puppeteer 自动等待动作结果，支持可靠自动化
  • 支持网络请求、截图与源码映射控制台栈
  • MCP 客户端可检查并修改浏览器实例中的数据

🔧 工程化

  • 以 MCP server 暴露 Chrome DevTools 调试与性能工具
  • 用 Puppeteer 控制 Chrome，并自动等待动作结果
  • CLI 可脱离 MCP 使用，支持 --slim 与 --headless

⚠️ 风险

  • MCP 客户端能接触浏览器内容，敏感数据可能被暴露
  • 仅正式支持 Google Chrome 与 Chrome for Testing
  • usage statistics 默认开启，可收集调用率和环境信息
  • 性能工具可能向 Google CrUX API 发送 trace URL

👥 适合谁？

  • 使用 Antigravity、Claude、Cursor 或 Copilot 的开发者
  • 需要 Chrome 网络、截图和控制台调试的编码代理团队
  • 构建浏览器子代理并参考 Gemini CLI 的工具开发者