AI 摘要：Chrome DevTools MCP 迎来了重大更新，现在允许 AI 编程助手直接连接到活跃的浏览器会话。这项新功能极大地提升了调试效率，编程助手可以重用现有登录会话、访问活跃的调试面板（如网络面板和元素面板），从而实现手动调试与 AI 辅助调试的无缝切换。文章详细介绍了这一功能的实现原理、安全措施（如用户授权弹窗和控制横幅）以及如何配置和使用，为开发者提供了更智能、更便捷的调试体验。

1. Chrome DevTools MCP 新功能概述
• 核心更新：Chrome DevTools MCP 服务器现在支持 AI 编程助手直接连接到活跃的浏览器会话。
• 主要优势
• 重用现有浏览器会话：编程助手可以直接访问已登录的会话，无需重新登录。
• 访问活跃调试会话：编程助手可以直接从 DevTools UI 访问并调查选定的元素或网络请求。
• 工作流改进：实现手动调试与 AI 辅助调试的无缝切换。

2. Chrome DevTools MCP 连接方式
• 现有连接方式
• 使用特定用户配置文件运行 Chrome。
• 通过远程调试端口连接到运行中的 Chrome 实例。
• 在独立临时配置文件中运行多个 Chrome 实例。
• 新增自动连接功能：通过 --autoConnect 选项，MCP 服务器可以请求远程调试连接。

3. 远程调试工作原理及安全措施
• 基础机制：基于 Chrome 现有的远程调试能力。
• 启用步骤：用户需在 chrome://inspect#remote-debugging 中手动启用远程调试。
• 连接流程：
• MCP 服务器配置 --autoConnect 选项后，将尝试连接活跃的 Chrome 实例。
• 用户授权：Chrome 会弹出对话框，要求用户授权远程调试会话，以防止滥用。
• 状态提示：调试会话激活时，Chrome 顶部会显示“Chrome is being controlled by automated test software”横幅。

4. 如何开始使用
• 步骤一：在 Chrome 中设置远程调试
• 导航至 chrome://inspect/#remote-debugging。
• 根据对话框提示允许或禁止传入的调试连接。
• 步骤二：配置 Chrome DevTools MCP 服务器
• 在 MCP 服务器配置中，为 chrome-devtools 服务添加 --autoConnect 命令行参数。
• 示例配置适用于 gemini-cli。
• 步骤三：测试设置
• 运行 gemini-cli 并输入性能检查指令。
• 允许 Chrome 弹窗中的远程调试请求。
• 验证 MCP 服务器是否能成功打开网页并执行性能追踪。
• 更多信息：可参考 GitHub 上的 README 文档获取完整说明。

5. 未来展望
• 调试任务交接：AI 编程助手可以接管调试任务，提升效率。
• 面板数据暴露：计划逐步向编程助手暴露更多 DevTools 面板数据。