Chrome DevTools MCP 支持直接连接活跃浏览器会话
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)中执行以下步骤启用远程调试:
- 访问
chrome://inspect/#remote-debugging启用远程调试 - 按照对话框界面允许或拒绝传入的调试连接

需要先启用远程调试,客户端才能请求远程调试连接。
第二步:配置 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 面板。可以选中网络请求并让编码助手调查。