DevTools for Agents

qq_29101285

291人浏览 · 2026-08-14 11:27:03

qq_29101285 · 2026-08-14 11:27:03 发布

chrome-devtools-mcp 是 Google 在 I/O Connect Berlin 2026 发布的开源工具，它通过 MCP（Model Context Protocol） 让编码 Agent 直接控制并检查实时 Chrome 浏览器。你截图里的 Chrome 151 正是这个工具进入稳定版本后的更新。

一、它到底是什么？

传统开发流程中，Agent 写完代码后看不到浏览器里发生了什么——控制台报错、网络失败、样式崩了，全靠你复制粘贴反馈。chrome-devtools-mcp 把这个循环自动化了：

Agent 写代码 → 自动打开浏览器 → 检查控制台/网络/性能 → 发现 Bug → 自己修复 → 再次验证

二、核心能力

能力	说明	对应截图中的特性
控制台读取	Agent 直接读取 `console.error/warning/log`，含 source map 堆栈	—
网络监控	检查请求失败、响应数据、耗时	—
性能追踪	录制 Performance Trace，分析长任务、INP 问题	内存调试改进
Lighthouse 审计	自动跑分数，给出优化建议	—
截图/录屏	可视化检查渲染结果	—
GCF 格式	替代 JSON 的紧凑格式，降低 Agent 通信 token 消耗	experimental GCF
多页面支持	同时调试多个标签页/iframe	improved multi-page
内存调试	Heap Snapshot、内存泄漏分析	memory debugging

三、如何接入你的前端项目（Vue3 + Vite + Codex + TS + AntD）

方式一：Codex CLI 接入（推荐）

# 1. 给 Codex 添加 chrome-devtools MCP 服务器
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

# 2. 查看已添加的 MCP
codex mcp list

配置完成后，你在 Codex 中可以直接发这样的指令：

启动开发服务器，打开 http://localhost:5173，检查控制台是否有报错，
如果 Ant Design Vue 的表单校验有问题，自动修复并验证。

Codex 会：

执行 npm run dev
用 Puppeteer 打开 http://localhost:5173
读取控制台消息
截图检查 UI
发现错误 → 修改代码 → 刷新页面 → 再次验证

方式二：连接已有浏览器（保留登录态）

如果你需要调试已登录状态的页面（比如需要 Cookie 的后台系统），用 --autoConnect 模式：

# 先在自己的 Chrome 里开启远程调试
# 访问 chrome://inspect/#remote-debugging 允许调试连接

# 然后配置 Codex 连接已有浏览器
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --autoConnect

方式三：无头 CI 模式（自动化测试）

// .codex/config.toml 或 MCP 配置
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--headless",
        "--slim",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

参数	作用
`--headless`	无界面运行，适合 CI
`--slim`	仅保留导航/执行/截图 3 个工具，轻量
`--isolated`	临时用户目录，不污染本地 Chrome

四、实战场景：Agent 自修复 Vue3 组件

假设你有一个 Ant Design Vue 的表格组件出了问题：

你：打开项目，找到 UserTable 组件，检查为什么分页不工作，
    查看网络请求和控制台报错，修复后验证。

Agent 的执行流程：

1. navigate_page → http://localhost:5173/users
2. take_screenshot → 确认页面渲染
3. list_console_messages → 发现 [Vue warn]: Invalid prop: type check failed for prop "pagination"
4. get_network_requests → 发现 API 返回 { data: [...], total: 100 } 但前端没传 pageSize
5. 读取 src/components/UserTable/index.vue
6. 修复: 给 <a-table> 补上 :pagination="{ pageSize: 10, total }"
7. evaluate_script → 在浏览器里执行验证代码
8. take_screenshot → 确认分页已显示
9. 提交修改

五、安全注意事项（重要）

chrome-devtools-mcp 会暴露浏览器的全部内容给 Agent，包括 Cookie、登录态、本地存储。

风险	建议
Agent 能看到你的登录态	调试敏感系统时用 `--isolated` 启动独立浏览器
多 Agent 冲突	加 `--experimentalPageIdRouting` 隔离标签页
生产环境调试	绝不要把生产站点的调试端口暴露给 Agent

六、与"Agent 融入前端框架"的关联

之前我们讨论了三种 Agent 角色（生成、审查、运行时）。chrome-devtools-mcp 主要赋能的是：

Agent 角色	DevTools MCP 的作用
生成 Agent	生成代码后自动验证渲染结果，不用人眼检查
审查 Agent	自动跑 Lighthouse、性能追踪，给出量化报告
运行时 Agent	浏览器内 Agent 可以通过 DevTools Protocol 获取自身运行环境的深度信息