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 中设置远程调试? 在 Chrome144中执行以下步骤启用远程调试访问chrome://inspect/#remote-debugging启用远程调试按照对话框界面允许或拒绝传入的调试连接需要先启用远程调试客户端才能请求远程调试连接。第二步配置 Chrome DevTools MCP 服务器自动连接要将chrome-devtools-mcp服务器连接到正在运行的 Chrome 实例在 MCP 服务器配置中使用--autoConnect命令行参数。以下代码片段是 gemini-cli 的示例配置{mcpServers:{chrome-devtools:{command:npx,args:[chrome-devtools-mcplatest,--autoConnect,--channelbeta]}}}注意在 Chrome M144 进入稳定版之前需要指定--channelbeta。第三步测试配置打开 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面板。可以选中网络请求并让编码助手调查。Chrome DevTools MCP 让 AI 无缝接管浏览器调试会话