meng shao@shao__meng · XBrowser-Trace是Browserbase团队开发的浏览器可观测性工具，可在不干扰主自动化流程（如Playwright）的前提下，通过附加只读CDP客户端，将DevTools事件、网络请求、控制台日志、DOM快照和截图系统记录到文件系统。其核心机制包括实时记录CDP事件流、定时采样截图与HTML，以及事后按页面导航和事件类型对日志分桶切片，便于检索分析。该工具适用于自动化故障诊断、实时会话监控，以及需要将网络、DOM和截图按时间戳对齐进行因果推断的场景。使用中需注意采样间隔、进程管理等实践约束。
分享一个浏览器可观测性工具 Skill：browser-trace
来自 @browserbase 团队，在你已有主自动化（Playwright、Stagehand、browser skill、bb 等经 CDP 连上的会话）上，再挂一个只读 CDP 客户端，把 DevTools 事件、截图、DOM 快照成体系落盘，供事后用 jq/rg/脚本检索。 https://skills.sh/browserbase/skills/browser-trace
技术前提（为什么能「不打断主流程」） 同一个 Chrome DevTools 目标允许多个 CDP 客户端并行。主自动化是一个客户端发指令；这个 skill 的第二个客户端只开观测域（Network、Console、Runtime、Log、Page 等），不发送会改变页面的动作域命令，故与主驱动并存。
三块机制 · Firehose：browse cdp 把 CDP 全量流按行写成 NDJSON（cdp/raw.ndjson）。 · Sampler：定时用 browse --ws screenshot 与 browse --ws get html body（--ws 一次性、不抢常驻 daemon）拉截图与整页 HTML，与事件流并行。 · Bisector（跑完后）：bisect-cdp.mjs 扫一遍 raw.ndjson，按 CDP 方法分桶成多份 JSONL；并依顶层 Page.frameNavigated 按「页面段」再切，形成 pages/000/… 等树状结构，便于按导航切片分析。