AI改网页总翻车？让Claude直接操控Chrome来治它

你有没有遇到过这种情况——让 AI 帮你改了个网页，结果它说”改好了”，你打开一看，页面直接崩了？

这就是没有浏览器控制的 AI 最大的盲区：它不知道页面实际长什么样，更不知道用户看到的是什么。

Chrome DevTools Skill 就是来解决这个问题的。它让 AI 直接操控你的 Chrome 浏览器——截图、看控制台、抓网络请求、测性能，全部在 AI 的”眼皮底下”完成。

它能做什么？

简单说，这是一个基于 Chrome DevTools MCP 的浏览器自动化 Skill，一共 26 个工具，分成四类：

• 页面与导航：打开新标签页、跳转到指定 URL、前进后退、关闭页面，还能等待特定元素出现。
• 交互操作：点击元素、填表单、悬停、拖拽，甚至能上传文件——完全模拟真人操作。
• 调试与检查：截屏、拿 DOM 快照（带可访问性树）、读控制台日志、执行 JS 脚本、抓网络请求和响应。
• 性能分析：录制性能轨迹、分析 Core Web Vitals（LCP、CLS 等）、节流 CPU/网络、模拟地理位置和移动端视口。

为什么实用？

举几个真实场景你就明白了：

做网页爬虫的时候，以往 AI 只能靠”猜”来生成选择器，现在可以直接打开页面、截图确认、快照抓元素，精准度完全不一样。

写完一段前端代码，想快速验证 UI 效果？不用自己开浏览器，AI 直接截图给你看，还顺便跑一遍控制台报错检查。

测性能瓶颈？AI 录制一次访问轨迹，直接输出 LCP 时间、布局位移量、慢请求排行——比你手工在 DevTools 里点来点去快 10 倍。

甚至可以用来做自动化测试：AI 模拟登录、填写、提交表单，检查页面响应是否符合预期，全程不需要你操作鼠标。

怎么安装？

一行命令搞定：

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

安装完成后 AI 自动识别 Skill，使用时直接说”帮我截个图看看这个页面”，或者”检查一下这个页面的控制台有没有报错”就行。

前提是你系统上要有 Chrome 浏览器，并且通过 MCP 连接到 AI。

一句话总结

这个 Skill 把 Chrome DevTools 的完整能力交给 AI，填补了”AI 看不见摸不着浏览器”这个根本缺口。对任何需要操作网页、做自动化测试、或者要验证前端效果的开发者来说，都是一个实打实的效率工具。

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

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