Google Chrome DevTools 团队放出首个官方 MCP：让 AI 编程助手直接\”看见\”你的浏览器

你的 AI 编程助手，今天可以看见你的浏览器了。GitHub Trending 当日榜 #16，ChromeDevTools 团队（Google 官方）正式开源了 `chrome-devtools-mcp`——这是 Chrome DevTools 团队第一个通过 Model Context Protocol（MCP）标准对外暴露的工具，让 Claude Code、Cursor、Cline 等 AI 编程助手能直接控制 Chrome DevTools。

它具体能做什么

MCP（Model Context Protocol）是 Anthropic 在 2024 年底推出的开放标准，让 AI 模型能调用外部工具——之前 GitHub 官方、Cloudflare、Vercel 都已发布官方 MCP。Chrome DevTools 这个 MCP 是首个由浏览器厂商官方出品的实现。

接通后，你的 AI 编程助手能：

1. 打开任意 URL 截图：让 AI “看见” 你调试中的网页，而不是仅看 HTML 源码。

2. 提取控制台日志：AI 拿到 `console.log` 和 `console.error`，直接定位前端 bug。

3. 执行任意 JavaScript：AI 在浏览器里跑代码片段、读 DOM、读网络请求。

4. 抓取网络面板数据：AI 看得到 XHR/Fetch 请求的状态码、响应时间、请求体。

5. 模拟设备尺寸和地理位置：AI 帮你测试移动端布局、调试”为什么这个页面在 iPhone 上不显示”。

实际场景：原本 30 分钟，现在 30 秒

场景 1：调试”按钮点击没反应”。传统做法：打开 DevTools → 切换到 Elements 面板 → 找按钮 → 看事件监听器 → 切到 Console → 手动跑代码复现 → 把结果截图给 AI 助手。新做法：直接告诉 AI “这个按钮点了没反应，帮我用 Chrome DevTools 看看为什么”，AI 自动打开浏览器、点击按钮、读取报错、给出修复方案。

场景 2：性能优化。传统做法：用 Lighthouse 跑分 → 截图 → 把 4 个核心指标贴给 AI。新做法：让 AI “用 Chrome DevTools 看看这个页面的 LCP 和 CLS”，AI 自动开 Performance 面板、跑 trace、生成报告。

场景 3：跨域 / CORS 调试。传统做法：手动看 Network 面板里红色失败的请求 → 找 Origin / Access-Control-Allow-Origin 头。新做法：让 AI 直接查并给出”是后端没设 CORS 头还是前端发的请求带错 Origin”。

三个让这件事值得装上试试的细节

1. 这是 Chrome DevTools 团队的第一个官方 MCP。 之前社区有 `playwright-mcp`、`puppeteer-mcp` 等替代品，但都是第三方用 Playwright/Puppeteer 重新实现。Google 官方 MCP 直接调用 Chrome DevTools 的内部 API，能拿到 DevTools 自己的协议层数据（比如 Performance Trace 的完整 timeline），不是 CDP（Chrome DevTools Protocol）的简单封装。

2. 8 月 27 日刚发 v0.1.0，Stars 一天 +61。 仓库地址是 `github.com/ChromeDevTools/chrome-devtools-mcp`。按 Chrome 团队的迭代速度（参考 Lighthouse CLI、Chrome DevTools Frontend 仓库），1-2 个月内会补完 v1.0 必备功能。

3. 兼容所有支持 MCP 的客户端。 Claude Code、Cursor、Cline、Continue、Windsurf 都能直接用。VS Code 的 Copilot 也在 8 月初支持了 MCP 协议（预览版）。基本上你今天能叫上名字的 AI 编程助手都能用。

安装与第一次使用

# 1. 确认 Node.js >= 18
node --version

# 2. 用 npx 直接跑（不需要全局安装）
npx -y chrome-devtools-mcp@latest

# 3. 在 Claude Code 的 settings.json 里加：
# {
#   "mcpServers": {
#     "chrome-devtools": {
#       "command": "npx",
#       "args": ["-y", "chrome-devtools-mcp@latest"]
#     }
#   }
# }

# 4. 重启 Claude Code，AI 就能用 chrome-devtools 工具了

5 个第一次用必踩的坑

1. 需要 Chrome 132+。这个 MCP 用了 Chrome 132 引入的”无头模式”新接口，Chrome 131 及以下不能用。

2. 第一次启动会自动下载 ChromeDriver。大约 30MB，建议在国内网络环境下提前配置好代理。

3. AI 只能控制一个 Chrome 实例。如果同时跑多个项目，AI 会随机连一个，建议用 `–user-data-dir` 指定独立 profile。

4. 截图返回的是 base64，体积较大。在 Claude Code 里默认会被压缩，但要注意 token 用量。

5. 权限边界。AI 通过这个 MCP 看到的 Chrome = 你的 Chrome（cookies、保存的密码、已登录的账号）。千万别在 AI 调试时打开银行、邮箱后台。

对 AI 编程工具的判断：MCP 是 2024 年底到 2026 年最重要的 AI 协议层创新。它让 AI 从”能写代码”升级为”能跑代码、能看到结果、能在真实环境里调试”。Chrome DevTools 这个官方 MCP 的发布，意味着**Google 也在赌 MCP 协议会成为行业标准**——这是对 Anthropic 主导的 MCP 生态最响亮的一次背书。

— END —
LC 智趣厅 · 科技与生活的交点
ihygg.cn