Debug Browser Traces

Use this skill to turn browser trace artifacts into a causal narrative, not a raw event dump.

Workflow

1. Collect every artifact the user named: trace JSON, HAR, screenshots, DOM snapshots, console logs, and before/after captures. If only a trace is available, continue and mark missing visual or semantic evidence explicitly.

2. Run the analyzer before reading large trace files manually:

node <skill-dir>/scripts/analyze-browser-trace.mjs <trace-or-har.json> [more files]

Use --focus <regex> for app terms such as route names, endpoint names, library ids, page numbers, or component names. Use --screenshots-dir <dir> when the trace has embedded Chromium screenshots and the visual state matters.

Completion criterion: the analyzer output names the detected format, timing confidence, visual evidence, network order, and top anomalies for each artifact.

3. Build the timeline around user-visible phases: navigation or route switch, user input, request dispatch, response completion, render/paint/screenshot, and console errors. Prefer relative times from the analyzer. When timestamps are missing or not comparable, say the ordering is record-order only.