强大的可视化利器 Chrome Trace Viewer 使用详解
内容提要
Trace Viewer 是 Chrome 的可视化分析工具，支持性能分析和时间线追踪。它能够处理特定格式的事件数据，提供丰富的可视化效果，并允许用户自定义事件的显示和分类，适用于多种场景。尽管 Google 正在开发新工具 perfetto，Trace Viewer 仍具独特优势。使用时需注意事件顺序和匹配问题。
延伸解读
事件格式的核心：ph 参数
Trace Viewer 依赖自定义的 Trace Event Format，其中 ph（phase）参数决定事件类型和可视化方式。最常用的是 B/E（开始/结束）或 X 加 dur（持续时间），用于绘制时间线。此外，M 用于元数据定制，I 表示瞬时事件，b/e 表示异步事件，s/f 表示流事件，O 表示快照。理解这些类型是生成有效 trace 文件的关键。
异步事件与流事件的特殊规则
异步事件（ph 为 b/e）需要提供 id 和 cat，用于标识和分组，在时间线上独占一栏并以斜体显示。流事件（ph 为 s/f）则不需要 cat，但要求 id 和名称相同，并通过时间戳匹配依附到已有事件上，结束时需指定 bp: e。这些规则确保了复杂事件关系的正确可视化。
常见解析问题与规避方法
使用 Trace Viewer 时，若 JSON 文件中出现交叉的 B/E 事件（如 AStart-BStart-AEnd-BEnd），可能导致解析失败，应拆解为顺序结构。另外，若事件找不到结束点，可能是被其他开始事件错误匹配，需检查是否有孤立的开始事件。注意事件顺序和匹配可避免大部分问题。
在线使用与简化部署
除了通过 chrome://tracing 使用，Trace Viewer 也可脱离 Chrome 在线运行。作者参考 go trace 源码，将相关文件上传至 CDN，并提供一个 HTML 文件，只需通过 URL 参数指定 trace 文件路径即可加载。这种方式简化了分享和部署，但需注意 CDN 资源的可用性。
Q&A
Trace Viewer 是什么？
Trace Viewer 是 Chrome 的可视化分析工具，支持性能分析和时间线追踪。
如何使用 Trace Viewer 进行性能分析？
可以通过 chrome://tracing 在线使用 Trace Viewer，或上传 JSON 文件到特定 HTML 页面进行可视化展示。
Trace Viewer 支持哪些事件格式？
Trace Viewer 支持特定的事件格式，包括事件名、时间戳、进程名和线程名等。
Trace Viewer 和 perfetto 有什么区别？
虽然 perfetto 是 Google 开发的新工具，但 Trace Viewer 在可视化和简洁性方面仍具独特优势。
使用 Trace Viewer 时需要注意什么？
使用时需注意事件的顺序和匹配问题，以避免解析错误。
如何自定义 Trace Viewer 中事件的显示？
可以通过设置 cname 参数和 MetaData Phase 来自定义事件的显示和分类。
