android 14版本的winscope编译使用-手把手教你编译成功不报错

背景：

前面在wms相关课程讲解闪黑，黑屏等分析时候，有详细讲解winscope使用方法
https://blog.csdn.net/learnframework/article/details/129432374
但是因为aosp14上面使用的winscope这部内方法前后的差异较大具体有啥差异呢？

原来是在prebuilts/misc/common/winscope/目录下就有winscope.html

但是新版本可以看看prebuilts/misc/common/winscope/根本没有自带的winscope.html

这个一瞬间搞得大家就有点懵了，不知道该怎么办，winscope.html都没有那还怎么分析相关问题。
还会在google的官网上也有介绍winscope相关详细介绍，具体的路径如下：
https://source.android.google.cn/docs/core/graphics/tracing-win-transitions?hl=zh-cn

官方建议方法：

自己去下载一套源码，然后执行上面的命令就可以了，这样npm就帮我们把相关的html编译出来了，然后在chrome浏览器启动winscope界面：

抓取winscope后展示炫酷的画面

但我们自己跟着去实战的时候就发现根本编译不过，编译不过主要有以下这些错误
编译版本android-14.0.0_r15

1、npm install 无法安装相关的库
这里npm安装库时候需要下载很多国外的库，这部分下载不下载了，会有很多的报错，这类的报错说实话还是因为国内网络引起的，所以这里可能很多朋友会考虑使用阿里源等方法
2、npm run build:prod 编译时候也有一堆的报错
第一部分install成功后，以为肯定后面都一切顺利了，但是真正在build时候发现很多类似如下的错误：

ERROR in ./src/trace/flickerlib/common.js 21:27-95
Module not found: Error: Can't resolve 'flicker'

可以看到报出很多Module not found: Error: Can’t resolve ‘flicker’,Module not found： Can’t resolve 'fs’或者是Module not found： Can’t resolve 'path’等错误，各自缺少库啥的错误，这类问题就是将所以粉丝们卡住的关键啦，这类靠百度一个个改基本不可能哈，还有我们做android的对这块npm报错其实不是那么擅长，修改确实只靠百度。

上面就是粉丝朋友们还有我自己尝试编译winscope的一些问题，很多人就此放弃，认为编译不过。

成功编译通过方法

上面编译不过，其实主要还是一些环境版本的原因，下面我给出一套我这边编译通过的环境过程和版本号。

aosp版本 android-14.0.0_r21 android-14.0.0_r15 （验证过都可以）
其实可以不需要整套aosp代码也可以编译，可以只需要winscope编译依赖的相关仓库既可以

repo init -u https://mirrors.tuna.tsinghua.edu.cn/git/AOSP/platform/manifest -b android-14.0.0_r21

repo sync prebuilts/misc development frameworks/base frameworks/native frameworks/proto_logging frameworks/libs/systemui platform_testing external/protobuf

上面就只repo了几个aosp的目录，当然有源码环境就更好啦，下面开始进入winscope的源码目录开始编译啦

cd development/tools/winscope/

接下来有2种方法都可以实现对winscope的编译

不需要科学上网方法

1、安装nodes，npm，及安装相关依赖
直接默认Ubuntu进行安装

sudo apt-get install nodejs npm

安装后node和npm版本如下

node -v  
v10.19.0
 npm -v
6.14.4

安装npm后就需要执行第一步 npm install
但是这个时候要考虑使用国内镜像，镜像设置方法

npm config set registry https://registry.npmmirror.com

再执行 npm install
显示和上面有166个packages打印就说明没问题。

2、进行npm编译
编译命令如下：

npm run build:all

注意这里和官方有点不一样，使用all，不然可能会报错少依赖
编译成功会显示和上图一样输出，这个时候就可以在dist/prod看到编译的html了
development/tools/winscope/dist/prod

3、运行winscope网页
npm run start
发现这里会报错，所以没办法用这个方法直接start，但是第二步已经编译了相关html，具体路径如下：
development/tools/winscope/dist/prod

可以直接使用Chrome打开

注意这里chrome的版本号：

可以科学上网方法

1、下载安装好node,npm相关
这里不采用系统apt安装node
sudo apt-get remove --purge nodejs npm
进行卸载
采用nvm安装

curl -o- https://githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
source ~/.bashrc 
nvm install node

node,npm版本

test@test:~$ node -v
v22.7.0
test@test:~$ npm -v
10.8.2
test@test:~$ 

2、开始编译
npm install
执行后显示如下图所示结果，即代表成果安装

npm run build:all //注意这里输入all

如果有打印successful就代表成功，那就就可以正常进入下一步运行了
npm run start

chrome浏览器版本（这个关键）

ubuntu系统 64位 20.04（不是那么关键）

最简单方案：

直接使用编译好的html使用，下载链接
https://share.weiyun.com/uJ0lPsyE
直接使用里面的index.html

投屏专题部分：
https://mp.weixin.qq.com/s/IGm6VHMiAOPejC_H3N_SNg

更多framework详细代码和资料参考如下链接

hal+perfetto+surfaceflinger

https://mp.weixin.qq.com/s/LbVLnu1udqExHVKxd74ILg

其他课程七件套专题：
点击这里
https://mp.weixin.qq.com/s/Qv8zjgQ0CkalKmvi8tMGaw

视频试看：
https://www.bilibili.com/video/BV1wc41117L4/

参考相关链接：
https://blog.csdn.net/zhimokf/article/details/137958615

更多framework假威风耗：androidframework007