Google 给 AI 编程 agent 装了双眼睛,这事比你想的重要

Chrome DevTools MCP 让你的 AI coding agent 直接看到浏览器里发生了什么——不用再猜了。

/ / /

一个真实的荒谬场景

上周我用 Claude Code 改一个前端页面的布局问题。改完之后，agent 信誓旦旦说"已修复，flex 布局应该正常了"。我切到浏览器一看——页面白屏。agent 压根不知道它写的代码跑起来是什么样。

这事其实挺常见的。所有 AI coding agent 都面临同一个问题：它们写代码，但看不见代码跑起来的效果。Addy Osmani 在他的博客里说得直白：AI 在"蒙着眼编程"。

Chrome DevTools MCP 就是 Google 官方给出的解法——一个 MCP 服务器，让 agent 能直接操控和检查一个活的 Chrome 浏览器实例。截至今天，GitHub 上 41,000+ stars，今日还在 +437。

AI agent 蒙眼编程 vs 有了 DevTools MCP 之后的对比

/ / /

31 个工具，三个档位

先说数字。chrome-devtools-mcp 一共提供 31 个工具给 agent 调用，我按功能分了一下：

-输入自动化 10 个：点击、拖拽、填表、键盘输入、文件上传，甚至支持给坐标让视觉模型直接戳屏幕
-页面管理 6 个：开新 tab、导航 URL、切页面、关页面、等待特定条件
-性能分析 3 个：录制 trace、分析 trace、生成性能洞察报告
-网络和调试 10 个：抓包、执行 JS、读 console、堆快照、Lighthouse 审计、录屏
-设备仿真 2 个：调窗口大小、模拟不同设备

这是 full mode。问题来了——full mode 的工具描述要吃掉 18,000 tokens，占 200K 上下文窗口的 9%。agent 还没写一行代码呢，上下文就少了一大截。

所以有 slim mode。加两个参数 --slim --headless，只暴露 3 个核心工具：导航、执行脚本、截图。token 开销降到 6,000，对比 Playwright MCP 的 13,700 还少了一半多。

讲真，大多数场景你用 slim mode 就够了。

31 个工具按功能分类的架构图

/ / /

装上去有多简单

一行 JSON 配置，没了：

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

这行扔到你用的工具配置文件里——Claude Code 的 settings.json、Cursor 的 MCP 配置、VS Code 的 settings.json——然后重启。agent 下次跑起来就能看到浏览器了。

支持的平台列一下：Claude Code、Cursor、Copilot、VS Code、Gemini CLI、Codex、Windsurf、JetBrains，基本上你叫得出名字的 AI 编程工具都在列表里。

各 IDE 和 agent 的配置方式示意

/ / /

我觉得最值得说的三个特性

Source-mapped stack traces

这才是真正让调试体验变好的东西。console 报错的时候，chrome-devtools-mcp 不是给你一堆 bundle.min.js:1:23456 这种读不懂的压缩后定位——它会映射回你的原始 TypeScript / JSX 源码文件和行号。

agent 拿到的报错信息是"src/components/Header.tsx:42 行 Cannot read property 'name' of undefined"，而不是"vendor.js:1 行 blah blah blah"。

这个区别是巨大的。一个能精准定位到源码的报错，agent 可以直接去改；一个指向压缩文件的报错，agent 基本只能瞎猜。

CrUX 真实用户数据

做性能分析的时候，chrome-devtools-mcp 不光能跑 lab 测试（就是在你机器上跑 Lighthouse 那种），还能调 Chrome User Experience Report 的 API 拿线上真实用户的性能数据。

这意味着 agent 可以同时看到"我本地跑出来 LCP 是 1.2 秒"和"线上 75 分位用户的 LCP 是 3.8 秒"——然后自己判断该优化什么。

不想要这个功能的话，--no-performance-crux 关掉就行。

Concurrent sessions

--experimentalPageIdRouting 这个参数打开之后，多个 agent 可以共享同一个 MCP 服务器实例，每个 agent 操作自己的页面，互不干扰。

想象一下：一个 agent 在跑 E2E 测试，另一个在分析性能，第三个在截图做视觉回归——同一个 Chrome 实例，三个 agent 并发干活。

Source-mapped traces + CrUX 数据 + Concurrent sessions 三大特性

/ / /

和 Playwright MCP 怎么选

绕不开的对比。两个都是给 agent 提供浏览器能力的 MCP 服务器，但定位不太一样：

Chrome DevTools MCP 强在调试和分析：性能 trace、Lighthouse 审计、CrUX 数据、source-mapped stack traces、堆内存分析。你的 agent 需要"理解"浏览器里发生了什么的时候，用这个。

Playwright MCP 强在跨浏览器自动化：Chrome、Firefox、Safari 都支持。你需要"操作"浏览器完成某个流程——填表、点按钮、等元素出现——的时候，Playwright 更通用。

一个偏"看"，一个偏"做"。当然两者都能做对方的事，只是侧重不同。

token 方面：Chrome DevTools MCP full mode 18,000 tokens，slim mode 6,000 tokens；Playwright MCP 13,700 tokens。如果你两个都想装，别用 full mode，不然光工具描述就吃掉 31,700 tokens。

一个务实的搭配：chrome-devtools-mcp 用 slim mode 管日常浏览 + 截图 + JS 执行，需要跨浏览器测试时再开 Playwright。

Chrome DevTools MCP vs Playwright MCP 对比

/ / /

实际跑一遍是什么感觉

扯远了，说点实际的。

我在本地配好 chrome-devtools-mcp 之后，让 Claude Code 帮我检查一个页面的 Core Web Vitals。整个过程大概是这样：

[01]agent 调 navigate_page 打开目标页面
[02]调 performance_start_trace 开始录制
[03]模拟用户滚动和点击
[04]performance_stop_trace 停止录制
[05]performance_analyze_insight 分析 trace
[06]输出：LCP 2.4s（主要是未压缩的 hero 图导致）、CLS 0.02、INP 正常

从发起指令到拿到报告，大概 3 分钟。手动做的话——打开 DevTools、录 trace、切到 Performance 面板看火焰图、再去 Lighthouse 跑一遍——至少 15-20 分钟。而且 agent 的报告比我自己看火焰图总结的还要结构化。

不过有个坑：第一次启动 Chrome 实例比较慢，大概 5-8 秒。后续就快了。还有就是 agent 有时候会在不必要的时候调全量截图，一张图就是一大块 token。这个可以在 prompt 里约束一下。

Agent 通过 DevTools MCP 执行性能分析的完整流程

/ / /

几个需要注意的事

隐私。chrome-devtools-mcp 会把浏览器里的完整内容暴露给连接的 agent。官方文档写得很清楚："避免分享你不想被 MCP 客户端看到的敏感信息。"所以不要在同一个 Chrome 实例里开着你的网银和 agent 调试页面。

数据收集。默认会收集使用统计（调用成功率、延迟、环境信息）。不想要的话 --no-usage-statistics 关掉。

Chrome only。官方只支持 Google Chrome 和 Chrome for Testing。其他 Chromium 内核的浏览器可能能跑，但不保证。Firefox 和 Safari 就别想了。

需要 ffmpeg。如果你想用录屏功能（screencast），需要本地装 ffmpeg。没装的话这个功能会失败但不影响其他。

注意事项清单：隐私、数据、兼容性

/ / /

所以

Google 做了一件看起来理所当然但一直没人做好的事：让 AI coding agent 能看见浏览器。

这不是什么惊天动地的技术突破——底层就是 CDP（Chrome DevTools Protocol），用了很多年了。但把它包装成一个开箱即用的 MCP 服务器，支持所有主流 AI 编程工具，做了 slim mode 控制 token 成本，还集成了 CrUX 真实数据——这是一个工程上的"把事情做对了"。

仓库地址：github.com/ChromeDevTools/chrome-devtools-mcp，Apache 2.0 协议，TypeScript 写的。如果你日常用 AI 编程工具写前端，这东西值得花 5 分钟配上。

不保证让你的 agent 变聪明，但至少不再是个瞎子。