skills.rest
vanducng
vanducngCOMMUNITY
Explore all skills by this author →
Website𝕏@vanducngGitHub

browser-trace

Capture read-only DevTools Protocol traces from browser automation sessions into NDJSON.

5|Updated May 2, 2026
Search Tags:#debugging#screenshots#cdp#ndjson#browser-trace#dom-dumps
One-click install
npx skills add https://github.com/vanducng/skills --skill browser-trace
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-trace
Source: https://github.com/vanducng/skills/tree/main/skills/browser-trace
Command: npx skills add https://github.com/vanducng/skills --skill browser-trace

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Debugging browser automation runs can be challenging due to intermittent CDP events, hidden network/console activity, and DOM state. Browser Trace provides a non-intrusive, read-only trace that records the entire DevTools protocol stream alongside periodic screenshots and DOM dumps, so you can inspect what happened at any moment.

Core Features & Use Cases

  • Attach a second, read-only CDP client to a live browser session to capture a complete firehose of events (Network, Console, Runtime, Page, Log) without altering the main automation.
  • Automatically generate per-page buckets with per-page raw events, plus page-level summaries, screenshots, and DOM snapshots for targeted debugging across navigations.
  • Reproduce production issues, audit activity, or attach traces to in-progress sessions to build post-mortem analyses and improve agent learning loops.

Quick Start

Start a trace against a local Chrome session and capture the firehose with per-page snapshots for debugging.

Frequently Asked Questions about browser-trace

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture a DevTools Protocol trace from a running browser automation session?▼

You can capture a DevTools Protocol trace by attaching a second, read-only CDP client to your live browser session to record the firehose of Network, Console, Runtime, Page, and Log events without altering the main automation.

How do I debug intermittent browser automation failures across page navigations?▼

To debug intermittent failures across navigations, you can slice the DevTools Protocol trace into per-page buckets containing raw events, page-level summaries, screenshots, and DOM snapshots for targeted inspection.

Does browser-trace support remote debugging sessions with Browserbase?▼

Yes, browser-trace optionally supports Browserbase to attach its read-only CDP client and capture event firehoses from remote browser sessions for post-mortem analysis.

What is the best way to record DOM state and screenshots during a headless browser run?▼

The best way to record DOM state and screenshots is to attach a read-only browser trace that automatically generates per-page DOM dumps and periodic screenshots alongside the DevTools Protocol event stream.

Do I need Node 18 to use browser-trace for capturing CDP events?▼

Yes, you need Node 18 or higher along with the browse CLI with CDP support to run browser-trace and capture the DevTools Protocol firehose into NDJSON files.

Why does my browser automation run lack visibility into hidden network and console activity?▼

Your automation lacks visibility because it does not capture the complete DevTools Protocol stream; attaching a read-only browser trace records all hidden network and console activity for post-mortem inspection.

Related Skills

Explore More Software Engineering Skills→
vanducngvanducng
5

browser

Automate browser interactions and data extraction using the browse CLI.

Community
Advanced
paleoterrapaleoterra
2

crash-log-analyzer

Parse macOS crash logs to identify crash causes and debugging information.

Community
Intermediate
badlogicbadlogic
2.3k

browser-tools

Automate Chrome browser control and content extraction via the Chrome DevTools Protocol.

Community
Advanced
CygnusfearCygnusfear
5

chrome-devtools

Control Chrome DevTools Protocol to automate browser interactions and capture console, network, and screenshots.

Community
Advanced