Agent Skills
返回列表
🤖

浏览器测试与 DevTools

AI Agent 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/browser-testing-with-devtools-sh-2nbckq。

技能介绍

解决什么问题

很多测试仍停留在静态代码审查：能读文件、看 diff、跑 lint，却不知道页面在真实浏览器里渲染成什么样。用户报告“按钮点了没反应”“布局在窄屏错位”“控制台有红色报错”“接口明明成功但页面空白”时，只看源码很难定位。该技能通过 Chrome DevTools MCP 把 Agent 接到浏览器，让它像人一样观察当前页面，而不是猜测运行时发生了什么。

技能如何工作

核心思路是让 Agent 获得实时浏览器视野，把静态分析与真实执行连接起来。它围绕浏览器内可观察的证据工作：检查 DOM 结构与可见状态，读取 console 日志和警告，分析 network 请求、响应与失败原因，并采集性能数据，例如 Core Web Vitals、绘制时机和布局偏移。调试时，Agent 可以先定位元素或请求，再验证修复是否真正生效，而不是只判断代码“看起来对”。

关键步骤包括：确认问题发生在渲染、交互、接口或性能层；在浏览器中复现并保留 DOM、console、network 的现场；用页面实际行为核对源码推断；针对 UI 修改、控制台错误、API 响应异常、性能回退做自动化检查。默认测试会使用独立的 Chrome profile；如果需要把 Agent 接到正在运行的浏览器，要谨慎评估登录态和安全边界。

适用边界与注意点

适合构建或修改浏览器中渲染的内容，以及排查布局、样式、交互、控制台错误、网络请求、API 响应、性能指标等问题。也可用于验证某个修复是否在真实页面中生效，或让 Agent 参与自动化 UI 测试。

不适合后端纯逻辑、CLI 工具或不运行在浏览器中的代码。使用 --autoConnect 前要确认目标 Chrome 已开启远程调试，并理解它会进入已有登录态；除非测试确实依赖用户会话，否则优先使用隔离 profile，避免污染个人浏览器状态。

使用场景

  • 排查「按钮点击无响应」：Agent 在浏览器中读取 DOM 与控制台报错，判断是选择器失效还是脚本异常。
  • 修改响应式断点后，让 Agent 在浏览器中重放窄屏视口，检查元素溢出和布局偏移是否消失。
  • 接口返回 200 但页面空白时，用 network 工具查看响应体，对比渲染所需字段是否缺失。
  • 压缩图片并开启懒加载后，让 Agent 采集 Core Web Vitals，验证 LCP 是否真正下降。

适合人员

  • 前端工程师：改完样式和交互后，需要真实浏览器的验证结果，而不是只跑静态检查。
  • UI 自动化测试工程师：希望 Agent 在浏览器中复现缺陷，并留下 DOM、控制台和网络证据。
  • 负责线上问题排查的工程师：拿到用户报错截图后，需要在浏览器里快速复现并定位控制台错误。
  • 关注页面性能的技术负责人：想在优化上线前，用真实浏览器数据核对 Core Web Vitals 是否达标。