weex-analyzer-android

More: Author   ReportBugs   
Tags:

Download GitHub release GitHub release

Weex Analyzer是一款运行在手机客户端上辅助开发者进行weex 开发的小工具。 接入此工具后,开发者可以在 debug 包中通过摇一摇打开功能选项。目前实现的功能有:

  1. log 日志查看,支持日志分级、搜索
  2. weex 性能分析(查看当前 weex 页面性能指标/以图表方式展示历史性能指标变化趋势)
  3. weex storage 查看、删除
  4. 实时帧率、丢帧数、内存占用悬浮框
  5. 流量监控
  6. cpu/内存/fps 实时折线图
  7. 页面 3d 视图
  8. js 报错实时通知
  9. 远程调试 js。(依赖weex dev tool)
  10. 渲染性能分析(如自动分析页面嵌套层级,深层嵌套高亮透出);
  11. 视图审查(点击查看任意元素样式)

接入

添加依赖

debugCompile 'com.taobao.android:weex_analyzer:${latest version}'

代码集成

具体请参考commonsmodule 下WXAnalyzerDelegateAbstractWeexActivity.

使用手册

1. 功能开启
  • 前置条件: a. 已集成 weex_analyzer,并初始化. b. 设备已开启传感器相关权限(模拟器不用)
  • 真机: 进入 weex 页面,"摇一摇".
  • 模拟器: 进入 weex 页面,使用快捷键"cmd+M"(即 menu 键). 如果使用 genomotion 模拟器,需要查看首页是否能看到 menu 标识,如果没有,需要手动打开。仍然不行的话可以尝试 adb 命令adb shell input keyevent KEYCODE_MENU

功能开启

2. weex 性能指标

每一个 weex 页面都有若干性能相关的指标,比如首屏渲染时间、js 下载时间、sdk 初始化时间等,这些指标对用户体验有着直接的影响,因而我们很有必要去关注它们。weex-analyzer提供了图形化的方式观测这些指标。 打开【weex 性能指标】选项,【current performance】用于观察这一次页面打开过程中的性能指标,【history performance】记录最近若干次(max=6)打开此页面的指标变化趋势。

weex 性能指标 1

weex 性能指标 2

3. 内存

每一个 weex 页面最终都会被渲染成native view,与传统 android 应用一样,weex 页面也会出现内存泄露、内存抖动、oom 等问题。因而我们也需要关注内存变化趋势。打开【内存】选项,即可看到当前 app实时内存变化趋势(与 android studio memory monitor类似)。默认每秒采样一次。

性能指标

4. cpu

与【内存】选项类似,【cpu】选项中可以实时显示 cpu 使用率。这里的 cpu 取值为当前 app CPU 在 user mode 与 kernel mode 下的使用率之和。

5. fps

与【内存】选项类似,【fps】选项中可以实时显示 fps 值。

6. weex storage

可以实时查看weex storage存储状态。单击可以查看 value 详情,长按可以删除 k-v。

storage

7. 3d 视图

以 3d 形式展示当前 weex 视图状态,可拖拽、缩放。

3d 视图

8. 日志

类似 android logcat. 实时展示开发日志。支持日志分级、搜索。另外提供了默认的过滤关键字,比如js logcallNative等。

日志以悬浮窗形式展示,可拖拽,可调整大小。

日志

9. js 远程调试

首先需要集成weex dev tool

操作步骤:

  1. 命令行下输入weex debug,打开调试服务器(会在浏览器上打开一个页面)。
  2. 打开【js 远程调试】选项(首次打开需要输入 server 端 ip),即可自动连接到调试服务器。
  3. 若服务端 ip 发生变化,可进入【配置】页面输入新的 ip 地址。

此功能方便没有集成【扫一扫】功能的 app,或者是无法使用【扫一扫】的场景(如模拟器)。

10. 渲染性能分析

点击【渲染性能分析】按钮,即可开启。

注:

  1. 支持同时展示 native 层级与 vdom 层级,对于 vdom 层级超过 14 层的,会自动高亮透出;
  2. 支持检查页面是否存在 list/scroller,预估屏数等;

渲染性能分析

11. 视图审查

点击任意元素,查看其视觉样式。

视图审查

Support Me
Apps
About Me
Google+: Trinea trinea
GitHub: Trinea