Chrome DevTools MCP

官方

用于从Gemini、Claude、Cursor和Copilot等编码代理控制和检查实时Chrome浏览器的官方Chrome DevTools MCP服务器。

GitHub

50.9k

试用此 MCP赞助

你可以用 Chrome DevTools MCP 做什么？

性能追踪 — 让您的助手记录某个 URL 的性能追踪，并呈现可操作的见解，例如“检查 https://developers.chrome.com 的性能”。
网络分析 — 让您的助手检查网络请求，以调试加载问题、失败资源或 API 调用问题。
控制台监控 — 请求检查浏览器控制台消息，包括源映射堆栈跟踪，以诊断 JavaScript 错误。
截图捕获 — 指示您的助手截取当前页面的截图，用于视觉验证或文档记录。
自动化浏览器操作 — 指导您的助手使用 Puppeteer 自动化交互，如点击、导航或表单填写，并自动等待结果。

文档

面向智能体的 Chrome DevTools

面向智能体的 Chrome DevTools（chrome-devtools-mcp）让您的编码智能体（如 Antigravity、Claude、Cursor 或 Copilot）能够控制和检查实时 Chrome 浏览器。它充当模型上下文协议（MCP）服务器，为您的 AI 编码助手提供 Chrome DevTools 的全部能力，以实现可靠的自动化、深入的调试和性能分析。同时，还提供了一个 CLI，供不使用 MCP 的场景使用。

工具参考 | 更新日志 | 参与贡献 | 故障排查 | 设计原则

主要功能

获取性能洞察：使用 https://github.com/ChromeDevTools/devtools-frontend 记录跟踪信息并提取可操作性的性能洞察。
高级浏览器调试：分析网络请求、截取屏幕截图并检查浏览器控制台消息（包含源码映射的堆栈跟踪）。
可靠的自动化：使用 puppeteer 在 Chrome 中自动执行操作，并自动等待操作结果。

免责声明

chrome-devtools-mcp 会将浏览器实例的内容暴露给 MCP 客户端，使其能够检查、调试和修改浏览器或 DevTools 中的任何数据。请避免分享您不希望与 MCP 客户端共享的敏感或个人信息。

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

性能工具可能会将跟踪 URL 发送到 Google CrUX API，以获取真实用户体验数据。这有助于通过将现场数据与实验室数据一起呈现，提供全面的性能视图。这些数据由 https://developer.chrome.com/docs/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"]
    }
  }
}

[!NOTE] 使用 chrome-devtools-mcp@latest 可确保您的 MCP 客户端始终使用最新版本的 Chrome DevTools MCP 服务器。

如果您只对执行基本浏览器任务感兴趣，请使用 --slim 模式：

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

请参阅精简工具参考。

MCP 客户端配置

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

您的第一个提示词

在您的 MCP 客户端中输入以下提示词，以检查一切是否正常工作：

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

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

[!NOTE] 一旦 MCP 客户端使用需要运行浏览器实例的工具，MCP 服务器将自动启动浏览器。仅连接 Chrome DevTools MCP 服务器本身不会自动启动浏览器。

工具

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

配置

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

高级用法

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

作为浏览器子智能体集成

如果您正在开发智能体工具，并希望将集成的浏览器子智能体作为产品的一部分提供，我们建议在面向智能体的 Chrome DevTools 之上进行构建。

有关参考实现，请参阅 Gemini CLI 浏览器智能体文档。