Chrome DevTools MCP: Browser Automation for Coding Agents — 46K+ Stars

{{< 资源信息 >}}

像 Claude Code、Cursor 和 Copilot 这样的编码代理可以编写代码、运行测试和调试错误，但它们无法查看您的网站在真实浏览器中的外观。他们可以读取 HTML 源代码，但无法感知布局、样式、动画或运行时行为。他们可以检查控制台日志，但无法像用户一样与页面交互。

Chrome DevTools MCP 弥补了这一差距。它是一个官方的 Google Chrome 项目，通过模型上下文协议 (MCP) 向 AI 编码代理展示 Chrome DevTools 协议 (CDP) 的全部功能。突然间，您的编码代理可以截取屏幕截图、分析性能、检查网络请求、调试控制台错误以及自动化浏览器交互——所有这些都通过标准化协议实现。

什么是 Chrome DevTools MCP？ #

Chrome DevTools MCP (chrome-devtools-mcp) 是一个 MCP 服务器，可让 AI 编码代理访问 Chrome DevTools。它由 Google 的 Chrome DevTools 团队维护，并根据 Apache-2.0 许可证发布。

该项目有两个组成部分：

1. MCP 服务器 — 通过 CDP 将您的编码代理连接到实时 Chrome 浏览器
2. CLI — 无需 MCP 即可实现浏览器自动化的独立命令行工具

有了这个，您的编码代理可以：

• 通过屏幕截图查看您的网站
• 通过跟踪和指标衡量其性能
• 通过请求/响应检查调试网络问题
• 通过自动点击、打字和导航与页面进行交互
• 实时检查 DOM 和 CSS

主要特点 #

截图捕捉 #

截取任何网页的全页或视口屏幕截图。您的编码代理可以使用它来直观地验证其 CSS 更改、组件更新或布局调整看起来是否正确 - 而无需您自己打开浏览器。

特工：“让我截图来验证一下布局。”
→ chrome-devtools-mcp 捕获屏幕截图
→ 代理看到渲染的页面
→ 如果需要，代理会调整 CSS

性能分析 #

记录性能轨迹并提取可行的见解：

• 核心网络生命 — LCP、FID、CLS 测量
• 网络瀑布 - 请求时序和依赖链
• JavaScript 分析 — 函数执行时间和调用堆栈
• 帧速率分析 — 卡顿检测和 FPS 下降

网络检查 #

分析每个网络请求和响应：

• 请求标头、响应代码、计时
• 有效负载大小和压缩比
• 失败的请求和 CORS 错误
• 服务人员活动

控制台调试 #

使用源映射堆栈跟踪读取浏览器控制台消息：

• 文件和行号的 JavaScript 错误
• 应用程序的 Console.log 输出
• 有关已弃用 API 的警告消息
• 来自您的代码的自定义控制台消息

DOM 和 CSS 检查 #

查询和操作 DOM：

• 通过选择器、文本或角色选择元素
• 读取和修改CSS属性
• 检查计算的样式和布局尺寸
• 在页面上下文中评估 JavaScript

浏览器自动化 #

自动化用户交互：

• 单击按钮和链接
• 填写表格并提交数据
• 导航至 URL
• 处理对话框和提示
• 滚动并与动态内容交互

架构 #

Chrome DevTools MCP 通过 Chrome DevTools 协议连接到实时 Chrome 浏览器：

┌──────────────────────────────────────────────┐
│              AI Coding Agent                 │
│  (Claude Code / Cursor / Copilot / etc.)     │
└──────────────────┬───────────────────────────┘
                   │ MCP Protocol (JSON-RPC)
                   ▼
┌──────────────────────────────────────────────┐
│         chrome-devtools-mcp Server           │
│                                              │
│  ┌────────────┐ ┌──────────┐ ┌────────────┐ │
│  │ Screenshots│ │ Network  │ │ Performance│ │
│  │   Tool     │ │ Tool     │ │   Tool     │ │
│  └────────────┘ └──────────┘ └────────────┘ │
│  ┌────────────┐ ┌──────────┐ ┌────────────┐ │
│  │  Console   │ │   DOM    │ │  Actions   │ │
│  │   Tool     │ │  Tool    │ │  Tool      │ │
│  └────────────┘ └──────────┘ └────────────┘ │
└──────────────────┬───────────────────────────┘
                   │ CDP (WebSocket)
                   ▼
┌──────────────────────────────────────────────┐
│              Live Chrome Browser             │
│                                              │
│  ┌──────────────────────────────────────┐    │
│  │         Your Web Application          │    │
│  └──────────────────────────────────────┘    │
└──────────────────────────────────────────────┘

安装 #

作为 MCP 服务器 #

# 安装MCP服务器
npm install -g chrome-devtools-mcp

# 启动MCP服务器
chrome-devtools-mcp 服务器

您的编码代理连接到 MCP 服务器并获得对所有 DevTools 工具的访问权限。

作为 CLI 工具 #

# 安装命令行界面
npm install -g chrome-devtools-mcp

# 截图
chrome-devtools-mcp 屏幕截图 --url https://example.com --output snapshot.png

# 记录性能轨迹
chrome-devtools-mcp 性能 --url https://example.com --output trace.json

# 获取控制台消息
chrome-devtools-mcp 控制台 --url https://example.com

启动 Chrome 并启用调试 #

为了使 MCP 服务器连接到 Chrome，您需要在启用远程调试的情况下启动 Chrome：

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --new-window

# Linux
谷歌浏览器 --remote-debugging-port=9222 --new-window

# 窗口
“C:\Program Files\Google\Chrome\Application\chrome.exe”^
  --远程调试端口=9222

或者使用 CLI 的自动启动功能：

chrome-devtools-mcp 服务器 --auto-launch-chrome

这会自动启动一个带有正确调试标志的新 Chrome 实例。

工具参考 #

截图 #

捕获当前页面或特定元素的屏幕截图。

# 全页截图
chrome-devtools-mcp 屏幕截图 --全页

# 视口截图
chrome-devtools-mcp 屏幕截图 --viewport

# 具体元素
chrome-devtools-mcp 屏幕截图 --选择器“.hero-section”

###网络

分析网络请求和响应。

# 列出所有请求
chrome-devtools-mcp 网络 --list

# 按状态码过滤
chrome-devtools-mcp 网络 --filter status=404

# 检查特定请求
chrome-devtools-mcp 网络 --inspect url=https://api.example.com/data

性能 #

记录并分析性能痕迹。

# 记录 30 秒的跟踪
chrome-devtools-mcp 性能 --持续时间 30

# 分析核心网络生命
chrome-devtools-mcp 性能 --cwv

# 配置文件 JavaScript 执行
chrome-devtools-mcp 性能 --cpu

控制台 #

读取浏览器控制台消息。

# 获取所有消息
chrome-devtools-mcp 控制台 --all

# 仅过滤错误
chrome-devtools-mcp 控制台 --level 错误

# 清除控制台
chrome-devtools-mcp 控制台 --clear

统治 #

查询和操作 DOM。

# 选择一个元素
chrome-devtools-mcp dom --query“button.submit”

# 读取内部文本
chrome-devtools-mcp dom --text "#main-heading"

# 修改CSS
chrome-devtools-mcp dom --style“#hero {背景：蓝色；}”

# 评估 JavaScript
chrome-devtools-mcp dom --eval“文档.标题”

###行动

自动化浏览器交互。

# 导航到一个 URL
chrome-devtools-mcp 操作 --navigate https://example.com

# 单击一个元素
chrome-devtools-mcp 操作 --单击“button.login”

# 填写表格
chrome-devtools-mcp 操作 --fill "#email" "user@example.com"
chrome-devtools-mcp 操作 --fill "#password" "secret123"
chrome-devtools-mcp 操作--单击“button.submit”

与编码代理集成 #

克劳德·代码 #

# In your MCP configuration (~/.claude/settings.json)
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": ["server"]
    }
  }
}

Claude Code 现在可以使用所有 DevTools 工具来检查和调试您的 Web 应用程序。

光标 #

设置 → 功能 → MCP 服务器 → 添加服务器
命令：chrome-devtools-mcp
参数：服务器

副驾驶（VS Code） #

// .vscode/mcp_servers.json
{
  “服务器”：{
    “chrome-devtools”：{
      “命令”：“chrome-devtools-mcp”，
      “args”：[“服务器”]
    }
  }
}

实际用例 #

1. 视觉回归测试 #

您的编码代理进行 CSS 更改并立即验证它们：

代理：“我将按钮边框半径更改为 8px。让我验证一下……”
→ 截屏
→ 与基线比较
→ 报告：“边界半径应用正确。未检测到视觉回归。”

2.性能优化 #

Agent: "The page load time seems slow. Let me profile it..."
→ Records performance trace
→ Identifies: "LCP is 4.2s, dominated by unoptimized hero image (2.1s)"
→ Fixes: "Reduced image size and added lazy loading"
→ Verifies: "LCP improved to 1.8s"

3. 调试控制台错误 #

代理：“用户报告 JavaScript 错误。让我检查一下控制台......”
→ 读取控制台消息
→ 发现：“未捕获类型错误：无法读取第 42 行未定义的属性‘映射’”
→ 修复：“在调用 .map() 之前添加了空检查”
→ 验证：“修复后控制台干净”

4. API 集成测试 #

代理：“让我验证一下 API 集成是否正常工作......”
→ 检查网络请求
→ 发现：“POST /api/login 返回 401 — 缺少授权标头”
→ 修复：“向请求标头添加了不记名令牌”
→ 验证：“登录返回 200 以及用户数据”

5.表单自动化 #

Agent: "Let me test the registration form end-to-end..."
→ Navigates to /register
→ Fills in name, email, password
→ Clicks submit
→ Checks for success message
→ Reports: "Registration flow works. Success message displayed."

与替代方案的比较 #

Chrome DevTools MCP 与 Puppeteer #

Chrome DevTools MCP 专为 AI 代理而构建。 Puppeteer 是一个通用浏览器自动化库，需要手动集成才能供代理使用。

Chrome DevTools MCP 与 Playwright #

Playwright 更适合跨浏览器测试。 Chrome DevTools MCP 对于特定于 Chrome 的调试来说更简单、更 AI 原生。

Chrome DevTools MCP 与 Selenium #

Chrome DevTools MCP 提供比 Selenium 更深入的浏览器洞察。 Selenium更适合跨浏览器E2E测试； Chrome DevTools MCP 更适合调试和开发。

安全考虑 #

Chrome 团队的免责声明 #

该项目明确警告：

chrome-devtools-mcp 将浏览器实例的内容公开给 MCP 客户端，允许它们检查、调试和修改浏览器或 DevTools 中的任何数据。避免与 MCP 客户共享您不想共享的敏感或个人信息。

最佳实践 #

1. 使用专用浏览器配置文件 — 请勿在启用 MCP 的情况下使用您的个人浏览配置文件
2. 避免敏感登录 — 不要在可调试浏览器中打开银行、电子邮件或其他敏感会话
3. 隔离调试端口——仅绑定到localhost（--remote-debugging-port=9222），防止外部访问
4. 检查代理行为 — 监控编码代理通过浏览器访问执行的操作，尤其是在自动化工作流程中

限制 #

仅适用于 Chrome #

chrome-devtools-mcp 正式支持 Google Chrome 和仅用于测试的 Chrome。其他基于 Chromium 的浏览器（Edge、Brave、Arc）可能可以工作，但不能保证。不支持 Firefox 和 Safari。

需要实时浏览器 #

MCP 服务器需要启用远程调试的实时 Chrome 浏览器实例。如果没有运行的浏览器，它无法分析静态 HTML 文件或无头屏幕截图。

单个浏览器实例 #

MCP 服务器连接到一个 Chrome 实例。对于多浏览器测试（Chrome + Firefox），您需要单独的 MCP 服务器或 Playwright 等工具。

无页面修改保证 #

虽然代理可以修改 DOM 和 CSS，但不能保证页面将如何响应。某些站点使用 Shadow DOM、iframe 或激进的 CSP 标头，这些标头可能会限制代理的功能。

编者的话 #

Chrome DevTools MCP 是让 AI 编码代理具有视觉感知方面向前迈出的重要一步。在这个工具出现之前，编码代理实际上对他们的更改在真实浏览器中的外观一无所知。他们可以阅读 HTML 和 CSS 源代码，但看不到渲染的结果。

这就像人类设计师可以阅读 CSS 规范但无法查看网页一样。他们可能会在纸上写出完美的代码，但他们无法验证它是否确实产生了预期的视觉结果。

Chrome DevTools MCP 通过为代理提供相当于眼睛的功能来改变这一点。通过屏幕截图，他们可以看到布局。通过性能跟踪，他们可以测量速度。通过网络检查，他们可以调试 API 问题。通过控制台访问，他们可以读取错误消息。通过 DOM 查询，他们可以检查页面结构。

事实上，这是一个官方的 Google Chrome 项目，这赋予了它可信度并确保了长期维护。 Chrome DevTools 协议是浏览器调试的黄金标准，通过 MCP 公开它使得每个支持该协议的 AI 编码代理都可以访问它。

对于使用 AI 编码代理的 Web 开发人员来说，这是必备工具。它关闭了编写代码和查看其视觉结果之间的反馈循环，从而极大地提高了代理生成正确、完善的 Web 应用程序的能力。

常见问题解答 #

问：chrome-devtools-mcp 可以与无头 Chrome 一起使用吗？ #

答：是的。您可以以无头模式 (--headless=new) 启动 Chrome，并且 chrome-devtools-mcp 仍将通过 CDP 连接。但是，某些功能（例如屏幕截图）在无头模式下的表现可能有所不同。

问：我可以在非 Chrome 浏览器上使用它吗？ #

答：不是正式的。该项目支持 Google Chrome 和 Chrome 进行测试。其他基于 Chromium 的浏览器可能可以工作，但不能保证。 Firefox 和 Safari 需要不同的调试协议。

问：这对浏览器性能有何影响？ #

答：启用远程调试对性能的影响很小。浏览器运行正常；调试端口只是公开额外的诊断信息。大多数情况下预计开销< 5%。

问：多个代理可以共享同一个浏览器实例吗？ #

答：是的。 MCP 服务器管理浏览器连接，多个 MCP 客户端可以同时连接。每个客户端都有自己的会话来执行导航和 DOM 操作等操作。

问：有没有办法自动化整个浏览器设置？ #

答：是的。启动 MCP 服务器时使用“–auto-launch-chrome”标志。这会自动启动带有正确调试标志的 Chrome 并连接服务器。

问：chrome-devtools-mcp 可以对本地文件进行截图吗？ #

答：是的。导航到“file:///path/to/your/index.html”并截取屏幕截图或分析页面。这对于测试本地开发服务器和静态站点非常有用。

Dibi8 的更多内容 #

• OmniRoute：拥有 237 个提供商的免费 AI 网关
• herdr：用于编码代理的终端代理多路复用器
• Orca：StableAI 的并行代理编排
• Meetily：隐私第一的人工智能会议助手

来源 #

• chrome-devtools-mcp GitHub 存储库
• npm 包
• 工具参考文档
• 变更日志

发布时间：2026 年 7 月 7 日 |最后更新时间：2026 年 7 月 7 日 |星级： 46,034 |许可证：Apache-2.0