还在手点浏览器？让 AI 直接操控 Chrome 帮你干活！

你还在手点浏览器调试网页？让 AI 来！

说个真实场景——你要测一个网页的交互流程，要反复点、填表、等加载、抓网络请求。手动操作十分钟，AI 工具三十秒搞定。这就是今天要介绍的 Chrome DevTools Agent Skill。

它能做什么？

这个 Skill 背后是 Chrome DevTools MCP（Model Context Protocol）服务器，连接 Chrome 浏览器和控制 AI Agent 的能力。说白了：你的 AI 助手能直接”看见”并操作浏览器了。

• 浏览器自动化：打开页面、点击元素、填写表单、处理弹窗——全都不需要你动手。
• 页面快照：抓取页面结构文本，找到要操作的元素 UID，然后精准操作。
• 调试能力：读取控制台日志、检查网络请求、运行自定义 JavaScript。
• 性能分析：录制页面加载轨迹，AI 自动给出 LCP、CLS 等核心指标的问题分析。
• 模拟环境：调整视口大小、限制 CPU/网络、模拟地理位置。

怎么工作的？

标准工作流分三步：

1. take_snapshot — 拍一张页面结构快照，获取所有可交互元素的 UID。
2. 找到目标元素的 UID，比如 uid=e42。
3. click(uid="e42") 或 fill(uid="e42", value="hello") 执行操作。

每次页面有变化（跳转、加载完成），都要重新拍快照，因为元素 UID 会变。这是官方建议的最佳实践。

适合谁用？

• 前端开发者：自动化 UI 测试流程，不用一遍遍手动点。
• AI 应用工程师：让 Agent 直接操控真实浏览器环境，而不是 mock。
• 测试工程师：做性能 profile、排查网络请求问题。
• 数据采集：自动抓取需要 JS 渲染的网页内容。

快速上手

安装需要两个东西：Chrome DevTools MCP 服务器（Smithery 上列出了 Apify、Browerbase 等推荐），以及这个 Skill 文件。详细安装步骤在 GitHub 仓库里，附有完整的工具链说明。

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

配合 Claude Code、Codex 等主流 AI 编程助手使用，效果最好。

总结一下：如果你日常需要和浏览器打交道，这个 Skill 能把重复操作全部自动化，值得试试。

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