Claude Code + Chrome DevTools：浏览器自动化调试的正确姿势

做前端开发，这几个 DevTools 骚操作我不准你还不知道

写代码最崩溃的瞬间是什么？页面在本地跑得好好的，一上线就白屏、崩溃、卡死——然后对着浏览器 DevTools 一顿乱点，什么都没发现。

今天介绍一个 Claude Code 的 chrome-devtools skill，把 Chrome 开发者工具的能力直接接入了 AI 对话。你说人话，AI 帮你操作浏览器——截图、审查网络请求、抓性能瓶颈、全自动 UI 测试，全都不用手点。

它能做什么？

这个 skill 基于 Chrome DevTools MCP 协议，暴露了五大类工具：

• 浏览器自动化：导航、点击、表单填写、对话框处理、文件上传——完全不用手点鼠标
• 视觉审查：截长图、截特定元素图，配合 AI 判断 UI 正不正确
• 调试 & 检查：抓 Console 错误、分析网络请求（4xx/5xx 一目了然）、在页面里直接运行自定义 JS
• 性能分析：录制 PageSpeed trace，自动分析 LCP、CLS、INP 等核心指标，告诉你慢在哪里
• 模拟 & 降级：调节 CPU/网络限速、模拟地理位置、改变视口尺寸，测试各种异常场景

典型工作流

比如你要自动化测试一个注册流程：

• 告诉 AI「打开注册页，填入测试账号信息，截图确认表单样式」
• AI 自动执行：new_page → navigate_page → fill → click → take_screenshot
• 完成后告诉你 Console 有没有报错，网络请求有没有 4xx

再比如页面慢——你可以直接说「帮我分析这个页面为什么加载要 8 秒」，AI 会自动录制 trace，给你出一份 LCP 问题报告，精确到哪个资源阻塞了渲染。

为什么实用？

以前 DevTools 是人肉用的：一个个点，一个个看，一个个猜。现在你可以直接问 AI「这个页面有哪些性能问题」，它会主动帮你跑 trace、抓数据、出结论——就像有一个高级前端工程师在帮你做 Code Review，但它是 24 小时待命的。

这个 skill 特别适合：

• 前端开发做自动化 UI 测试（不用写 Playwright 脚本）
• 产品/运营排查线上 bug（截图 + Console 错误一键导出）
• 做性能优化时让 AI 帮你跑 Profile 出报告
• 测试各种响应式布局和网络降级场景

安装 & 使用

在 Claude Code 里直接调取 chrome-devtools skill（需要配合 Chrome DevTools MCP server 使用）。GitHub 上属于 awesome-copilot 社区技能库，Star 数 20k+，品质有保证。

戳这里看 SKILL.md 和完整工具列表 →

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