项目简介

11天前，ChromeDevTools 团队开源了 chrome-devtools-mcp，至今已斩获 46,000+ GitHub Stars。这是一个 Model Context Protocol（MCP）服务器，让 AI 编码代理（Claude Code、Cursor、Copilot 等）能够直接控制 Chrome 浏览器，操作 DevTools 进行自动化调试、网络分析和性能诊断。

项目地址：https://github.com/ChromeDevTools/chrome-devtools-mcp

简单来说：你告诉 AI「帮我看看这个页面为什么加载慢」，AI 就能自动打开 Chrome DevTools 的 Performance 面板录制 trace、分析瓶颈、给出优化建议。不需要你手动截图、粘贴报错、描述 network waterfall——AI 自己就能看。

核心功能

1. 浏览器自动化 + 实时调试一体化

以往 AI 编码代理的「浏览器能力」通常仅限于截图识别（视觉模型）或简单的 Playwright/Puppeteer 脚本执行。chrome-devtools-mcp 完全上了一个台阶：

• Console 检查：读取浏览器控制台日志（含 source-map 还原的堆栈跟踪），自动发现 JS 错误和警告
• Network 分析：查看所有网络请求的耗时、状态码、请求头/响应体，精准定位慢请求和失败请求
• Screenshot 截图：截取当前页面任意区域的截图（全页/可视区/元素级），供视觉模型分析
• Performance trace：录制并分析 Chrome Performance trace，给出可操作的性能优化建议
• DOM 检查：查询和审查 DOM 节点，获取元素的完整样式计算信息

这些能力通过 MCP 协议以 tool 的形式暴露给编码代理。编码代理可以自主编排调用顺序：先截图看页面状态，再检查 Console 有无报错，然后录制 Performance trace，最后给出综合诊断。

2. 两种运行模式

项目提供了两个配置模式：

完整模式（Full）：包含所有 DevTools 面板的操作能力，适合深度调试和性能分析。

Slim 模式：精简版工具集，仅包含基础的浏览器操作（导航、截图、Console 检查），适合只想做简单自动化测试的场景。配置方式：

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

slim 模式加上 --headless 参数，不需要显示 Chrome 窗口就能运行，非常适合 CI/CD 流水线。

3. 完善的 CLI 支持

除了作为 MCP 服务器运行，项目还提供了独立的 CLI 工具，可以直接在终端中使用：

# 截图
chrome-devtools-mcp screenshot https://example.com --viewport 1440x900

# 获取页面 Console 日志
chrome-devtools-mcp console https://example.com

# 录制 Performance trace
chrome-devtools-mcp trace https://example.com --duration 5

这对于不跑 MCP 客户端的场景非常实用——直接在 CI 脚本里调用，做页面健康检查。

白物集的实际使用场景

我们在白物集项目中大量依赖 Chrome DevTools 进行前端调试和性能优化。虽然我们的 Astro SSR 站点主要在服务端渲染，但前端交互（搜索、分享、暗色模式切换）仍需要前端调试。

场景 1：Astro build 产物调试

白物集使用 Astro 构建 SSR 站点。每次修改页面模板后，我们通过 Chrome DevTools 检查产物是否正确：

• Network 面板验证资源是否被正确加载（CSS hash 是否匹配、JS bundle 是否生效）
• Elements 面板检查 SSR 渲染的 HTML 结构是否正确
• Lighthouse 跑分确保性能达标

有了 chrome-devtools-mcp，这些步骤完全可以交给 AI 代理自动执行：提交代码后，代理自动启动 headless Chrome、检查 build 产物、验证页面结构，发现问题直接提交修复。

场景 2：API 响应体可视化验证

我们的内容管线 POST 文章到 ai.golfr20.cn/api/v1/content/ingest 后，通常需要手动刷新网站页面或用 curl 验证 API 响应。借助 Chrome DevTools MCP，AI 代理可以直接打开前端页面、检查 Network 请求内容、确认数据正确渲染——整个过程不需要人工介入。

场景 3：跨浏览器兼容性检查

白物集支持暗色模式（通过 CSS 变量 + prefers-color-scheme 媒体查询实现）。每次修改主题色后，AI 代理可以用 MCP 工具截取亮色/暗色两种模式下的页面截图，对比检查是否存在配色问题。

适合什么场景

• AI 辅助前端调试：最直接的场景——让 AI 编码代理拥有「看浏览器」的能力
• 自动化页面健康检查：集成到 CI 流水线，每次部署后自动检查页面是否正常
• 性能回归测试：记录每次发布的 Performance trace，对比分析性能变化
• 视觉回归测试：截图对比，自动发现 UI 差异
• Web 爬虫和数据采集：相比普通 HTTP 请求爬虫，可以执行 JavaScript、处理 SPA 渲染

不适合什么场景

• 移动端浏览器调试：仅支持桌面版 Chrome/Chromium，不支持 Safari、Firefox 或其他移动端浏览器
• 高并发自动化测试：设计目标是单实例给编码代理使用，不适合大规模并发的测试网格
• 非 Chromium 浏览器支持：官方声明仅支持 Google Chrome 和 Chrome for Testing，其他 Chromium 衍生版不保证兼容性

快速上手

前提条件

• Node.js LTS 版本
• Chrome 浏览器（最新稳定版或更新）
• npm

步骤 1：配置 MCP 客户端

如果你使用 Claude Code，运行：

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

如果你使用 Cursor 或 Copilot，在 MCP 配置文件中添加：

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

步骤 2：启动 Chrome

确保 Chrome 以远程调试模式启动：

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

# 或者使用 Chrome for Testing（项目推荐）
npx @puppeteer/browsers install chrome@stable

步骤 3：开始调试

在编码代理中直接输入自然语言指令：

「打开 baiwuji.top，检查 Console 有没有报错，截取首页截图」

AI 代理会自动调用 MCP 工具的 puppeteer_navigate、console_logs、screenshot 一系列操作，并在对话中展示结果。

步骤 4：性能分析

「录制 5 秒 performance trace，告诉我首页的 Largest Contentful Paint 是多少，哪个请求是瓶颈」

AI 代理会录制 trace、请求 CrUX API 获取真实用户体验数据作为对照，然后给出优化建议。

总结

chrome-devtools-mcp 解决了一个很实际的问题：AI 编码代理在调试 Web 应用时，过去只能靠开发者手动截图、复制错误信息来描述问题。现在 AI 可以直接拥有和开发者一样的 DevTools 操作能力。

对于白物集这类依赖 Astro SSR + API 管线的项目，这个工具的意义在于：前端调试从「人工操作 → 描述问题 → AI 回答」变成了「AI 发现问题 → AI 定位根因 → AI 修复」的完整闭环。调试速度提升一个数量级，且不依赖开发者截图或复制错误文案。

项目在 GitHub 上 46k+ stars 和超快的 Issue 响应速度也说明了社区对其认可度。如果你的工作流中涉及 AI 编码代理和 Web 调试，这是一个值得立刻上手的工具。