# Browser-Trace：浏览器可观测性工具技能

- 来源：meng shao (@shao__meng)
- 发布时间：2026-04-29 09:50
- AIHOT 分数：67
- AIHOT 链接：https://aihot.virxact.com/items/cmojf5wbv03sbslzpgrz2hfd9
- 原文链接：https://x.com/shao__meng/status/2049305218731622408

## AI 摘要

Browser-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/… 等树状结构，便于按导航切片分析。

适用场景
· 自动化失败/卡住/选不到元素/JS 异常需要事后还原。
· 希望在不重启的前提下，对已运行中的会话中途挂上 trace。
· 需要把网络、控制台、DOM/页面、截图用时间戳对齐，做因果推断。

实践上最重要的约束
· 采样间隔不宜过密（建议别快于约 1s，默认 2s 较稳）：每次采样都是额外 CDP/截图成本。
· 需要 DOM 域的细粒度树变更 可扩展 O11Y_DOMAINS 加 DOM，但会很吵。
· 跑完即使用户代码崩了，也应 stop-capture.mjs，避免僵尸进程与缺失 stopped_at。
· bisect 对同一 run 可反复跑（幂等覆盖分桶结果）。
· 远程自动化应用 browse --connect <session> 对同一会话，不要每次 browse env remote 新开 session。

### 引用推文

> derek：Introducing the /browser-trace skill, Give your agent 100% observability into its browser: dump network requests, DOM content, screenshots, and CDP logs into a ...