Chrome DevTools MCP（2025）

Source: Hacker News

我们为 Chrome DevTools MCP 服务器推出了一项许多用户一直在请求的增强功能：让编码代理能够直接连接到活动的浏览器会话。

有了此增强功能，编码代理可以：

• 复用已有的浏览器会话： 想象一下，你希望你的编码代理修复一个需要登录才能访问的问题。现在，编码代理可以直接访问你当前的浏览会话，而无需额外的登录。
• 访问活动的调试会话： 编码代理现在可以访问 DevTools UI 中的活动调试会话。例如，当你在 Chrome DevTools 网络面板中发现一个失败的网络请求时，选中该请求并让你的编码代理进行调查。同样的操作也适用于在 Elements 面板中选中的元素。这实现了手动调试与 AI 辅助调试之间的无缝切换。

自动连接功能是 Chrome DevTools MCP 连接到 Chrome 实例的现有方式的补充。你仍然可以：

• 使用专用于 Chrome DevTools MCP 服务器的用户配置文件运行 Chrome（当前默认）。
• 通过远程调试端口连接到正在运行的 Chrome 实例。
• 在隔离环境中运行多个 Chrome 实例，每个实例使用临时配置文件。

工作原理

我们在 Chrome M144（当前为 Beta 版）中添加了一个新功能，允许 Chrome DevTools MCP 服务器请求远程调试连接。此新流程基于 Chrome 现有的远程调试能力。默认情况下，Chrome 中的远程调试连接是关闭的。开发者必须通过访问 chrome://inspect#remote-debugging 显式启用该功能。

当 Chrome DevTools MCP 服务器使用 --autoConnect 选项启动时，它会连接到活动的 Chrome 实例并请求一次远程调试会话。为防止滥用，Chrome 会弹出对话框，要求用户在每次 MCP 服务器请求远程调试会话时授予权限。在调试会话期间，Chrome 会在页面顶部显示 “Chrome 正在被自动化测试软件控制” 的横幅。

Chrome 中全新的远程调试流程和界面。

入门

步骤 1：在 Chrome 中设置远程调试

在 Chrome (≥ 144) 中，启用远程调试：

1. 访问 chrome://inspect/#remote-debugging。
2. 按照弹出对话框的 UI 允许或拒绝传入的调试连接。

在客户端请求远程调试连接之前，需要先启用远程调试。

步骤 2：配置 Chrome DevTools MCP 服务器自动连接

启动 MCP 服务器时使用 --autoConnect 命令行参数。以下是 gemini‑cli 的示例配置：

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

步骤 3：测试你的设置

打开 gemini‑cli 并运行以下提示：

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

Chrome DevTools MCP 服务器将尝试连接到你正在运行的 Chrome 实例，并显示一个权限对话框：

Chrome 正在请求用户许可以启动远程调试会话。

点击 Allow（允许）。MCP 服务器将打开 https://developers.chrome.com 并进行性能追踪。

完整说明请参阅 GitHub 上的 README（GitHub）。

让你的编码代理接管调试会话

连接到实时的 Chrome 实例意味着你不再需要在自动化和手动控制之间做选择。你可以自行使用 DevTools，或将调试任务交给你的编码代理。例如：

• 打开 DevTools，在 Elements 面板中选中一个元素，并让编码代理调查问题。
• 在 Network 面板中选中一个网络请求，并让编码代理进行分析。

这仅仅是第一步。我们计划通过 Chrome DevTools MCP 服务器逐步向编码代理公开更多面板数据，敬请期待！