强大的可视化利器 Chrome Trace Viewer 使用详解
强大的可视化利器 Chrome Trace Viewer 使用详解
最近研究了下 Chrome 自带的 Trace Viewer,发现功能还挺强大的,用来做 Performance Profile,Timeline Tracing 等很方便,但官方的使用文档比较晦涩,资料也比较匮乏和分散,就专门整理了下。
注:Trace Viewer 其实可以脱离
chrome://tracing
在线使用,具体操作后面会讲到
Trace Viewer 介绍
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 Format
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
有点像,但有几点不同:
- 不需要带上 cat
- 同一个 Flow Event,除了 id 相同外,名字也必须相同
- 结束时用
"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": "时间线"}} ]
在线使用 Trace Viewer
通过 chrome://tracing
的方式来使用 Tracer Viewer 还是不太方便,也不利于传播,Google 虽然在 catapult 里提供了 trace2html
,但包含的文件很多,使用起来还是有点麻烦,于是参考了 go trace
的源码,把相关文件上传到了 CDN,然后在一个 html 文件里引用,这样只需一个文件即可。
<!DOCTYPE html> <!-- Copyright (c) 2014 The Chromium Authors. All rights reserved. Use of this source code is governed by a BSD-style license that can be found in the LICENSE file. --> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> body { font-family: arial, sans-serif; } </style> <script src="https://sf1-ttcdn-tos.pstatp.com/obj/developer-baas/baas/ttnbrzs5vgcryya2z2/7d1b75402231d1cd_1583755520315.js"></script> <script> 'use strict'; window.__hideTraceViewerPolyfillWarning = true; function onTraceViewerImportFail() { document.addEventListener('DOMContentLoaded', function () { document.body.textContent = 'tracing/bin/trace_viewer_full.html is missing. ' + 'Run vulcanize_trace_viewer from $TRACE_VIEWER and reload.'; }); } </script> <link rel="import" href="https://sf1-ttcdn-tos.pstatp.com/obj/developer-baas/baas/ttnbrzs5vgcryya2z2/4b94a178762f4049_1583756222365.html" onerror="onTraceViewerImportFail(event)"> <style> html, body { box-sizing: border-box; overflow: hidden; margin: 0px; padding: 0; width: 100%; height: 100%; } #trace-viewer { width: 100%; height: 100%; } #trace-viewer:focus { outline: none; } </style> <script> 'use strict'; (function () { var viewer; var url; var model; function load() { var req = new XMLHttpRequest(); var isBinary = /[.]gz$/.test(url) || /[.]zip$/.test(url); req.overrideMimeType('text/plain; charset=x-user-defined'); req.overrideMimeType('contentType: "application/x-www-form-urlencoded;charset=utf-8"'); console.log(url); req.open('GET', url, true); if (isBinary) req.responseType = 'arraybuffer'; req.onreadystatechange = function (event) { if (req.readyState !== 4) return; window.setTimeout(function () { if (req.status === 200) onResult(isBinary ? req.response : req.responseText); else onResultFail(req.status); }, 0); }; req.send(null); } function onResultFail(err) { var overlay = new tr.ui.b.Overlay(); overlay.textContent = err + ': ' + url + ' could not be loaded'; overlay.title = 'Failed to fetch data'; overlay.visible = true; } function onResult(result) { model = new tr.Model(); var i = new tr.importer.Import(model); var p = i.importTracesWithProgressDialog([result]); p.then(onModelLoaded, onImportFail); } function onModelLoaded() { viewer.model = model; var urlParams = new URLSearchParams(window.location.search); var title = urlParams.get("title") || ""; document.getElementById('title').innerHTML = title; } function onImportFail(err) { var overlay = new tr.ui.b.Overlay(); overlay.textContent = tr.b.normalizeException(err).message; overlay.title = 'Import error'; overlay.visible = true; } document.addEventListener('WebComponentsReady', function () { var container = document.createElement('track-view-container'); container.id = 'track_view_container'; viewer = document.createElement('tr-ui-timeline-view'); viewer.track_view_container = container; Polymer.dom(viewer).appendChild(container); viewer.id = 'trace-viewer'; viewer.globalMode = true; Polymer.dom(document.body).appendChild(viewer); var urlParams = new URLSearchParams(window.location.search); url = urlParams.get("tracing_url"); load(); }); }()); </script> </head> <body> </body> </html>
使用方式:http://path/to/this.html?tracing_url=path/to/tracing.json
踩过的坑
JSON 文件里,如果出现 AStart-BStart-AEnd-BEnd
这样的交叉式多行数据,有可能会导致解析失败。解决方法就是拆解为正常的顺序 AStart-AEnd-BStart-BEnd
。
还有,如果发现某个 Event 的 Start 和 End 明明在那里,但却还是报找不到 End 的话,通常是这个 End 被其他 Start 匹配了(即使名字不一样),所以 root cause 很可能是因为那个 solo Start。
小结
Trace Viewer 是一款强大的可视化利器,虽然通常被拿来做性能分析,但它的使用场景其实很广,至于能做出什么来,就看你的想象力咯。
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2018-08-30 【SFA官方翻译】使用 Kubernetes、Spring Boot 2.0 和 Docker 的微服务快速指南
2018-08-30 kafka为什么这么优秀!
2018-08-30 讲道理,为什么分布式一定要有Redis?
2018-08-30 String:字符串常量池
2018-08-30 如何设计出优秀的Restful API?