最近研究了下 Chrome 自带的 Trace Viewer,发现功能还挺强大的,用来做 Performance Profile,Timeline Tracing 等很方便,但官方的使用文档比较晦涩,资料也比较匮乏和分散,就专门整理了下。
注:Trace Viewer 其实可以脱离
chrome://tracing
在线使用,具体操作后面会讲到
Trace-Viewer is the javascript frontend for Chrome
about:tracing
and Androidsystrace
. providing rich analysis and visualization capabilities for trace files, supporting both the linux kernel trace format and Chrome’s base/trace_event.
它是一个强大的可视化展示和分析工具,之前 google 有一个专门的 trace-viewer 项目,现在该项目合并到了 catapult 中, catapult 是 Chromium 工程师开发的一系列性能工具的合集,可以用来收集、展示、分析 Chrome、Website 甚至 Android 的性能。
catapult 源码里包含了很多 test case,git clone 下来后,运行 $CATAPULT/bin/run_dev_server
. 然后在浏览器中打开 http://localhost:8003/tracing_examples/trace_viewer.html
能看到很多 Demo
不过 Google 目前正在开发另一套工具 perfetto 打算替换 Trace Viewer,我初步使用了下,感觉不如 Trace Viewer 简洁。
Golang 用它来可视化展示执行过程 https://golang.org/cmd/trace/
go test -trace trace.out pkg
go tool trace trace.out
Facebook 的 Buck Build 系统,用它来展示 Build 时发生了什么
从这两个项目可以看出来 Trace Viewer 对于呈现「某段时间发生了什么」 还是有过人之处。
Trace Viewer 有一套自己的 Trace Event Format,只要文件遵循这个格式,就可以被展示。比如:
对应的 json 文件内容:
[ {"name": "出方案", "ph": "B", "pid": "Main", "tid": "工作", "ts": 0},
{"name": "出方案", "ph": "E", "pid": "Main", "tid": "工作", "ts": 28800000000},
{"name": "看电影", "ph": "B", "pid": "Main", "tid": "休闲", "ts": 28800000000},
{"name": "看电影", "ph": "E", "pid": "Main", "tid": "休闲", "ts": 32400000000},
{"name": "写代码", "ph": "B", "pid": "Main", "tid": "工作", "ts": 32400000000},
{"name": "写代码", "ph": "E", "pid": "Main", "tid": "工作", "ts": 36000000000},
{"name": "遛狗", "ph": "B", "pid": "Main", "tid": "休闲", "ts": 36000000000},
{"name": "遛狗", "ph": "E", "pid": "Main", "tid": "休闲", "ts": 37800000000}
]
每一个 Event 主要由以下几部分组成:
{
"name": "myName", // 事件名,会展示在 timeline 上
"cat": "category,list", // 事件分类,类似 Tag,但 UI 上不支持选择 Tag
"ph": "B", // phase,后面着重会讲到
"ts": 12345, // 事件发生时的时间戳,以微秒表示
"pid": 123, // 进程名
"tid": 456, // 线程名
"args": { // 额外参数,当选中某个 event 后,会在底部的面板展示
"someArg": 1,
"anotherArg": {
"value": "my value"
}
}
}
其中最重要的是 ph
,最常用的组合是 B
和 E
,分别表示 Begin
和 End
,有了这两个信息,Trace Viewer 就能在 timeline 上找到起止点,将它绘制出来。也可以简化为 X
,然后加上 dur
表示 duration
[ {"name": "出方案", "ph": "X", "pid": "Main", "tid": "工作", "ts": 0, "dur": 28800000000},
{"name": "看电影", "ph": "X", "pid": "Main", "tid": "休闲", "ts": 28800000000, "dur": 360000000},
{"name": "写代码", "ph": "X", "pid": "Main", "tid": "工作", "ts": 32400000000, "dur": 360000000},
{"name": "遛狗", "ph": "X", "pid": "Main", "tid": "休闲", "ts": 36000000000, "dur": 180000000},
]
但颜色看起来有点随机,能不能自定义呢,可以的,这时就要用到 cname
这个参数:
{"name": "出方案", "cname": "good", "ph": "X", "pid": "Main", "tid": "工作", "ts": 0, "dur": 28800000000},
将 cname
设置为 good
,视觉上会看到绿色,在这里有可选的 cname 列表(藏的真够深···)
左边的 Process Main
能不能也进行个性化定制以显得不那么突兀呢?比如将它改成「时间线」
这就要使用 MetaData Phase 了
{"name": "process_name", "ph": "M", "pid": "Main", "tid": "工作", "args": {"name": "时间线"}}
它的表示方式是将 ph
设为 M
,然后将 name
设为 5 种可选值中的一种,比如 process_name
则表示要对进程名做一些定制。metadata 主要是用来为某一类 event 提供更多的信息,比如自定义名字或重新设置排序优先级。
有一些事件,它不是执行耗时,但包含了其他事件,比如「我的一天」,它不是一个可被执行的事件,但将一天做的事情包含进来。这些被称为「异步事件」,表现上就像这样:
独占一栏,同时使用了斜体字,如果仔细看,还会发现顶部多了一条黑色的线。异步事件的 ph
为 b
和 e
也是 Begin 和 End,只不过变成了小写,同时还要提供 id
和 cat
[
{"name": "我的一天", "ph": "b", "cat": "daily", "id": "my-day", "pid": "Main", "tid": "工作", "ts": 0},
{"name": "我的一天", "ph": "e", "cat": "daily", "id": "my-day", "pid": "Main", "tid": "工作", "ts": 37800000000},
]
id 用来唯一标识两个异步事件是不是应该被作为同一个来看待(有可能多个异步事件名字都一样),cat 也是必选项,这个不太理解,可能等待的时间太孤独,需要一只猫来陪伴吧。
一件事可能会被拆分为更小的单元,然后执行过程中也会穿插着其他的事件,针对这样的场景,可以通过 Flow Event
来表示
注意,在「出方案」和「写代码」之间多了一条线
{"name": "出方案", "cname": "good","ph": "X", "pid": "Main", "tid": "工作", "ts": 0, "dur": 28800000000},
{"name": "connect", "ph": "s", "id": "my-work", "pid": "Main", "tid": "工作", "ts": 28800000000},
{"name": "connect", "ph": "f", "bp": "e", "id": "my-work", "pid": "Main", "tid": "工作", "ts": 32400000000},
{"name": "写代码", "ph": "X", "pid": "Main", "tid": "工作", "ts": 32400000000, "dur": 3600000000},
Flow Event
ph 的开始和结束分别为 s(start)
和 f(finish)
,跟 Async Event
有点像,但有几点不同:
"bp": "e"
来表示Flow Event 需要依附在已有的 Event 上,依附的过程其实就是 ts 匹配,相同/最近 ts 的 Event 会自动被匹配到。
出方案的过程中,可能会有纪念意义的事件需要记录下,比如想到了某个点子,这时可以用 ph: "I"
来表示(Instant)
{"name": "想到一个点子", "ph": "I", "pid": "Main", "tid": "工作", "ts": 18800000000}
中间那根红线就是我们刚加的事件,选中之后会在底部出现该事件的详细信息。
作为一个上进的青年,一天下来之后,需要留一段时间反思今天做的好的和不好的,这可以通过 Snapshot 来体现,就像这样
右上角那个圆点就是 Snapshot 在 Timeline 上的表现,点击之后可以在底部看到详细内容。
{"name": "反思", "ph": "O", "id": "Ref", "pid": "Main", "tid": "其他", "ts": 37800000000, "args": {"snapshot": "充实的一天呢"}}
Snapshot 的 ph 为 O
(字母 O),没有什么限制,详细的内容往 args.snapshot
里放就可以了。
这些差不多就是常用的 ph 了,部分 ph 会有附带的规则,再简单总结下:
ph B/E // 正常的开始/结束事件,最常见,也可以用 X + dur 来表示
ph M // Metadata 用来对一类 Event 附加更详细的信息,可以带来 UI 上的变化
ph I // 瞬时事件,类似 Mark 一下
ph s/e // 异步事件,表示自定义的一个事件,表现上跟正常事件会有区别
ph s/f // Flow 事件,会出现箭头,要通过 ts 匹配最近的 event,结束要使用 bp: e
ph O // Snapshot,表现上是一个醒目的圆点,可以在 `args.snapshot` 里放任意数据
以下是 Demo 对应的 Event 内容,只要能生成这样的 JSON 文件,就可以使用 Trace Viewer 强大的可视化能力。
[
{"name": "我的一天", "ph": "b", "cat": "daily", "id": "my-day", "pid": "Main", "tid": "工作", "ts": 0},
{"name": "我的一天1", "ph": "e", "cat": "daily", "id": "my-day", "pid": "Main", "tid": "工作", "ts": 37800000000},
{"name": "出方案", "cname": "good","ph": "X", "pid": "Main", "tid": "工作", "ts": 0, "dur": 28800000000},
{"name": "想到一个点子", "ph": "I", "pid": "Main", "tid": "工作", "ts": 18800000000},
{"name": "connect", "ph": "s", "id": "my-work", "pid": "Main", "tid": "工作", "ts": 28800000000},
{"name": "connect", "ph": "f", "bp": "e", "id": "my-work", "pid": "Main", "tid": "工作", "ts": 32400000000},
{"name": "写代码", "ph": "X", "pid": "Main", "tid": "工作", "ts": 32400000000, "dur": 3600000000},
{"name": "反思", "ph": "O", "id": "Ref", "pid": "Main", "tid": "其他", "ts": 37800000000, "args": {"snapshot": "充实的一天呢"}},
{"name": "看电影", "ph": "B", "pid": "Main", "tid": "休闲", "ts": 28800000000},
{"name": "看电影", "ph": "E", "pid": "Main", "tid": "休闲", "ts": 32400000000},
{"name": "遛狗", "ph": "X", "pid": "Main", "tid": "休闲", "ts": 36000000000, "dur": 1880000000},
{"name": "process_name", "ph": "M", "pid": "Main", "tid": "工作", "args": {"name": "时间线"}}
]
通过 chrome://tracing
的方式来使用 Tracer Viewer 还是不太方便,也不利于传播,Google 虽然在 catapult 里提供了 trace2html
,但包含的文件很多,使用起来还是有点麻烦,于是参考了 go trace
的源码,把相关文件上传到了 CDN,然后在一个 html 文件里引用,这样只需一个文件即可。