让 AI 真正”看见”浏览器：chrome-devtools 让自动化的盲区消失了

还在用截图+肉眼看浏览器？给 AI 装上 Chrome DevTools 之眼

写前端自动化脚本最痛苦的环节是什么？很多人会说”调试”。明明知道页面哪里出了问题，但 AI 工具就是点不到那个按钮、填不进那个输入框——因为它根本”看不见”页面上发生了什么。

今天介绍一个让 AI 真正掌控浏览器的 Skill：github/chrome-devtools。

它能做什么？

这个 Skill 通过 Chrome DevTools MCP 协议，把完整的浏览器控制权交给 AI Agent。它不是简单的”打开网页”，而是能：

• 精确点击任意页面元素（通过可访问性树定位 uid）
• 拦截并分析网络请求，找 4xx/5xx 错误源头
• 录制性能轨迹，诊断 LCP、CLS 等 Core Web Vitals 问题
• 模拟各种网络节流、CPU 节流、地理位置
• 在页面上下文里直接执行任意 JavaScript
• 截图、填表、处理弹窗——全部可编程

工作流是什么样的？

官方推荐三步走：

Pattern A — 精准定位元素：
先用 take_snapshot 获取页面可访问性树 → 从快照里找到目标元素的 uid → 用 click(uid=...) 或 fill(uid=..., value=...) 操作。

Pattern B — 快速排查错误：
list_console_messages 查 JS 报错 → list_network_requests 找失败的资源 → evaluate_script 检查 DOM 状态。

Pattern C — 性能瓶颈分析：
performance_start_trace(reload=true, autoStop=true) → 等页面加载完成 → performance_analyze_insight 拿详细报告。

为什么值得装？

它解决了一个根本问题：AI 对浏览器”盲操作”。传统 RPA 工具靠坐标点击，一换分辨率就废；而 chrome-devtools 靠语义定位，页面结构变了他依然能找到目标。

加上 GitHub 官方维护的背书，以及 20k+ 的 awesome-copilot 生态加成，这个 Skill 的可靠性和更新频率都有保障。

适用场景

• AI Agent 做端到端自动化测试
• 抓取需要登录验证的动态页面
• 自动化 SEO 审计和性能监控
• AI 编程工具的浏览器操作层

配合 Claude Code 或 Codex 使用效果最佳——让 AI 既有推理能力，又有真正的”眼睛”去看页面在干什么。

GitHub 仓库地址

GitHub: https://github.com/github/awesome-copilot/tree/main/skills/chrome-devtools