Chrome DevTools MCP - Let Your Coding Agent Debug Your Browser ★★★★☆ 4星

Chrome MCP DevTools 来源: Chrome for Developers

核心功能

Coding Agent 可以直接连接活动的浏览器会话进行调试

主要能力

1. 复用现有浏览器会话

想象一下你想让 coding agent 修复一个需要登录才能触达的问题。现在 your coding agent 可以直接访问你当前的浏览会话，不需要额外登录。

2. 访问活动调试会话

Coding agent 可以访问 DevTools UI 中的活动调试会话。例如：

当你在 Chrome DevTools Network 面板发现失败的请求时，选中该请求，让 coding agent 调查
在 Elements 面板中选中的元素，同样可以交给 agent 调查

工作原理

Chrome M144 (Beta) 新增功能：允许 Chrome DevTools MCP server 请求远程调试连接
默认情况下，远程调试连接是禁用的，用户需要显式启用
配置 --autoConnect 选项后，MCP server 会连接到活动的 Chrome 实例
每次请求时，Chrome 会显示对话框请求用户授权
调试会话活动时，Chrome 顶部显示 "Chrome is being controlled by automated test software" 横幅

使用步骤

Step 1: 启用远程调试

在 Chrome (>=144) 中：

导航到 chrome://inspect/#remote-debugging
按照对话框 UI 允许或拒绝传入的调试连接

Step 2: 配置 MCP Server

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

Step 3: 测试

打开 gemini-cli，运行：

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

意义

这标志着 AI 辅助调试的重大进步：

无需在自动化和手动控制之间选择
可以自己在 DevTools 中发现问题
然后无缝交给 coding agent 修复

Google 表示这只是第一步，未来会逐步通过 Chrome DevTools MCP Server 向 coding agents 暴露更多面板数据。