Chrome DevTools MCP：让 AI 编程助手直接操控浏览器做调试

原文来源：Chrome DevTools — 谷歌官方把 Chrome DevTools 封装成 MCP 服务器，让 AI 编程助手能直接控制和检查一个真实的 Chrome 浏览器。

AI 编程助手现在能写代码、能跑命令，但一碰到浏览器里的事就抓瞎：页面为什么慢、请求为什么失败、控制台报了什么错，它都看不见。谷歌 Chrome DevTools 团队开源的 chrome-devtools-mcp 就是来解决这件事的——它把 Chrome DevTools 的完整能力封装成一个 MCP（Model Context Protocol）服务器，让 AI 助手能直接控制和检查一个真实的 Chrome 浏览器。

它解决什么问题

很多前端问题的答案藏在浏览器里：性能瓶颈要看 trace，请求失败要看网络面板，报错要看控制台，内存泄漏要看堆快照。过去 AI 助手只能靠你复制粘贴这些信息，一环扣一环地问。

chrome-devtools-mcp 把这条链路打开：助手可以自己开浏览器、录性能 trace、看网络请求、截图、读控制台消息（带 source map 还原的调用栈），然后基于真实数据给结论。它支持 Antigravity、Claude、Cursor、Copilot 等主流 AI 编程工具，底层用 puppeteer 驱动 Chrome，会自动等待动作结果，而不是盲等。

它到底是几层东西

拆开看，这个项目是三层叠起来的。最外层是一个 MCP 服务器（npm 包），负责把能力暴露给 AI 客户端；中间层是 puppeteer，负责真正驱动浏览器、等待动作完成；最里层才是 Chrome DevTools 本身，性能洞察和审计这些能力都是直接复用它，而不是重新实现一遍。

除了 MCP，官方还带了一个实验性的 CLI 客户端，同样能操作浏览器，适合调试，或者让 agent 生成自动化脚本。CLI 实际上是一个后台守护进程的客户端，Linux 和 macOS 上走 Unix socket，Windows 上走命名管道。

它暴露了哪些工具

看一眼工具清单，就能明白它的定位不是"让 AI 点点点"，而是把 DevTools 的面板整套翻译成工具，让 agent 能自己取证：

• 输入自动化（10 个）：click、drag、fill、fill_form、handle_dialog、hover、press_key、type_text、upload_file、click_at
• 导航（6 个）：close_page、list_pages、navigate_page、new_page、select_page、wait_for
• 模拟（2 个）：emulate、resize_page
• 性能（3 个）：performance_start_trace、performance_stop_trace、performance_analyze_insight
• 网络（2 个）：list_network_requests、get_network_request
• 调试（9 个）：evaluate_script、get_console_message、get_css_styles、lighthouse_audit、list_console_messages、take_screenshot、take_snapshot、screencast_start、screencast_stop
• 内存（13 个）：围绕堆快照展开，包括 take_heapsnapshot、compare_heapsnapshots、get_heapsnapshot_dominators、get_heapsnapshot_retaining_paths 等
• 扩展（5 个）：install_extension、list_extensions、reload_extension、trigger_extension_action、uninstall_extension
• 第三方开发者工具（2 个） 和 WebMCP（2 个）：list_3p_developer_tools、execute_3p_developer_tool、list_webmcp_tools、execute_webmcp_tool
• 渐进式 Web 应用（4 个）：install_pwa、launch_pwa、get_os_app_state、uninstall_pwa

内存这一类特别值得注意。它有 13 个工具专门处理堆快照，能对比两份快照、查支配树、找保留路径——也就是把"这个页面为什么内存一直涨"这类问题，变成 agent 能自己一步步挖的流程。这类活过去基本只能靠人手动点 DevTools 面板。

怎么接入

要求 Node.js LTS 版本、Chrome 稳定版或更新版本，以及 npm。在 MCP 客户端里加一段配置即可：

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

用 chrome-devtools-mcp@latest 能保证客户端始终用最新版本。如果只想做基础的浏览器操作，可以开 --slim 模式：

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

装好后，在客户端里输入一句"检查 https://developers.chrome.com 的性能"，助手应该会打开浏览器并录一段性能 trace。注意：只有客户端真正调用需要浏览器的工具时，MCP 服务器才会启动浏览器；光连上服务器不会自动开浏览器。

针对不同编辑器或 agent（Antigravity、Claude Code、Cursor、VS Code 等）的具体配置，官方单独给了一份客户端配置指南。

不用 MCP 也能用：实验性 CLI

如果你只想在终端里手动操作，或者让 agent 写脚本而不是直接调工具，可以全局装包：

npm i chrome-devtools-mcp@latest -g
chrome-devtools status
chrome-devtools navigate_page 1 --url "https://google.com"
chrome-devtools take_screenshot 1 --filePath screenshot.png

第一次调用工具时，CLI 会自动在后台拉起 MCP 服务器和浏览器；之后复用同一个实例，所以页面、cookie 这些状态会保留。默认走无头模式，也默认开隔离模式。CLI 默认允许访问整个文件系统，可以用 --workspace=/path/to/project 把文件工具限制到指定目录；要拿机器可读的结果，加 --output-format=json。如果 CLI 卡住连不上，chrome-devtools stop 停掉后台进程，再用 DEBUG=* 看详细日志。

需要注意的地方

数据可见范围。 这个服务器会把浏览器实例里的内容暴露给 MCP 客户端，客户端可以查看、调试、修改浏览器或 DevTools 里的任何数据。不要把不想让 MCP 客户端看到的信息留在里面。

浏览器兼容性。 官方只支持 Google Chrome 和 Chrome for Testing。其他 Chromium 内核浏览器也许能用，但不保证，遇到奇怪行为得自行斟酌。官方承诺为最新的 Extended Stable Chrome 提供修复和支持。

遥测默认开启。 谷歌会收集使用统计（工具调用成功率、延迟、环境信息等）用于改进这个项目。可以用 --no-usage-statistics 关掉；设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量也会关闭。另外，性能工具可能把 trace URL 发给谷歌的 CrUX API，用来把真实用户数据（field data）和实验室数据放在一起看，用 --no-performance-crux 可以关掉。

更新检查。 服务器默认会定期查 npm 有没有新版本并提示，设 CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 可以关闭。

和别的"浏览器 MCP"有什么不同

MCP 生态里已经有不少让 AI 操作浏览器的方案，大致分两类：一类把浏览器跑在云端、按会话计费，适合大规模抓取，但你拿不到本机浏览器的真实状态；另一类基于 Playwright 之类的自动化库，擅长把流程跑通。chrome-devtools-mcp 的位置不太一样——它绑的是你本机真实的 Chrome，能力也直接来自 DevTools 本身：性能 trace、Lighthouse 审计、堆快照这些是原生就带的，不是外面补的。换句话说，它更偏"诊断"而不是"代跑"，这也解释了为什么它的工具清单里有那么多调试和内存相关的项。

适合谁用

如果你在做 AI 编程工具，或者日常让 AI 助手帮忙改前端，这个项目值得一试：它由谷歌官方维护，直接复用 DevTools 本身的能力，比自己写一套 puppeteer 封装省事得多。官方还推荐把它当作"浏览器子代理"集成进产品，Gemini CLI 的浏览器 agent 就是参考实现。

反过来说，如果你只是想让 AI 帮忙截个图、跑个简单的页面操作，--slim 模式就够了，不必把内存、扩展、PWA 那几十个工具全打开——工具越多，模型选错工具、被无关信息带偏的概率也越高。而在涉及敏感数据的环境里，要记住它的访问范围是整个浏览器。