Skill Detail

Puppeteer DevTools Protocol Recorder

Records and replays Chrome DevTools Protocol (CDP) sessions via Puppeteer's CDPSession API, captures Network, Performance, and Accessibility domain events, and exports HAR-compatible traces for CI regression testing.

Developer ToolsCursor
Developer Tools Cursor Security Reviewed
Tool match: puppeteer โญ 94.1k GitHub stars โฌ‡ 40.2M/wk npm
INSTALL WITH ANY AGENT
npx skills add agentskillexchange/skills --skill puppeteer-devtools-protocol-recorder Copy
Works best when you want a reusable capability, not another fragile one-off prompt.
At a glance
Author
puppeteer
Last updated
Mar 24, 2026
Quick brief

The Puppeteer DevTools Protocol Recorder uses Puppeteer’s page.createCDPSession() to directly interface with Chrome’s DevTools Protocol domains for comprehensive browser telemetry capture. It enables Network domain events (requestWillBeSent, responseReceived, loadingFinished) for full HAR generation, Performance domain for runtime metrics (ScriptDuration, LayoutDuration, RecalcStyleDuration), and Accessibility domain for full accessibility tree snapshots. The agent records sessions as timestamped CDP event logs that can be replayed for deterministic testing. It captures heap snapshots via HeapProfiler.takeHeapSnapshot, CSS coverage via CSS.startRuleUsageTracking, and JavaScript execution contexts via Runtime.executionContextCreated. For CI integration, recorded sessions serve as regression baselines with replayed sessions comparing network waterfall timing, layout shift scores (CLS), and accessibility tree diffs against recorded baselines. Exports include HAR 1.2 format, Chrome trace JSON for chrome://tracing, and JUnit XML for CI test reporters.