Flutter_UME功能介绍

2,541 阅读1分钟

「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

接下来几天会详细的介绍Flutter_UME的实现, 今天先简单来介绍一下项目背景和主要功能

UME是由字节跳动开发的应用内调试工具,主要为了解决在开发中离开IDE后调试难的问题,内部集成了丰富的调试小工具,设计UI、网络、监控、性能、logger等,另外还可以自定义工具,十分方便。

1.Widget信息展示

1.png

主要是通过ReaderObject和WidgetInspectorService中的getSelectedSummaryWidget来获取的

2.Widget层级展示

2.png

通过InspectorSelection获取currentElement, 然后获取整个build链

3.showCode

3.png

获取当前页面widget所属文件名,根据dart脚本的文件名来找到并读取脚本

4.内存查看

4.png

想要拿到VM内存就必须依赖DartVM,通过vm_service就可以拿到内存信息,并通过getAllocationProfile获取分配对象信息,通过members属性来获取到每个class所占用的堆信息

5.对齐标尺

5.gif

通过手势改变Positioned,吸附是通过globalKey获取当前页面的renderObject,然后获取所有子节点,经过计算得来的

6.颜色吸管

6.gif

放大图片是用BackdropFilter, 获取像素及颜色值是用RepaintBoundary然后获取编码过的Uint32色值,再经过转换得来的

7.网络调试

7.png

通过插装hook实现

8.Logger

8.png

这个也是通过hook实现

9.帧数检测

Simulator Screen Shot - iPhone 13 Pro - 2021-11-01 at 21.08.57.png

10.设备信息

Simulator Screen Shot - iPhone 13 Pro - 2021-11-01 at 21.10.04.png

11.CPU

目前只有安卓可以使用,先不介绍了