Browser Trace

Neemt een read-only CDP-trace op van een browser-run en bisecteert deze in per-pagina doorzoekbare buckets.

Door mxyhi · mxyhi/ok-skills

Getest · Werkt ★ 8.4/10

Browser Trace — Neemt een read-only CDP-trace op van een browser-run en bisecteert deze in per-pagina doorzoekbare buckets.

Wat het doet

Koppelt een tweede, read-only Chrome DevTools Protocol client aan een browserautomatisatiesessie, neemt de volledige CDP-firehose plus screenshots en DOM-dumps op naar NDJSON, en snijdt vervolgens de stream in per-pagina network/console/DOM/page JSONL-buckets met een summary.json overzicht. Activeert wanneer de gebruiker een mislukte browser-automatisatierun wil debuggen, netwerk/console-activiteit wil auditeren, een trace wil koppelen aan een lopende sessie, of per-pagina samenvattingen wil terugvoeren naar een agent-loop. Vereist de `browse` (Browserbase) CLI voor de live-capture helft; de bisector en query tools draaien alleen op de Node standaardbibliotheek.

Testrapport

De skill gekloond, bevestigd dat alle 8 scripts + REFERENCE/EXAMPLES bestaan (3 scripts steekproefsgewijs gecontroleerd, HTTP 200). Beveiligingsscan schoon: het enige child_process-gebruik spawnt de lokale `browse` CLI via argument-arrays (geen shell-string, geen curl|sh, geen base64, geen geheime exfiltratie). Kon de live-capture helft niet uitvoeren (`browse` CLI niet geïnstalleerd), maar de bisector is pure Node stdlib, dus ik heb handmatig een 10-event synthetische CDP-firehose over twee pagina's gebouwd en bisect-cdp.mjs + query.mjs echt uitgevoerd: het splitste correct in pages/000 (example.com) en pages/001 (app.example.com/login), schreef alle 3 fouten toe per pagina (network.failed + console.error aan pid0, runtime.exception aan pid1), en schreef per-pagina summary.json met domein-rollups en netwerk byType-tellingen — precies overeenkomend met de gedocumenteerde vorm. Geverifieerd dat het `browse` npm-pakket (nieuwste 0.9.5) de Browserbase CLI is waarnaar de docs verwijzen.

Getest op: 2026-07-21 · Claude Code 2.x (agent harness)

Installatie

git clone --depth 1 https://github.com/mxyhi/ok-skills.git /tmp/browser-trace-src
mkdir -p ~/.claude/skills
cp -R /tmp/browser-trace-src/browser-trace ~/.claude/skills/browser-trace
# Live capture requires the Browserbase CLI: npm install -g browse (provides `browse cdp`)
# Local runs need Chrome launched with --remote-debugging-port=9222; remote runs need BROWSERBASE_API_KEY
# Optional: jq for ad-hoc querying of the bisected JSONL files
# The bisect-cdp.mjs / query.mjs analysis scripts need only Node 18+ (no npm install, no browse CLI)

Commando's en voorbeeldprompts

  • /browser-traceNeemt een read-only CDP-trace op van een browser-run en bisecteert deze in per-pagina doorzoekbare buckets.

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

  • Capture a trace of this failing browser run
  • Audit network and console activity from the last run
  • Attach a trace to my in-progress automation session