强大的可视化利器 Chrome Trace Viewer 使用详解

2024-06-05 09:38

本文主要是介绍强大的可视化利器 Chrome Trace Viewer 使用详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

image|690x398

最近研究了下 Chrome 自带的 Trace Viewer,发现功能还挺强大的,用来做 Performance Profile,Timeline Tracing 等很方便,但官方的使用文档比较晦涩,资料也比较匮乏和分散,就专门整理了下。

注:Trace Viewer 其实可以脱离 chrome://tracing 在线使用,具体操作后面会讲到

Trace Viewer 介绍

Trace-Viewer is the javascript frontend for Chrome about:tracing and Android systrace. 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

Untitled 4 (3)|635x500

不过 Google 目前正在开发另一套工具 perfetto 打算替换 Trace Viewer,我初步使用了下,感觉不如 Trace Viewer 简洁。

在开源项目中的使用

Golang 用它来可视化展示执行过程 https://golang.org/cmd/trace/

go test -trace trace.out pkg
go tool trace trace.out

tracer-lock|690x284

Facebook 的 Buck Build 系统,用它来展示 Build 时发生了什么

buck_chrome_sample|619x500

从这两个项目可以看出来 Trace Viewer 对于呈现「某段时间发生了什么」 还是有过人之处。

Trace Viewer Format

Trace Viewer 有一套自己的 Trace Event Format,只要文件遵循这个格式,就可以被展示。比如:

image|690x62

对应的 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 能不能也进行个性化定制以显得不那么突兀呢?比如将它改成「时间线」

image|690x70

这就要使用 MetaData Phase 了

{"name": "process_name", "ph": "M", "pid": "Main", "tid": "工作", "args": {"name": "时间线"}}

它的表示方式是将 ph 设为 M,然后将 name 设为 5 种可选值中的一种,比如 process_name 则表示要对进程名做一些定制。metadata 主要是用来为某一类 event 提供更多的信息,比如自定义名字或重新设置排序优先级。

有一些事件,它不是执行耗时,但包含了其他事件,比如「我的一天」,它不是一个可被执行的事件,但将一天做的事情包含进来。这些被称为「异步事件」,表现上就像这样:

image|690x85

独占一栏,同时使用了斜体字,如果仔细看,还会发现顶部多了一条黑色的线。异步事件的 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 来表示

Untitled 4|690x91

注意,在「出方案」和「写代码」之间多了一条线

  {"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}

Untitled 4 (1)|690x106

中间那根红线就是我们刚加的事件,选中之后会在底部出现该事件的详细信息。

作为一个上进的青年,一天下来之后,需要留一段时间反思今天做的好的和不好的,这可以通过 Snapshot 来体现,就像这样

image|690x146

右上角那个圆点就是 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><scriptsrc="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);elseonResultFail(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 是一款强大的可视化利器,虽然通常被拿来做性能分析,但它的使用场景其实很广,至于能做出什么来,就看你的想象力咯。

这篇关于强大的可视化利器 Chrome Trace Viewer 使用详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1032723

相关文章

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的