Google Chrome DevTools MCP：AI 代理现在可以在浏览器中调试、测试和修复代码

百得二皇子

AI 编程工具很酷，但说实话，它们一直存在一个核心盲点。
它们可以编写代码，但一旦代码在浏览器中运行，它们就无法真正看到发生了什么。

没有控制台日志。

没有损坏的布局线索。

不再有诸如“为什么这个按钮没有任何作用？”之类的问题

这就像蒙着眼睛编码一样。

谷歌刚刚推出了Chrome DevTools MCP 服务器的公开预览版，这是一个重大进展。

它为您的 AI 代理提供了 Chrome 内部的真实眼睛。

调试、性能跟踪和网络检查（您和我每天在 DevTools 中使用的相同工具）现在可以直接由 AI 使用。

这意味着您的代理不仅仅是编写代码。

它实际上可以测试、检查和修复它。

什么是 MCP？

MCP 代表模型上下文协议。

它是一种开放标准，将 Claude、Gemini 或 Copilot 等大型语言模型 (LLM) 连接到外部工具和服务。

可以将其视为 AI 的通用适配器插头。

借助 Chrome DevTools MCP 服务器，此适配器可让您的 AI 执行以下操作：

记录站点的性能跟踪
查看网络请求（是的，它可以发现那些恼人的 CORS 问题）
检查控制台错误
甚至可以像用户一样单击按钮、填写表格和导航

举个例子。如果你问：

Localhost: 8080 加载缓慢。请加快加载速度。

人工智能可以启动 Chrome，运行性能跟踪，进行分析，然后通知您：“由于那个巨大的图像文件，您的 LCP 很高。压缩它。”

这是一个真正的工作流程，而不是猜测。

它是如何工作的？

为什么你会关心

到目前为止，编码代理就像初级人员一样，编写代码但从未运行过。你必须成为测试人员。

现在他们可以：

在浏览器中实时验证修复
“该按钮现在真的有效吗？”-> 代理可以检查。
调试 CSS/布局混乱
div 溢出？间距奇怪？它可以检查实时 DOM 和 CSS 并提供具体的修复方案。
模拟用户
它可以为您点击流程、填写表格并重新创建错误。
审计性能
运行跟踪，检查 LCP/CLS 等指标并提供建议。

简而言之，你的人工智能从“建议机器”变成了更接近可以实际测试代码的队友的东西。

设置

要求相当轻量：

Node.js 22.12.0+
最新版 Chrome
npm

将其放入您的 MCP 客户端配置中：

{ 
  “mcpServers”：{ 
    “chrome-devtools”：{ 
      “命令”：“npx”，
      “args”：[ “chrome-devtools-mcp@latest” ] 
    } 
  } 
}

使用chrome-devtools-mcp@latest可确保您的 MCP 客户端始终使用最新版本的 Chrome DevTools MCP 服务器。

MCP 客户端配置

Claude Code
使用 Claude Code CLI 添加 Chrome DevTools MCP 服务器。

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

Cline
按照https://docs.cline.bot/mcp/configuring-mcp-servers并使用上面提供的配置。

Codex
按照配置 MCP 指南使用上面的标准配置。

您还可以使用 Codex CLI 设置 Chrome DevTools MCP 服务器：

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Copilot / VS Code
请遵循 MCP 安装指南，使用上面的标准配置。您也可以使用 VS Code CLI 安装 Chrome DevTools MCP 服务器：

code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'

Cursor

进入 Cursor Settings -> MCP -> New MCP Server，然后填入上面的配置。

第一次使用

Check the performance of https://developers.chrome.com

您的 MCP 客户端应该打开浏览器并记录性能跟踪。

然后尝试测试提示：

Please check the LCP of web.dev

如果一切正常运行，Chrome 将启动，并且您的 AI 将执行跟踪。

它能做什么

以下是这些工具的一些介绍：

输入自动化：点击、填写表格、上传文件
导航：打开标签页、后退/前进、等待页面加载
模拟：限制 CPU、减慢网络速度、调整视口大小
性能：启动/停止跟踪，分析瓶颈
网络：检查请求，调试资产无法加载的原因
调试：运行脚本、抓取控制台消息、截取屏幕截图

几乎所有你在 DevTools 中手动完成的操作，AI 现在都可以尝试。

例子

假设您正在测试一个注册表单localhost:8080。输入电子邮件地址后，它总是失败。

你无需手动挖掘，只需告诉人工智能：

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

AI 打开 Chrome
用测试数据填写表格
点击提交
检查控制台+网络
返回结果显示：“POST 请求出现 400 错误。您的后端拒绝了该负载。”

这是实际的调试，而不仅仅是猜测。

一些问题

如果您在沙盒环境中运行 Chrome（例如 Docker、macOS Seatbelt），Chrome 可能无法启动。您需要在沙盒之外运行 Chrome，或通过连接--browserUrl。
Chrome 默认使用共享配置文件目录。如果您希望每次都保持干净，请使用--isolated=true。
如果您不关心可见的浏览器窗口，则支持无头模式。

这只是公开预览，但它标志着人工智能代理不再只是“编写代码和希望”的明确举措。

借助 Chrome DevTools MCP，他们可以在代码运行的实际环境（浏览器）中有效地测试、调试和 ** 代码。

关于本文
译者：百得二皇子
作者：@Civil Learning
原文：https://medium.com/coding-nexus/google-chrome-devtools-mcp-ai-agents-can-now-debug-test-and-fix-code-in-the-browser-cca36f80bf0c

百得社区