Browser Trace

Registra una traccia CDP di sola lettura di un'esecuzione del browser e la biseca in bucket ricercabili per pagina

di mxyhi · mxyhi/ok-skills

Promosso ★ 8.4/10

Browser Trace — Registra una traccia CDP di sola lettura di un'esecuzione del browser e la biseca in bucket ricercabili per pagina

Cosa fa

Allega un secondo client Chrome DevTools Protocol di sola lettura a una sessione di automazione del browser, registra l'intero flusso CDP più screenshot e dump DOM in NDJSON, quindi divide il flusso in bucket JSONL di rete/console/DOM/pagina per pagina con una panoramica summary.json. Si attiva quando l'utente vuole debuggare un'esecuzione di automazione del browser fallita, controllare l'attività di rete/console, allegare una traccia a una sessione in corso o alimentare riepiloghi per pagina in un ciclo agente. Richiede la CLI `browse` (Browserbase) per la metà di acquisizione live; gli strumenti di bisezione e query funzionano solo con la libreria standard di Node.

Rapporto di test

Clonato la skill, confermato che tutti gli 8 script + REFERENCE/EXAMPLES esistono (controllati a campione 3 script, HTTP 200). Scansione di sicurezza pulita: l'unico uso di child_process avvia la CLI `browse` locale tramite array di argomenti (nessuna stringa shell, nessun curl|sh, nessun base64, nessuna esfiltrazione di segreti). Non è stato possibile eseguire la metà di acquisizione live (CLI `browse` non installata), ma il bisector è puro Node stdlib, quindi ho costruito a mano un firehose CDP sintetico di 10 eventi su due pagine e ho eseguito bisect-cdp.mjs + query.mjs per davvero: ha diviso correttamente in pages/000 (example.com) e pages/001 (app.example.com/login), ha attribuito tutti e 3 i fallimenti per pagina (network.failed + console.error a pid0, runtime.exception a pid1), e ha scritto summary.json per pagina con rollup di dominio e conteggi network byType — corrispondendo esattamente alla forma documentata. Verificato che il pacchetto npm `browse` (ultima versione 0.9.5) è la CLI Browserbase che la documentazione referenzia.

Testato il: 2026-07-21 · Claude Code 2.x (agent harness)

Installazione

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)

Comandi e prompt di esempio

  • /browser-traceRegistra una traccia CDP di sola lettura di un'esecuzione del browser e la biseca in bucket ricercabili per pagina

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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