skills.vishalvoidskills/vishalvoid
Technical & DevelopmentAdvanced

browser-trace

Capture and analyze Chrome DevTools performance traces.

Developer Setup

Setup & Installation

bash
npx skills add https://github.com/browserbase/skills --skill browser-trace

Overview

What This Skill Does

Captures full CDP performance traces to analyze rendering, execution speeds, and network request bottlenecks.

Application

When to use this Skill

Documentation

Show Skills.md file

Browser Trace

Attach a second, read-only CDP client to a browser session that is already being driven by your main automation. The trace records the full DevTools firehose to NDJSON, polls for screenshots and DOM dumps in parallel, and slices everything into a directory tree that bash tools can search.

This skill does not drive pages — it only listens. Pair it with the browser skill, browse, Stagehand, Playwright, or anything else that speaks CDP.

When to use

  • The user wants to debug a browser-automation run (failing form, missing element, hung navigation, JS exception).
  • The user has a running automation and wants to attach a trace mid-flight without restarting it.
  • The user wants to split a CDP firehose into network / console / DOM / page buckets.
  • The user wants screenshots + DOM snapshots over time, joined to CDP events by timestamp.

If the user just wants to drive the browser, use the browser skill instead.

Setup check

node --version                                  # require Node 18+
which browse || npm install -g browse
which jq     || true                                # optional — used only for ad-hoc querying

Verify browse cdp exists:

Lines 1 - 25 of 243

Recommendations

Explore other random skills

All skillsMy patterns