Chrome DevTools MCP

面向 Agent 的 Chrome DevTools

面向 Agent 的 Chrome DevTools（chrome-devtools-mcp）可让你的编码 Agent（例如 Antigravity、Claude、Cursor 或 Copilot） 控制并检查正在运行的 Chrome 浏览器。它提供 Model-Context-Protocol（MCP）服务和 CLI。两者都能让你的 AI 编码助手使用 Chrome DevTools 的全部功能，实现可靠的 自动化、深入调试和性能分析。

工具参考 | CLI | 技能 | 更新日志 | 贡献指南 | 故障排除 | 设计原则

主要功能

• 获取性能洞察：使用 Chrome DevTools 记录 跟踪数据，并提取可操作的性能洞察。
• 高级浏览器调试：分析网络请求、截取屏幕截图，并 检查浏览器控制台消息（包含源映射后的堆栈跟踪）。
• 可靠的自动化：使用 puppeteer 自动执行 Chrome 中的操作， 并自动等待操作结果。

免责声明

chrome-devtools-mcp 会向 MCP 客户端公开浏览器实例的内容， 使其能够检查、调试和修改浏览器或 DevTools 中的任何数据。 请勿分享你不希望 MCP 客户端获取的敏感或个人信息。

chrome-devtools-mcp 仅正式支持 Google Chrome 和 Chrome for Testing。 其他基于 Chromium 的浏览器可能可以使用，但不作保证，也可能出现意外行为。请自行斟酌使用。 我们致力于为最新版本的 Extended Stable Chrome 提供修复和支持。

性能工具可能会将跟踪 URL 发送到 Google CrUX API，以获取真实用户 体验数据。这有助于通过同时呈现现场数据和实验室数据，全面了解性能。 此数据由 Chrome 用户体验报告（CrUX）收集。若要停用此功能， 请使用 --no-performance-crux 标志运行。

使用情况统计

Google 会收集使用情况统计数据（例如工具调用成功率、延迟和环境信息），以提高 Chrome DevTools MCP 的可靠性和性能。

默认情况下，启用数据收集。启动服务时传入 --no-usage-statistics 标志即可选择退出：

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

Google 会依照 Google 隐私权政策处理此数据。

Google 针对 Chrome DevTools MCP 收集使用情况统计数据的行为独立于 Chrome 浏览器的使用情况统计。选择退出 Chrome 指标不会自动让你退出此工具的统计收集，反之亦然。

如果设置了 CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS 或 CI 环境变量，则会停用数据收集。

更新检查

默认情况下，服务会定期检查 npm 注册表中的更新，并在有新版本可用时记录通知。 设置 CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS 环境变量即可停用更新检查。

要求

• Node.js LTS 版本。
• Chrome 当前稳定版或更高版本。
• npm

入门

将以下配置添加到你的 MCP 客户端：

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

说明

使用 chrome-devtools-mcp@latest 可确保你的 MCP 客户端始终使用最新版 Chrome DevTools MCP 服务。

MCP 客户端配置

有关特定编辑器或 Agent（例如 Antigravity、Claude Code、Cursor、VS Code）的设置说明，请参阅我们的客户端配置指南。

你的第一个提示词

在 MCP 客户端中输入以下提示词，检查一切是否正常运行：

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

MCP 客户端应打开浏览器并记录性能跟踪。

说明

MCP 客户端使用需要运行中浏览器实例的工具时，MCP 服务会自动启动浏览器。单独连接到 Chrome DevTools MCP 服务不会自动启动浏览器。

CLI

此软件包还包含 chrome-devtools CLI。使用它可在终端中控制浏览器，无需 MCP：

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

有关所有命令和选项，请参阅 CLI 指南。

技能

此软件包包含技能，用于教会 Agent 如何使用 Chrome DevTools：

技能	用途
chrome-devtools	使用 MCP 工具调试和自动化页面。
chrome-devtools-cli	运行 CLI 并使用它编写 shell 脚本。
a11y-debugging	审查并修复无障碍问题。
cookie-debugging	调试 Cookie、会话和身份验证。
debug-optimize-lcp	调试并改进最大内容绘制。
memory-leak-debugging	查找并修复内存泄漏。
troubleshooting	解决 MCP 与 Chrome 之间的连接问题。

将技能安装为插件

插件会安装 MCP 服务和所有技能，包括 CLI 技能：

• **Claude Code：**运行 /plugin marketplace add ChromeDevTools/chrome-devtools-mcp，然后运行 /plugin install chrome-devtools-mcp@chrome-devtools-plugins。
• **Copilot / VS Code：**运行 Chat: Install Plugin From Source，并输入 ChromeDevTools/chrome-devtools-mcp。
• **Gemini CLI：**运行 gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp。

如需了解更多信息，请参阅客户端配置指南。

手动安装技能

如果你的 Agent 不支持插件，请将技能文件夹复制到 Agent 的技能目录中。npm 软件包包含这些技能：

npm i chrome-devtools-mcp@latest -g
# Example for Claude Code. Use the skills directory of your agent.
mkdir -p ~/.claude/skills
cp -R "$(npm root -g)/chrome-devtools-mcp/skills/chrome-devtools-cli" ~/.claude/skills/

重要

chrome-devtools-cli 技能需要 CLI。使用该技能前，请全局安装此软件包。

保持技能为最新版本

技能描述的是特定版本的工具。每次更新 MCP 服务或 CLI 时，都要更新技能。过时的技能可能会让 Agent 使用已更改的工具或参数。

• **插件：**使用 Agent 插件管理器的更新命令。上方的 Gemini CLI 命令通过 --auto-update 启用自动更新。
• **手动安装：**更新软件包，然后再次复制技能文件夹：

npm i chrome-devtools-mcp@latest -g
mkdir -p ~/.claude/skills
cp -R "$(npm root -g)/chrome-devtools-mcp/skills/chrome-devtools-cli" ~/.claude/skills/

工具

如果遇到问题，请查看我们的故障排除指南。 如需查看所有受支持 MCP 功能的完整列表，请参阅工具参考。

配置

请在配置指南中查找完整的服务参数列表（例如 --headless、--isolated、--slim）以及 WebSocket 连接的配置方法。

对于仅执行基本浏览器任务的情况，--slim 标志会提供精简的工具集。请参阅精简工具参考。

高级用法

有关处理并发会话、持久化用户数据目录、连接到正在运行的 Chrome 实例而非启动新实例，或在 Android 上调试等高级功能，请参阅我们的高级用法指南。

集成为浏览器子 Agent

如果你正在开发 Agent 工具，并希望将集成式浏览器子 Agent 作为产品的一部分提供，我们建议基于 Chrome DevTools for agents 构建。

如需参考实现，请参阅 Gemini CLI 浏览器 Agent 文档。