perfetto高阶使用：编译浏览器UI核心步骤简述： 1. 搞到 perfetto 工程的源码 2. 执行 tools

1678033445(1).png

参考学习文档

1、perfetto.dev/docs 文档：

perfetto.dev/docs/contri…

官网文档内容同我们项目的源码树下 external/perfetto/docs/contributing/build-instructions.md 有些许差异。

差异的原因，可能是我们的代码相对旧一些

这篇文档介绍了编译指令：

源码树下编译和独立编译 perfetto各种模块：比如 traced(trace服务端进程)， traced_probes(数据源进程，处理Ftrace, /proc, /sys)，perfetto(命令行客户端)，trace_processor_shell(trace解析)，traceconv(trace转换)

编译浏览器UI

2、源码树ui目录下的文档：

external/perfetto/ui/README.md

3、sonicman 的文章 虽然有参考，但是我用的步骤还是不大一样。

核心步骤简述

搞到 perfetto 工程的源码
- 需要带git仓库的源码，就是有 .git 文件目录
- 可以直接 git clone Google仓库的源码，或者把源码树下的代码复制到自己的Linux机器上(一定要带.git这个隐藏目录)，或者直接在源码树下开搞(本应是首选，但是公司原因各种限制不建议)
执行 tools/install-build-deps --ui
执行 ui/run-dev-server

当然，事情不会这么简单，详情见正文

正文

编译浏览器UI

一、首先看文档

官网文档给的编译步骤：

perfetto.dev/docs/contri…


# 1. 安装依赖
// 下载依赖到 ui/node_modules，尤其是 nodejs 可执行文件
// 时间不短，估计十几分钟
tools/install-build-deps --ui

# 2. 编译
// 默认会编译到 ./out/ui 目录，可以使用 --out path/ 参数改变输出目录
// 最终生成的包在 ./ui/out/dist/
// 编译脚本会创建一个 ./ui/out 到 $OUT_PATH/ui/ 的链接。不加 --out 参数就是链接到 ./out/ui
// 在自己低性能的虚拟机上编译了20分钟~。~
ui/build

# 3. 运行服务
// 这个命令会自动编译UI，不必手动运行 ui/build
// 文档中说，源码文件变更后，不必关闭网页服务，会自动编译，实时刷新到UI界面。但是推测proto配置文件变更应该不会刷新界面。
ui/run-dev-server

# 4. 打开地址查看结果
http://localhost:10000

源码树下 external/perfetto/ui/README.md 文档给出的步骤：

# 下载仓库代码
$ git clone https://android.googlesource.com/platform/external/perfetto/
$ cd perfetto
# 下载安装依赖
$ tools/install-build-deps --ui
$ tools/gn gen out/debug --args='is_debug=true'

## 这个命令的执行步骤没看明白
$ tools/ninja -C out/debug ui

# 运行服务
ui/run-dev-server
# 打开地址查看结果
http://localhost:10000

二、微信公众号 sonicman 给的步骤

执行 tools/install-build-deps --ui
执行 tools/gn args out/default
执行 tools/ninja -C out/default ui
执行 ui/run-dev-server out/default

三、自身实战的步骤

主要就执行了俩命令：

执行 tools/install-build-deps --ui
执行 ui/run-dev-server

由于我是在一穷二白的window上安装的Linux虚拟机编译的，导致我遇到了非常多的问题。估计是最全的问题集锦了。

1、几个前提条件

需要翻墙！！！需要自备梯子
需要Linux或者mac系统，window系统不行！！！

由于公司vm服务器安装翻墙软件不好搞，本人使用了window上安装的Linux虚拟机进行的编译

2、Linux虚拟机内实战过程

安装Ubuntu虚拟机
安装翻墙软件
如果没有git，安装git

sudo apt-get install git

配置git代理

git config --global http.proxy xxxxx比如：http://127.0.0.1:9910
git config --global https.proxy xxxx比如：https://127.0.0.1:9910

比如我的翻墙软件提供的代理地址为： 127.0.0.1:9910
配置如下：
git config --global http.proxy http://127.0.0.1:9910
git config --global https.proxy https://127.0.0.1:9910

如果没有安装curl，安装curl

sudo apt install curl

配置 curl 代理

## 我翻墙软件提供的代理地址为：127.0.0.1:9910
## 因此配置如下
export http_proxy=http://127.0.0.1:9910
export https_proxy=http://127.0.0.1:9910

如果没有安装gcc，安装gcc

sudo apt install gcc
搞到perfetto项目源码
- 建议直接复制我们自己vm服务器上 external/perfetto 的代码到自己的Linux机器上
  - 注意 .git 目录是隐藏文件，一定把这个目录也拷贝出来
    - 因为执行 tools/install-build-deps --ui 这个命令的时候，最后一步会使用git命令清除仓库
    - 没有 .git 目录居然会报错！！！然后命令中断，还不能接续！！！
- 或者直接使用Google git 仓库的代码： git clone android.googlesource.com/platform/ex…
  - Google仓库的代码和我们自己项目的代码有差别，我们自己的代码估计要旧一些
  - ui.perfetto.dev/ 这个界面是使用Google仓库代码生成的。因此使用自己源码树下的代码编译出来会有些许不一样
执行 tools/install-build-deps --ui
1. 这个过程，会先下载各种仓库到 buildtools 目录。各种各样的依赖库。比较重要的是下载 nodejs 到 buildtools/[OS平台名]/nodejs
2. 然后使用node的包管理工具npn安装node各种模块到目录 ui/node_modules
ui/run-dev-server
- 也可以先执行 ui/build 再执行 ui/run-dev-server
- 但是没必要啊，ui/run-dev-server 已经包含了 ui/build 命令
打开地址看结果 http://localhost:10000

四、报错处理

1、网络无法连接问题，安装翻墙软件；git仓库下载不动，配置git代理：

## 我翻墙软件提供的代理地址为：127.0.0.1:9910
## 因此配置如下
git config --global http.proxy http://127.0.0.1:9910
git config --global https.proxy https://127.0.0.1:9910

2、网络报错------代理断了，再重新执行一遍 tools/install-build-deps --ui

Initialized empty Git repository in /home/arthur/work/perfetto/buildtools/sqlite_src/.git/
fatal: unable to access 'https://chromium.googlesource.com/external/github.com/sqlite/sqlite.git/': gnutls_handshake() failed: The TLS connection was non-properly terminated.
Traceback (most recent call last):
  File "tools/install-build-deps", line 597, in <module>
    sys.exit(Main())
  File "tools/install-build-deps", line 511, in Main
    deps_updated |= CheckoutGitRepo(local_path, dep.source_url, dep.checksum,
  File "tools/install-build-deps", line 418, in CheckoutGitRepo
    subprocess.check_call(
  File "/usr/lib/python3.8/subprocess.py", line 364, in check_call
    raise CalledProcessError(retcode, cmd)
subprocess.CalledProcessError: Command '['git', 'fetch', '--quiet', '--depth', '1', 'https://chromium.googlesource.com/external/github.com/sqlite/sqlite.git', 'ee3686eb50c0e3dbb087c9a0976f7e37e1b014ae']' returned non-zero exit status 128.

3、tools/install-build-deps --ui 报错如下

INFO:root:Downloading /home/arthur/work/perfetto/buildtools/libbacktrace.zip from https://storage.googleapis.com/perfetto/libbacktrace-177940370e4a6b2509e92a0aaa9749184e64af43.zip
Traceback (most recent call last):
  File "tools/install-build-deps", line 597, in <module>
    sys.exit(Main())
  File "tools/install-build-deps", line 528, in Main
    DownloadURL(dep.source_url, download_path)
  File "tools/install-build-deps", line 337, in DownloadURL
    subprocess.check_call(['curl', '-L', '-#', '-o', out_file, url])
  File "/usr/lib/python3.8/subprocess.py", line 359, in check_call
    retcode = call(*popenargs, **kwargs)
  File "/usr/lib/python3.8/subprocess.py", line 340, in call
    with Popen(*popenargs, **kwargs) as p:
  File "/usr/lib/python3.8/subprocess.py", line 858, in __init__
    self._execute_child(args, executable, preexec_fn, close_fds,
  File "/usr/lib/python3.8/subprocess.py", line 1704, in _execute_child
    raise child_exception_type(errno_num, err_msg, err_filename)
FileNotFoundError: [Errno 2] No such file or directory: 'curl'

安装 curl sudo apt install curl

4、curl下载网络问题，配置curl代理

## 我翻墙软件提供的代理地址为：127.0.0.1:9910
## 因此配置如下
export http_proxy=http://127.0.0.1:9910
export https_proxy=http://127.0.0.1:9910

5、没有复制.git仓库文件到目录。重来！！

再执行一次 tools/install-build-deps --ui 继续执行下去了，但是，似乎缺少这一步之后的很多，比如npm ci in /home/arthur/work/perfetto-git/ui 步骤。

没办法，重头来吧。

INFO:root:Clearing /home/arthur/work/perfetto/ui/node_modules
fatal: not a git repository (or any of the parent directories): .git
Traceback (most recent call last):
  File "tools/install-build-deps", line 597, in <module>
    sys.exit(Main())
  File "tools/install-build-deps", line 576, in Main
    InstallNodeModules(force_clean=nodejs_updated)
  File "tools/install-build-deps", line 429, in InstallNodeModules
    subprocess.check_call(['git', 'clean', '-qxffd', node_modules],
  File "/usr/lib/python3.8/subprocess.py", line 364, in check_call
    raise CalledProcessError(retcode, cmd)
subprocess.CalledProcessError: Command '['git', 'clean', '-qxffd', '/home/arthur/work/perfetto/ui/node_modules']' returned non-zero exit status 128.

6、各种头文件找不到安装gcc sudo apt install gcc

buildtools/libcxx/include/__config:215:12: fatal error: 'features.h' file not found

buildtools/linux64/clang/lib/clang/16.0.0/include/inttypes.h:21:15: fatal error: 'inttypes.h' file not found

附

ui/build 编译命令分析

核心是使用 node.js 运行 external/perfetto/ui/build.js
- node.js 是个运行 js 脚本的容器。用于js开发
  - 这个东西需要下载各种依赖包，不翻墙，页不使用代理的话，会出现各种奇奇怪怪的bug，很恶心。
  - 通常使用淘宝代理
ui/build 是个 bash 脚本
- 这个脚本会去寻找 nodejs 的路径，Android源码树下没有自带，并且这个东西安装稍微费点时间
ui/build 脚本先去执行 ui/node，这个依然是个 bash 脚本。
ui/node 然后去执行 /tools/node
/tools/node 会去检查 nodejs 文件
- mac 检查 /buildtools/mac/nodejs 目录
- linux 检查 /buildtools/linux64/nodejs 目录
- 但是不检查 window 下的nodejs从代码上看，不支持 window 下编译
检查完后运行 /buildtools/XXX/nodejs/bin/node /ui/build.js 进行编译工作

运行结果

UI界面.png

附赠、取巧的离线使用 ui.perfetto.dev/ 办法

很简单，打开 ui.perfetto.dev/ ctrl + s 保存到磁盘就好了，然后用浏览器打开网页，直接用就可以了~。~

perfetto高阶使用：编译浏览器UI