Chrome DevTools MCP Server (Official)

什么是 Chrome DevTools MCP Server (Official)？

Chrome DevTools MCP 是 Google 官方的 MCP 服务器（chrome-devtools-mcp），让 Claude、Cursor、Copilot、Gemini 等编码智能体能够控制并检查一个真实运行的 Chrome 浏览器，用于自动化、调试和性能分析。

该项目由 Chrome DevTools 团队在 ChromeDevTools/chrome-devtools-mcp 仓库中维护，采用 Apache-2.0 许可证。它使用 Puppeteer 驱动 Chrome，并借助 DevTools 前端录制 trace、提取性能洞察。它通过 stdio 在本地运行，免费使用，无需 API key。项目还提供了一个无需 MCP 即可使用的 CLI。

如何使用 Chrome DevTools MCP Server (Official)？

前置条件：

• Node.js LTS（npm 包声明的版本为 ^20.19.0 || ^22.12.0 || >=23）
• Google Chrome 当前稳定版或更新版本（也支持 Chrome for Testing）
• npm

在 MCP 客户端中添加标准配置：

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

如果只需要基础浏览器任务，可以使用 slim 模式，它只暴露 3 个工具（导航、脚本执行和截图）：

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

当某个工具首次需要浏览器时，服务器会自动启动 Chrome。可以用提示词 “Check the performance of https://developers.chrome.com” 来验证配置是否生效。

Claude Code

只安装 MCP 服务器：

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

或者以插件方式安装，同时包含 MCP 服务器和 skills：

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

安装后重启 Claude Code。如果之前手动安装过，请先将其移除。

Claude Desktop

官方客户端指南没有单独列出 Claude Desktop。它的 claude_desktop_config.json 使用同样的 mcpServers 格式，因此粘贴上面的标准配置并重启应用即可。

Cursor

使用 README 中的一键安装按钮，或者进入 Cursor Settings -> MCP -> New MCP Server，填入标准配置。

VS Code

推荐以智能体插件方式安装：打开命令面板，运行 Chat: Install Plugin From Source，粘贴 ChromeDevTools/chrome-devtools-mcp。如果只想在 macOS 或 Linux 上添加 MCP 服务器：

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

Codex

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

官方客户端指南还覆盖了 Gemini CLI（gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest）、Windsurf、Cline、JetBrains、Kiro、Warp、OpenCode 等客户端。

连接你自己的 Chrome

默认情况下，服务器会使用专用配置文件启动一个新的 Chrome 实例。如果要复用已经登录的浏览器，可以在 chrome://inspect/#remote-debugging 开启远程调试（Chrome 144+）并添加 --autoConnect；或者以调试端口启动 Chrome，并传入 --browser-url=http://127.0.0.1:9222。

Chrome DevTools MCP Server (Official) 的主要功能

• 性能洞察：录制 DevTools trace 并返回可操作的结论，包括 Core Web Vitals（LCP、INP、CLS）。
• 真实浏览器调试：网络请求、带 source map 堆栈的控制台消息、截图以及无障碍树快照。
• 可靠的自动化：基于 Puppeteer 的点击、输入和表单填写，会自动等待操作结果。
• Lighthouse 审计：无障碍、SEO 和最佳实践评分，并给出未通过的 DOM 节点。
• 内存调试：通过堆快照排查内存泄漏。
• 设备模拟：限制网络和 CPU 速度，模拟移动端视口、深色模式、地理位置或 user agent。
• 可配置的能力范围：--slim、--headless、--isolated、按类别开关工具，以及 URL 允许/阻止列表。
• 官方且持续维护：由 Chrome DevTools 团队开发，发布频繁。

Chrome DevTools MCP Server (Official) 工具

• 输入自动化：click、fill、fill_form、type_text、press_key、hover、drag、upload_file 和 handle_dialog，作用于页面快照中标识出的元素。
• 导航：new_page、navigate_page、list_pages、select_page、close_page 和 wait_for，用于管理标签页和页面加载。
• 性能：performance_start_trace、performance_stop_trace 和 performance_analyze_insight，录制 trace 并深入分析单个洞察。
• 网络与调试：list_network_requests、get_network_request、list_console_messages、evaluate_script、get_css_styles、lighthouse_audit、take_screenshot 和 take_snapshot。
• 模拟：emulate 和 resize_page。
• 内存：take_heapsnapshot；更深入的堆分析工具需要 --memoryDebugging=true。
• 按需启用的类别：Chrome 扩展工具（--categoryExtensions=true）、渐进式 Web 应用工具（--categoryPwa=true）以及实验性的 WebMCP 工具。

Chrome DevTools MCP Server (Official) 的使用场景

• 在真实浏览器中验证代码改动：“打开 localhost:3000，提交注册表单，告诉我控制台输出了什么。”
• 诊断慢页面：“录制这个页面的性能 trace，并解释 LCP 为什么慢。”
• 调试失败的 API 请求：“列出登录后的网络请求，并显示返回 500 的那个请求的响应。”
• 修复布局问题：“在 375px 宽度下截图，检查页头为什么溢出。”
• 运行审计：“运行一次无障碍和 SEO 的 Lighthouse 审计，并列出未通过的元素。”
• 通过拍摄并对比堆快照来排查内存泄漏。

Chrome DevTools MCP Server (Official) 与替代方案对比

• Playwright MCP Server 是微软的浏览器自动化服务器，支持 Chromium、Firefox 和 WebKit，侧重于基于无障碍快照的自动化。Chrome DevTools MCP 只支持 Chrome，但额外提供 DevTools 级别的性能 trace、Lighthouse 审计和堆快照。
• Puppeteer MCP Server 是较早的参考服务器，用于基础的 Puppeteer 自动化。Chrome DevTools MCP 同样基于 Puppeteer，并且是 Chrome 团队积极维护的选项。
• BrowserTools MCP Server 是社区项目，通过 Chrome 扩展读取浏览器日志。Chrome DevTools MCP 不需要扩展，并且可以通过 --autoConnect 连接到你自己的 Chrome。

Chrome DevTools MCP Server (Official) 常见问题排查

• 服务器无法启动：在终端中运行 npx chrome-devtools-mcp@latest --help，并确认客户端使用的 Node 和 npm 版本与终端一致。
• ERR_MODULE_NOT_FOUND：通常是 Node 版本不受支持或 npx 缓存损坏。运行 rm -rf ~/.npm/_npx 和 npm cache clean --force 清理缓存后重新安装。
• Target closed 错误：浏览器无法启动。关闭正在运行的 Chrome 实例，并安装最新稳定版 Chrome。
• Windows 10 出现 “MCP error -32000: Connection closed”：改用 "command": "cmd"，并设置 "args": ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]，或者指向 npx 的绝对路径。
• 容器和 CI：Chrome 无法以 root 身份启动。请以非 root 用户运行服务器。