背景：
前面在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
更多framework技术干货，请关注下面“千里马学框架”