在Mac上构建和使用Winscope(附打包文件)

chengmax
401 阅读3分钟

在Mac上构建和使用Winscope(附打包文件)

打包产物 www.123912.com/s/rDdrVv-lm…

提取码:1234

Winscope是什么

Winscope是Android系统提供的一款强大的UI调试工具，主要用于分析Android设备的窗口管理器(WindowManager)、图层渲染(Surface Flinger)、输入事件、转场动画等系统级UI组件的运行状态。它能够帮助开发者和UI调试人员：

  • 可视化显示UI层级结构
  • 分析UI渲染性能问题
  • 检查窗口和视图属性
  • 排查动画和过渡效果的问题
  • 捕获并分析输入事件
  • 查看UI状态变化的时间线

对于从事Android系统UI和应用开发的工程师来说，Winscope是一个不可或缺的调试工具。

构建环境准备

前提条件

  1. Mac电脑
  2. Node.js环境（建议使用v16+）
  3. Python 3.10+
  4. Git
  5. 科学上网环境（访问Google源代码库）

下载源代码

需要clone以下几个仓库：

# 创建工作目录
mkdir -p ~/Documents/app/winscope
cd ~/Documents/app/winscope

# 克隆必要的仓库
git clone -b android15-qpr2-release https://android.googlesource.com/platform/frameworks/base frameworks/base --depth=1
git clone -b android15-qpr2-release https://android.googlesource.com/platform/development development --depth=1
git clone -b android15-qpr2-release https://android.googlesource.com/platform/external/perfetto external/perfetto --depth=1
git clone -b android15-qpr2-release https://android.googlesource.com/platform/frameworks/proto_logging frameworks/proto_logging --depth=1
git clone -b android15-qpr2-release https://android.googlesource.com/platform/frameworks/libs/systemui frameworks/libs/systemui --depth=1

编译过程

编译Winscope非常简单，只需要几个命令：

# 进入Winscope目录
cd development/tools/winscope

# 安装依赖
npm install

# 生产环境构建
npm run build:prod

构建过程可能需要几分钟时间，主要包括以下步骤：

  1. 安装Node.js依赖包
  2. 构建trace processor组件
  3. 编译Protocol Buffers定义
  4. 使用webpack打包前端资源
  5. 复制必要的资源文件到dist/prod目录

构建完成后，编译产物将位于dist/prod/目录下。

常见构建问题及解决方案

大小写敏感导致的警告

如果遇到类似以下警告：

WARNING in ./node_modules/three/src/Three.js
There are multiple modules with names that only differ in casing.

这是因为Mac默认的文件系统是大小写不敏感的，而项目中某些文件引用大小写不一致。解决方案是修改导入语句，确保使用正确的大小写形式。

如何使用Winscope

基本使用方法

  1. 启动应用：

    • 将构建好的dist/prod目录复制到任意位置
    • 用浏览器打开该目录中的index.html文件

  2. 分析本地追踪文件：

    • 在Winscope界面中，点击"Open Files"
    • 选择或拖放.winscope或.pb格式的追踪文件
    • 应用将自动解析并显示UI结构和时间线

  3. 从设备实时捕获追踪数据：

    • 确保设备已通过USB连接并已启用USB调试
    • 在终端运行：python3 winscope_proxy.py
    • 在Winscope界面中，点击"Record new trace"
    • 选择要捕获的数据类型，点击"Start Recording"

高级功能

  1. 时间线分析：

    • 使用时间轴查看特定时刻的UI状态
    • 通过播放控制查看UI随时间的变化

  2. 层级结构可视化：

    • 查看窗口和视图的层级关系
    • 检查各层属性（如位置、大小、透明度等）

  3. 性能分析：

    • 分析帧率和渲染时间
    • 查找卡顿和性能瓶颈

  4. 对比分析：

    • 比较不同时间点的UI状态差异
    • 发现状态变化和异常

跨平台使用

编译完成后，可以将构建产物复制到Windows或Linux系统上使用：

  1. 将dist/prod目录下的所有文件压缩
  2. 复制到目标系统并解压
  3. 使用浏览器打开index.html即可

结语

Winscope是Android系统调试中的得力助手，特别适合处理复杂的UI问题。通过本文的指导，您应该能够在Mac上成功构建和使用Winscope，帮助您更高效地进行Android UI开发和调试工作。

参考资源

avatar
文章
阅读
粉丝