Chrome DevTools MCP

这个 Agent 能做什么，适合哪些场景？

Chrome DevTools MCP 是一个面向编码智能体的 MCP 服务器，同时提供不依赖 MCP 的 CLI。它通过 Puppeteer 驱动 Chrome，并借助 Chrome DevTools 采集性能轨迹、检查网络请求、控制台消息、页面状态和内存快照。智能体可以导航页面、填写表单、执行脚本、截屏、模拟设备环境，并生成可供后续诊断的调试与性能结果。服务既能启动带专用配置目录的新 Chrome 实例，也能通过自动连接、调试端口或 WebSocket 接入现有浏览器。它适合需要真实浏览器证据的开发和测试流程，但会把浏览器内容暴露给 MCP 客户端，并依赖受官方支持的 Chrome 或 Chrome for Testing。

MCP 客户端启动 chrome-devtools-mcp 后，服务器在工具首次需要浏览器时启动 Chrome，或通过 --autoConnect、--browser-url、--wsEndpoint 连接现有实例。智能体可用 navigate_page、click、fill_form、press_key 和 upload_file 操作页面，用 evaluate_script 执行页面脚本，并通过 take_snapshot、take_screenshot、控制台和网络请求工具读取运行状态。性能流程由 performance_start_trace、performance_stop_trace 和 performance_analyze_insight 组成；内存调试工具可拍摄、比较并分析堆快照。它还可按配置启用 Lighthouse、扩展、PWA、WebMCP、第三方开发工具和录屏能力；其中部分属于实验功能或需要额外依赖。输出返回给 MCP 客户端，CLI 则提供不经过 MCP 的使用路径。

1. 前端开发者让编码智能体复现页面交互，并结合控制台消息和带源码映射的堆栈定位运行时错误。
2. 性能工程师对指定网站录制 Chrome 性能轨迹，再提取可执行的性能洞察，并可结合 CrUX 现场数据。
3. 测试工程师在真实 Chrome 中执行导航、点击、表单填写、文件上传和截图，验证关键用户流程。
4. Web 开发者检查请求列表和单个网络请求，以排查接口失败、资源加载异常或页面行为问题。
5. 内存问题调查者启用实验性内存调试，拍摄和比较堆快照，查看支配关系、保留路径及重复字符串。
6. 沙箱内运行智能体的团队通过远程调试端口或 WebSocket，让 MCP 服务连接宿主机上的 Chrome。

如何安装或部署这个 Agent？

先安装 Node.js LTS、npm，以及当前稳定版或更新版本的 Google Chrome；Chrome for Testing 也受官方支持。将以下配置加入 MCP 客户端：

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

Codex 也可以直接注册该服务器：

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

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", "--slim", "--headless"]
    }
  }
}

基础安装不要求 API 凭据；使用受认证的网站时，浏览器会处理相应登录状态。通过带认证的 WebSocket 连接时，可用 --wsHeaders 提供自定义请求头。

如何使用这个 Agent？

启动已配置的 MCP 客户端，然后发送首个测试提示：

Check the performance of https://developers.chrome.com

客户端调用需要浏览器的工具后，服务器才会自动启动 Chrome，并录制性能轨迹。若要连接已经运行的 Chrome，可先这样配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

随后以非默认用户数据目录开启远程调试；Linux 示例：

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

多个智能体共享同一服务器实例时，可增加 --experimentalPageIdRouting，让页面级工具按 pageId 路由。多个独立会话若要避免共用默认配置目录，可同时使用 --isolated。

这个 Agent 有哪些优点和局限？

这个 Agent 与同类方案有什么区别？

与相关度最高的同类 agent 并排比较关键指标。

FollowAgents 如何评估这个 Agent？

最近版本

来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。

1. chrome-devtools-mcp-v1.11.0 chrome-devtools-mcp: v1.11.0 2026-10-15
   发布说明摘录

   [1.11.0](https://github.com/ChromeDevTools/chrome-devtools-mcp/compare/chrome-devtools-mcp-v1.10.1...chrome-devtools-mcp-v1.11.0) (2026-10-15) 🎉 Features * add --file-navigations flag to reject file: URL navigations ([#2853](https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/2853)) ([54cae57](https://github.com/ChromeDevTools/chrome-devtools-mcp/commit/54cae57bcfae752f80cab2f02fd802c3bcb740ec)) …

   在 GitHub 查看 ↗
2. chrome-devtools-mcp-v1.10.1 chrome-devtools-mcp: v1.10.1 2026-09-23
   发布说明摘录

   [1.10.1](https://github.com/ChromeDevTools/chrome-devtools-mcp/compare/chrome-devtools-mcp-v1.10.0...chrome-devtools-mcp-v1.10.1) (2026-09-23) 🛠️ Fixes * build: resolve node export conditions in rollup bundle ([#2814](https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/2814)) ([d7c9b55](https://github.com/ChromeDevTools/chrome-devtools-mcp/commit/d7c9b55490d0be66f1d8c77711aaf6854af8ceb7))

   在 GitHub 查看 ↗
3. chrome-devtools-mcp-v1.10.0 chrome-devtools-mcp: v1.10.0 2026-09-23
   发布说明摘录

   [1.10.0](https://github.com/ChromeDevTools/chrome-devtools-mcp/compare/chrome-devtools-mcp-v1.9.0...chrome-devtools-mcp-v1.10.0) (2026-09-23) 🎉 Features * add css formatter class ([#2707](https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/2707)) ([f0b5fa4](https://github.com/ChromeDevTools/chrome-devtools-mcp/commit/f0b5fa4bde0afa30c53996ec0f987af6b6ab28ac)) * add get_css_style tool ([#2612](https://github.com/ChromeDevTools/chrome-devtools-mcp/issues/2612)) ([4454ae0](https://github.com/ChromeDevTools/chrome-devtools-mcp/commit/4454ae0a8a3d6072ea52d8931a9562907e8dbaae)) …

   在 GitHub 查看 ↗

常见问题