Browser Trace

Enregistre une trace CDP en lecture seule d'une exécution de navigateur et la divise en buckets consultables par page

par mxyhi · mxyhi/ok-skills

Testé · Fonctionne ★ 8.4/10

Browser Trace — Enregistre une trace CDP en lecture seule d'une exécution de navigateur et la divise en buckets consultables par page

Ce que fait

Attache un second client Chrome DevTools Protocol en lecture seule à une session d'automatisation de navigateur, enregistre le flux CDP complet plus les captures d'écran et les dumps DOM en NDJSON, puis découpe le flux en buckets JSONL réseau/console/DOM/page par page avec une vue d'ensemble summary.json. Se déclenche lorsque l'utilisateur souhaite déboguer une exécution d'automatisation de navigateur échouée, auditer l'activité réseau/console, attacher une trace à une session en cours, ou réinjecter des résumés par page dans une boucle d'agent. Nécessite le CLI `browse` (Browserbase) pour la partie de capture en direct ; le bisecteur et les outils de requête fonctionnent uniquement sur la bibliothèque standard Node.

Rapport de test

Cloned la compétence, confirmé que les 8 scripts + REFERENCE/EXAMPLES existent (vérification ponctuelle de 3 scripts, HTTP 200). Analyse de sécurité propre : la seule utilisation de child_process lance le CLI `browse` local via des tableaux d'arguments (pas de chaîne de shell, pas de curl|sh, pas de base64, pas d'exfiltration de secrets). Impossible d'exécuter la partie de capture en direct (CLI `browse` non installé), mais le bisecteur est purement stdlib Node, j'ai donc construit manuellement un flux CDP synthétique de 10 événements sur deux pages et exécuté bisect-cdp.mjs + query.mjs pour de vrai : il a correctement divisé en pages/000 (example.com) et pages/001 (app.example.com/login), attribué les 3 échecs par page (network.failed + console.error à pid0, runtime.exception à pid1), et écrit un summary.json par page avec des regroupements de domaines et des comptes network byType — correspondant exactement à la forme documentée. Vérifié que le package npm `browse` (dernière version 0.9.5) est le CLI Browserbase que la documentation référence.

Testé le: 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)

Commandes et exemples de prompts

  • /browser-traceEnregistre une trace CDP en lecture seule d'une exécution de navigateur et la divise en buckets consultables par page

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

  • 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