让AI真正”看得见”浏览器：Chrome DevTools Agent 测评

你有没有过这种感觉——AI 帮你做前端调试，结果它对着代码”盲猜”，截图来回好几次，进度条龟速推进，问题还是没定位到？

说白了，是 AI 少了一双”眼睛”。

Chrome DevTools Agent 就是补这双眼睛的。

这是 GitHub 官方 awesome-copilot 技能库里的一员猛将，本质上是一个 Chrome DevTools MCP 服务器的封装，让 AI Agent 能直接操控真实浏览器——不是跑 Playwright 脚本那种，而是真正的 Chrome DevTools Protocol 全套能力下放。

它能做什么？

浏览器自动化——AI 发指令让浏览器打开指定页面、点击按钮、填写表单、滚动页面，全套自然语言搞定，不用写一行 Puppeteer 代码。

截图与页面快照——不只是截图，还能提取页面的可访问性树（accessibility tree），精确定位到每个元素的 uid，AI 知道自己在点哪个按钮，而不是靠坐标猜。

性能分析——一键开启性能追踪，记录页面加载过程的 trace 数据，然后让 AI 解读 LCP、CLS、INP 等 Core Web Vitals 指标，直接告诉你哪里慢、为什么慢。

网络请求监控——抓取页面所有 HTTP 请求，查看响应体、分析超时和 4xx/5xx 错误，不用开 F12 一个个翻。

设备模拟——改变视口大小、模拟 CPU 节流、模拟网络限速，测试页面在弱网或低端设备下的表现。

怎么装？

npx skills add https://github.com/github/awesome-copilot --skill chrome-devtools

装完之后，Claude Code / OpenClaw 这类 Agent 会自动识别这个技能，不需要额外配置。

实际场景举例

场景一：调试一个间歇性加载失败的页面
AI 先用 list_console_messages 扫控制台报错，再用 list_network_requests 定位到哪个资源返回了 500，最后用 evaluate_script 直接在页面里跑调试代码——整套链路一气呵成，不需要你反复截图、手动翻 Network 面板。

场景二：做性能基准测试
AI 对着一个页面跑 performance_start_trace，然后 performance_analyze_insight 拿回详细分析，告诉你”Largest Contentful Paint 超过 4 秒，主要卡在图片未压缩”，结论比大多数人工审计还准确。

适合谁用？

如果你经常需要 AI 帮你做前端调试、网页自动化、UI 验收测试、性能分析，这技能基本属于必装级别。尤其是做 AI Coding 辅助工作流的，Chrome DevTools Agent 让 AI 从”看代码猜问题”进化到”看浏览器真实状态解决问题”。

当然，Chrome 得装在本地或能访问到 DevTools Protocol 的环境里；远程服务器跑的话需要配合端口转发或者有头浏览器模式。

GitHub 仓库：https://github.com/github/awesome-copilot

技能路径：skills/chrome-devtools/SKILL.md，Star 数 20K+（Smithery 安装量），开源 MIT 协议。

GitHub: https://github.com/github/awesome-copilot