Chrome DevTools MCP 让 AI 无缝接管浏览器调试会话

Chrome DevTools MCP 让 AI 无缝接管浏览器调试会话

Chrome DevTools MCP 服务器近期新增了一项开发者期待已久的功能：编码助手可以直接接入现有的浏览器会话。

借助这一能力，编码助手可以：

• 复用已登录的浏览器会话：假设需要修复一个需要登录才能访问的问题，编码助手现在可以直接使用当前的浏览会话，无需再次登录。
• 接入活跃调试会话：当在 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 都会向用户显示对话框请求许可。此外，在调试会话活跃期间，Chrome 顶部会显示"Chrome 正受到自动测试软件的控制"横幅。

开始使用

要使用新的远程调试能力，需要先在 Chrome 中启用远程调试，然后配置 Chrome DevTools MCP 服务器使用自动连接功能。

第一步：在 Chrome 中设置远程调试

? 在 Chrome（>=144）中执行以下步骤启用远程调试：

1. 访问 chrome://inspect/#remote-debugging 启用远程调试
2. 按照对话框界面允许或拒绝传入的调试连接
   

需要先启用远程调试，客户端才能请求远程调试连接。

第二步：配置 Chrome DevTools MCP 服务器自动连接

要将 chrome-devtools-mcp 服务器连接到正在运行的 Chrome 实例，在 MCP 服务器配置中使用 --autoConnect 命令行参数。

以下代码片段是 gemini-cli 的示例配置：

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

注意：在 Chrome M144 进入稳定版之前，需要指定 --channel=beta。

第三步：测试配置

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

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

注意：autoConnect 选项需要用户先启动 Chrome。

Chrome DevTools MCP 服务器将尝试连接到正在运行的 Chrome 实例，并显示对话框请求用户许可：

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

点击"允许"后，Chrome DevTools MCP 服务器会打开 developers.chrome.com 并采集性能追踪数据。

完整的使用说明请参考 GitHub 上的 README。

让编码助手接管调试会话

能够连接到活跃的 Chrome 实例意味着无需在自动化与手动控制之间做选择。开发者可以自行使用 DevTools，也可以将调试任务交给编码助手。如果在网站上发现问题，可以打开 DevTools 查看并定位导致问题的元素。如果希望编码助手修复该问题，现在可以通过 Chrome DevTools MCP 服务器实现。可以在 Elements 面板中选中元素，然后让编码助手调查问题。

同样的功能也适用于 Network 面板。可以选中网络请求并让编码助手调查。