Agent Skills
返回列表
💻

Puppeteer DevTools 协议录制器

开发编程 更新于 2026.08.29

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

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/puppeteer-devtools-protocol-recorder。

技能介绍

要解决的问题

浏览器自动化调试中一个常见痛点：页面出问题时，开发者往往需要反复手动打开 DevTools，在 Network、Performance、Accessibility 等多个面板之间来回切换截图，再凭记忆复现路径。这种人工排查方式难以标准化，也难集成到 CI 回归流水线。Puppeteer DevTools 协议录制器针对的就是这一环节：把 CDP（Chrome DevTools Protocol）会话的录制与回放固化成可复用的自动化脚本，让协议层数据成为测试资产。

核心能力与工作方式

该技能基于 Puppeteer 的 CDPSession API，直接与 Chrome DevTools 协议通信，覆盖以下关键域：

  • Network：捕获请求/响应、耗时与失败请求
  • Performance：记录关键性能时间线
  • Accessibility：追踪可访问性事件

工作流程大致分为三步：

  1. 建立 CDP 会话，绑定目标页面
  2. 按需订阅上述域的事件，录制期间的协议数据
  3. 将录制结果导出为 HAR 兼容的 trace 文件，供后续回放或 CI 比对

适用边界与注意点

该技能聚焦于协议层录制，不替代端到端 UI 测试框架；它假设运行环境已具备可用的 Chrome 实例，puppeteer 安装时会下载兼容版本，而 puppeteer-core 则要求使用者自行提供浏览器。导出的 trace 与 HAR 标准兼容，但回放精度仍受目标站点动态行为影响，建议在稳定测试环境中使用。

使用场景

  • 前端定位加载慢：在 CI 中自动录制首屏加载过程，捕获资源请求瀑布和性能时间线，对比不同版本的 trace 定位延迟。
  • 回归测试：在 CI 流水线中回放录制好的用户操作会话，验证网络请求序列和无障碍事件是否符合预期。
  • 页面异常排查：录制生产环境页面的 CDP 会话，导出 HAR 供离线分析第三方请求失败或可访问性警告。
  • 协议教学：通过录制一段 CDP 会话并导出 trace，展示 Puppeteer CDPSession 的工作流程。

适合人员

  • 前端开发：负责页面性能优化，需要自动化采集 CDP 数据定位瓶颈。
  • 测试工程师：维护浏览器自动化回归套件，希望将手工操作转为可回放的协议追踪。
  • CI 平台维护者：需要稳定的协议级录制工具集成到 CI 流水线。
  • 技术布道师：讲解浏览器协议录制原理，需要可运行的演示脚本。