给你的 AI 一双眼睛：隆重介绍 Chrome DevTools MCP

Chrome DevTools MCP[1] 是 Google 团队新发布的一个工具，它能让 AI 编程助手看到并与实时运行的 Chrome 浏览器进行交互。简单来说，它为你的 AI 在浏览器中装上了"眼睛"，这样 AI 就不再是蒙着眼编程了。这个公开预览版将 AI 代理（比如 Cursor、Claude Code 和 Gemini CLI）连接到 Chrome 强大的 DevTools 自动化和调试功能。结果呢？你的 AI 助手不仅能写代码，还能在真实浏览器中运行代码，检查发生了什么，甚至能根据页面反馈来修复问题。

1. 什么是 MCP（模型上下文协议）？

MCP 的全称是 Model Context Protocol（模型上下文协议），这是 Anthropic 在 2024 年底推出的一种开放标准，用于将大型语言模型（LLMs）连接到外部工具和数据源。你可以把 MCP 想成是AI 的通用适配插头——它定义了一种统一的方式，让 AI 助手能够与各种应用、服务和数据库进行通信。开发者无需为每个工具进行定制集成，而是可以构建或使用 MCP 服务器，以标准格式公开功能（例如，数据库、代码库，或网络浏览器）。同样地，实现了 MCP 客户端 这一侧功能的 AI 客户端（比如编程助手或 IDE 插件），就可以连接到任何这些服务器。这种解耦意味着 AI 代理可以通过 MCP 接口，互换地接入许多不同的工具。

Anthropic 开源了 MCP 规范，甚至提供了示例服务器（例如，连接 Google Drive、Slack、GitHub、Puppeteer、数据库等的连接器）。像 Replit、Sourcegraph 等早期采用者已经开始集成 MCP，以增强他们的 AI 编程功能。Chrome DevTools MCP 是谷歌对这个生态系统的贡献——它是一个专门的 MCP 服务器，将 AI 代理连接到 Chrome 浏览器的 DevTools。

2. Chrome DevTools MCP

Chrome DevTools MCP 本质上是一个 MCP 服务器，它将 Chrome 的调试和自动化界面暴露给了 AI 助手。它充当 AI 模型（通过任何兼容 MCP 的客户端）与真实的Chrome 浏览器实例之间的桥梁。利用这座桥梁，AI 可以自主地完成许多事情，就像人类开发者在使用 Chrome DevTools 一样，比如打开页面、点击按钮、读取 DOM/CSS、捕获性能指标、读取控制台日志等等。

这直接解决了 AI 编程工具长期存在的局限性：它们无法观察或运行自己编写的代码。“编程代理……实际上是蒙着眼编程”，因为它们看不到页面的渲染输出、控制台输出、布局或网络活动。Chrome DevTools MCP摘掉了这个眼罩。通过将 AI 代理通过 MCP 连接到 Chrome 的 DevTools，谷歌在提出修复方案之前先收集真实的浏览器数据。换句话说，你的 AI 现在可以在实时浏览器中测试和调试它的代码，并且其建议是基于实际测量而非猜测。

3. 幕后工作原理

从底层来看，Chrome DevTools MCP 以一种新的方式利用了熟悉的技术：

  • Chrome DevTools Protocol (CDP)：这是 Chrome 的原生调试器接口。MCP 服务器使用 CDP 来控制浏览器——这些命令与 DevTools 或自动化框架使用的低级命令相同。它可以检查 DOM 元素、拦截网络请求、在页面中执行 JavaScript 等。
  • Puppeteer 确保可靠性：服务器没有直接发布原始的 CDP 命令，而是使用 Puppeteer（一个 Node.js 自动化库）来可靠地处理浏览器自动化任务。Puppeteer 在控制 Chrome 方面久经考验，因此它可以自动处理等待页面加载或 DOM 准备就绪等细节。这意味着 AI 代理的指令（例如"导航到页面并点击一个按钮"）执行起来的稳健性与 Puppeteer 脚本相同，包括自动等待网络空闲、元素出现等。我们可以轻松地通过编程方式处理点击、表单填写、对话框和页面导航。
  • MCP 协议层：服务器将这些浏览器能力封装在 MCP 接口后面。AI 代理不会直接调用 Puppeteer 函数；相反，它调用高级的 MCP 工具。每个工具对应一个特定的动作或查询（比如 navigate_page 或 list_console_messages）。MCP 服务器通过 Puppeteer 将其翻译成 CDP 动作，在 Chrome 中运行，并返回结果（通常是 AI 可以解析的 JSON 数据）。
  • 本地服务器调用：Chrome DevTools MCP 作为进程在你本地机器上（或任何你启动它的地方）运行。为了方便，它以 npm 包的形式分发。你通常不需要手动启动 Chrome 或服务器——MCP 客户端（AI 代理）会通过配置来生成它。当 AI 需要使用某个工具时，服务器会启动一个 Chrome 浏览器（除非已经有一个在运行）并执行所需的操作。它可以以无头模式 (headless) 或可见模式运行 Chrome，如果配置了相关标志（通过 --browserUrl 选项），甚至可以连接到已有的 Chrome 实例。
  • 安全与隔离：默认情况下，它会为 Chrome 使用一个单独的用户数据目录，这样 AI 的浏览活动就与你自己的浏览器配置文件隔离开了。还有一个 --isolated 标志，可以运行一个临时配置文件，该文件在每个会话结束后都会被清除。这确保了 AI 的自动化操作不会弄乱你的个人数据（反之亦然），并提供了一定的沙盒保护。（当然，让 AI 访问敏感的已登录网站仍然是不明智的，因为 AI 会"看到"该浏览器实例所看到的一切。）

4. 关键功能和工具

Chrome DevTools MCP 向 AI 暴露了DevTools 的广泛功能。根据官方文档和代码库，它提供了跨多个类别的工具。

  • 性能分析：其中一个主打功能是能够运行性能跟踪（performance trace），就像你在 Chrome 的"性能"面板中做的那样。performance_start_trace 和 performance_stop_trace 工具允许代理记录网页运行时的轨迹。更棒的是，还有一个 performance_analyze_insight 工具，它可以自动提取性能指标和洞察（例如，从跟踪中计算出最大内容绘制 LCP、总阻塞时间等）。本质上，AI 可以按需执行 Lighthouse 风格的审计。比如说：“获取性能洞察：使用 Chrome DevTools 记录轨迹并提取可落地的性能洞察。”
  • 页面导航与生命周期：打开新页面或标签页、导航到 URL、在历史记录中前进/后退、列出打开的页面、等待特定事件（new_page、navigate_page、wait_for 等）。本质上，AI 可以控制浏览器去哪里并管理多个页面。
  • 用户交互模拟：编程化地点击元素、填写输入框或整个表单、悬停、拖放、处理 JavaScript 对话框（警报/提示），甚至上传文件（click、fill、fill_form、hover、drag、handle_dialog、upload_file）——文档中涵盖了这些。这意味着 AI 可以重现复杂的用户流程——从登录到填写结账表单，再到按下 UI 按钮——以测试应用程序的响应方式。
  • DOM 检查与脚本编写：在页面上执行自定义 JavaScript (evaluate_script)、读取所有控制台日志消息 (list_console_messages)，甚至可以获取页面的 DOM 快照 (take_snapshot) 或截图 (take_screenshot)。快照功能可以捕获 DOM 状态，供 AI 分析布局或内容；如果需要，截图可以让 AI 像图像一样"看到"渲染后的页面。
  • 网络检查：AI 可以列出页面发出的网络请求，并获取特定请求/响应的详细信息 (list_network_requests, get_network_request)。这对于诊断资源缺失、API 调用缓慢或 CORS 错误等问题至关重要——这些东西以前对代码助手来说是不可见的。
  • 模拟：服务器允许 AI 切换条件，比如 CPU 节流、网络速度或视口大小 (emulate_cpu、emulate_network、resize_page)。这意味着 AI 代理可以测试页面在缓慢的 3G 连接下或在类似设备的限制下表现如何，然后相应地调整其建议（例如，标记某个图像对于移动端来说太大了）。

所有这些工具结合起来，为 AI 代理提供了完整的 Web 调试工具箱。重要的是，Chrome DevTools MCP 服务器是专为可靠性和深度而设计的。因为它建立在 Chrome 自己的协议和 Puppeteer 之上，所以它可以处理需要等待渲染的动态 Web 应用，可以管理多步骤交互，并且不会像简单的脚本那样遗漏东西。这解决了简单方法固有的脆弱性。

5. 你可以用它做什么

那么，**一个 AI 开发者助手在浏览器中有了"眼睛"之后，到底能做些什么呢？**早期用户已经展示了几个引人注目的场景，其中 Chrome DevTools MCP 提升了 AI 的能力：

5.1. 实时验证代码更改

当你的 AI 建议修复代码时，你可以让它立即在浏览器中测试该修复是否有效。例如，生成解决方案后，代理可以启动 Chrome 并检查更新后的页面行为是否符合预期。这闭合了从*“编写代码"到"运行和确认”*的循环。一个示例提示可能是：

❝在浏览器中验证你的更改是否按预期工作。

使用 Chrome DevTools MCP，AI 将在 Chrome 中启动应用，执行相关功能，并报告问题是否已解决。这有助于捕捉 AI 代码"看起来正确"但在实践中失败的情况——现在助手可以通过查看实际结果来捕获自己的错误。

5.2. 诊断网络和控制台错误

有时代码正在运行，但有些地方不对劲——可能是图像没有加载，或者点击按钮没有任何反应。以前，AI 只能猜测原因（“也许是 CORS 问题？”，“也许是 JS 错误？”）。现在，它可以查看控制台和网络日志来找到真正的原因。例如，AI 代理可以使用 MCP 工具扫描控制台错误或失败的网络请求。

❝localhost:8080 上有几张图片没有加载。发生了什么？

代理可以导航到该页面，调用 list_network_requests 查看这些图像 URL 是否返回了 404 或 500 错误，并检查 list_console_messages 是否有任何 CORS 错误。它可能会发现是 CORS 策略阻止了这些图像，或者文件路径错误——然后它可以根据真实证据建议修复方案（例如，“图像因 CORS 而无法加载；请考虑启用适当的请求头”）。这对运行时问题的故障排除来说是一个颠覆性的改变。

5.3. 模拟用户行为进行测试

复杂的 Bug 通常只有在执行特定的用户操作序列时才会出现。借助 Chrome DevTools MCP，你可以指示 AI重现用户流程来查找 Bug。代理可以在监控应用程序行为的同时，导航页面、填写表单、点击按钮——无论需要什么步骤。

❝为什么在输入电子邮件地址后提交表单会失败？

AI 将打开页面，在表单字段中输入电子邮件（使用 fill 或 fill_form），点击提交按钮 (click)，然后观察发生了什么。也许它通过读取控制台捕获到了提交时的 JavaScript 错误，或者它注意到没有发送网络请求。然后，它可以推断出类似"表单验证脚本由于未捕获的异常而崩溃"或"提交按钮没有绑定任何事件处理程序"之类的问题，并相应地提供建议。本质上，它可以自主地进行交互式流程的 QA 测试。

5.4. 调试实时样式和布局问题

前端开发者经常花费时间在 DevTools 中检查 DOM 和 CSS，以找出元素为什么未对齐或页面为什么"看起来很奇怪"。现在 AI 代理也可以做到这一点。你可以让它检查实时页面的布局和样式，以找出 UI 问题。

❝localhost:8080 上的页面看起来很奇怪，元素溢出了。怎么解决？

AI 可以使用 take_snapshot 来获取页面的 DOM 结构和当前 CSS 样式，甚至可以使用 take_screenshot 来获得视觉效果。通过分析这些信息，它可能会发现一个容器 div 具有固定的高度导致溢出，或者一个 CSS 文件加载失败了。然后它可以建议特定的 CSS 修复（比如"给 .container 添加 overflow: auto"或确保包含缺失的 CSS 文件）。

这种能力将 AI 变成了一个虚拟前端调试器，它可以检查实际渲染的状态，而不是仅仅依赖静态代码分析。如果一个元素由于 flexbox 问题被计算为 5000 像素宽，AI 可以看到这一点，并推荐修复方案，就像人类开发者在使用"检查元素"工具后所做的那样。

5.5. 自动化性能审计和优化

Web 性能至关重要，现在你的 AI 可以主动测量和改进性能指标了。Chrome DevTools MCP 允许代理运行完整的性能跟踪并对其进行分析。这意味着 AI 可以分析页面加载时间、渲染统计数据、JavaScript 执行等，然后根据真实数据提出优化建议。

❝localhost:8080 加载很慢。让它加载得更快些。

作为回应，代理可以在加载页面时启动性能跟踪，然后使用 performance_analyze_insight 来获取诸如**最大内容绘制 (LCP)**等指标。它可能会发现 LCP 是 4 秒，并确定主要元凶（例如，大图像或缓慢的 API 调用）。然后它可以提出有针对性的改进措施，例如优化该图像或添加预加载提示。

这是具有变革性的——AI 不再是猜测"也许你的图像很大"；它实际上是测量并确认了是什么减慢了页面速度，然后根据证据推荐修复方案。它将 AI 变成了一个使用真实 RUM（真实用户监控）式数据的性能教练。

6. 开始使用 Chrome DevTools MCP

设置 Chrome DevTools MCP 非常简单，特别是如果你正在使用受支持的 AI 开发工具之一：

**要求：**你需要 Node.js 22 或更高版本，以及系统上安装的 Chrome 浏览器（稳定通道或更新版本）。MCP 服务器是通过 npm 分发的。

**安装：**没有单独的程序需要下载；你配置你的 AI 工具（MCP 客户端），通过 npx 在配置文件中添加：

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

这一行配置告诉客户端如何启动服务器。使用 @latest 标签可以确保你在每次运行时都能获得最新版本。这很有用，因为该项目正在积极开发中，并将频繁更新。

Chrome DevTools MCP 已经可以与许多流行的 AI 编程助手一起使用，包括 Cursor、Claude Code、Gemini CLI、Cline 和其他几个。

如果你遇到问题，请确保你的 Node 版本足够新（例如，在 Node 20 上尝试会失败，并提示需要 Node 22+）。如果你的首选工具没有立即识别 MCP 服务器配置更改，你可能还需要尝试重启它。

7. 展望未来

Chrome DevTools MCP 目前处于公开预览版（GitHub 仓库），这意味着这是一个早期的版本，供社区试用并提供反馈。我们正在*“逐步地”*构建它——所以并非所有 DevTools 功能都已可用，但他们计划根据开发者最需要的功能来添加更多工具和能力。例如，未来的更新可能包括更多的 DOM 检查命令、更深入的 CSS 分析，或者在相关时添加新的性能指标。

译者：chuck/gemini

原文链接：https://addyosmani.com/blog/devtools-mcp/

Reference

[1] Chrome DevTools MCP: https://github.com/ChromeDevTools/chrome-devtools-mcp