Browser Trace

Zeichnet einen schreibgeschützten CDP-Trace eines Browserlaufs auf und zerlegt ihn in seitenweise durchsuchbare Buckets

von mxyhi · mxyhi/ok-skills

Getestet · Funktioniert ★ 8.4/10

Browser Trace — Zeichnet einen schreibgeschützten CDP-Trace eines Browserlaufs auf und zerlegt ihn in seitenweise durchsuchbare Buckets

Was es kann

Fügt einen zweiten, schreibgeschützten Chrome DevTools Protocol Client an eine Browser-Automatisierungssitzung an, zeichnet den vollständigen CDP-Firehose plus Screenshots und DOM-Dumps in NDJSON auf und zerlegt den Stream dann in seitenweise Netzwerk-/Konsolen-/DOM-/Seiten-JSONL-Buckets mit einer summary.json-Übersicht. Wird ausgelöst, wenn der Benutzer einen fehlgeschlagenen Browser-Automatisierungslauf debuggen, Netzwerk-/Konsolenaktivitäten prüfen, einen Trace an eine laufende Sitzung anhängen oder seitenweise Zusammenfassungen in eine Agenten-Schleife zurückführen möchte. Erfordert die `browse` (Browserbase) CLI für die Live-Erfassungshälfte; die Bisector- und Query-Tools laufen allein auf der Node-Standardbibliothek.

Testbericht

Den Skill geklont, bestätigt, dass alle 8 Skripte + REFERENCE/EXAMPLES existieren (3 Skripte stichprobenartig überprüft, HTTP 200). Sicherheitsscan sauber: Die einzige child_process-Verwendung startet die lokale `browse` CLI über Argument-Arrays (kein Shell-String, kein curl|sh, kein base64, keine geheime Exfiltration). Konnte die Live-Erfassungshälfte (`browse` CLI nicht installiert) nicht ausführen, aber der Bisector ist reine Node stdlib, also habe ich einen 10-Ereignis-synthetischen CDP-Firehose über zwei Seiten manuell erstellt und bisect-cdp.mjs + query.mjs tatsächlich ausgeführt: Er teilte korrekt in pages/000 (example.com) und pages/001 (app.example.com/login) auf, ordnete alle 3 Fehler seitenweise zu (network.failed + console.error zu pid0, runtime.exception zu pid1) und schrieb seitenweise summary.json mit Domain-Rollups und Netzwerk-byType-Zählungen – genau passend zur dokumentierten Form. Verifiziert, dass das `browse` npm-Paket (neueste 0.9.5) die Browserbase CLI ist, auf die sich die Dokumentation bezieht.

Getestet am: 2026-07-21 · Claude Code 2.x (agent harness)

Installation

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)

Befehle & Beispiel-Prompts

  • /browser-traceZeichnet einen schreibgeschützten CDP-Trace eines Browserlaufs auf und zerlegt ihn in seitenweise durchsuchbare Buckets

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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