Flutter 学习之旅(二十三) Flutter 调试工具

一直学习控件看的直想吐,最近打算研究一下新奇的东西 调试工具

Dart 代码检查工具 Dart Analysis

由于本人使用的开发软件是android studio 4.0,只能以这个为例,
他所处的位置

image.png

打开Dart Analysis 他就会告诉你代码中可能发生的错误,
例子

image.png

他会告诉你是哪个文件的哪个地方代码有问题,图片中的错误就是 onPress 这个入参是必要的,但是我没有写,点击这个错误就能跳转到对应的文件,并且光标会在有问题的代码那里,
并且代码会有下划线标识出来

image.png

修复后该问题自动消失

Flutter 界面调试工具 Flutter Inspector

Flutter Inspector 只能在debug 模式下使用
Flutter Inspector 的位置在View -> Tool Windows -> Flutter Inspector
在android studio 中他经常会被默认放在右上角

image.png

Flutter Inspector 会很清晰的标识出布局嵌套的逻辑,并且可以队伍布局做一些操作,比如

标识控件

显示布局边界

显示帧数

显示文本对齐线

放慢动画速度

image.png

这种东西自己随便点一下就知道啥功能了,
我在最开始使用的时候他一直显示的是主页的代码,我找不到在哪里能替换成我想要看的页面的逻辑,自己研究了一番后总结了一下,首先打开你要调试的页面,点击刷新按钮不同页面的逻辑就会在上面显示出来了

image.png

总之Flutter Inspector 是一个非常好的布局调试工具,超赞

重中之重 Observatory 性能调试工具

说道性能调试工具就必须说道Flutter 的打包方式,平时run 的包都是debug包,
这种包因为开放了很多 asset 断言 拓展的服务功能 还有热重载之类的东西,对性能上有很大程度上的损失,在release 包下为了性能又把这些所有可能浪费性能的操作都屏蔽掉了,从网上看到这里自己先打一个release包试验一下,看一下是否会有性能上的提升,这里遇到了一个坑

打包过程

image.png

执行 flutter run --release

image.png

他给我报了一个 Could Not Resolve Io.Flutter:flutter_embedding_release 这个错误
解决方法
flutter\packages\flutter_tools\gradle 目录下
aar_init_script.gradle
resolve_dependencies.gradle
flutter.gradle
以上三个文件中将
https://storage.googleapis.com/download.flutter.io

替换为:
http://download.flutter.io

重新打包后成功

image.png

,拿起来试验了一下,确实会有一定的提升,但是这种模式没办法调试,

这里必须使用另一种打包方式 profile
执行打包命令
flutter run --profile
profile 模式是专门用来监控性能的,由于在debug模式下新能有确实,release模式又不能调试性能,

image.png

打开链接显示

image.png

说一下这里的属性

1.name ： 当前VM的名字

2.version ：Dart的版本，APP build的时间，运行在哪个平台上

3.embedder ：嵌入的平台

4.started at ：VM启动时的时间

5.uptime ：VM运行时长

6.refreshed at ：上次刷新时间

7.pid ： 进程ID

8.peak memory ：APP运行时用的峰值内存

9.current memory : APP当前用的内存

10.native zone memory ：native 原生内存

11.native heap memory ：native 堆内存

12.native heap allocatioon count ： native 堆对象数量

点击下方 isolate main 进入到详情页面

image.png

主要性能分析的地方我用箭头标注出来了

class hierarchy

APP 类的层次结构

cpu profile

cpu使用情况,一般都是系统的使用频率比较高或者比较浪费性能的方法,如果你的方法出现在顶部,就该好好查一下了

image.png

按照使用的大小,从上至下排列

cpu profile (table)

和上面那个一样,只不过是一个表格

image.png

allocation profile

查看isolate 的内存分配,他分为了新生代和老生代

image.png

新生代->新创建的对象,一般来说所占内存比较小,声明周期比较短,这里GC比较频繁
老生代->在GC下从新生代活下来的对象会被分配到老生代,他比新生代空间大,比较适合长时间保存数据

清楚了这些,我们可以手动点击屏幕右上角的GC 然后刷新一下,运行你所要调试的代码,再看一下内存情况,可以帮助我们排查内存的问题

heap snapshot

堆快照

image.png

heap map

将分配的内存显示为颜色块
heap map 面板能查看old generation中的内存状态

image.png

它以颜色显示内存块。 每个内存页面(page of memory)为256 KB，每页由水平黑线分隔。 像素的颜色表示对象的类ID - 例如，蓝色表示字符串，绿色表示双精度表。 可用空间为白色，指令（代码）为紫色。 如果启动垃圾收集（使用“分配配置文件”屏幕中的GC按钮），堆映射中将显示更多空白区域（可用空间）。
将光标悬停在上面时，顶部的状态栏显示有关光标下像素所代表的对象的信息。 显示的信息包括该对象的类型，大小和地址。
当你看到白色区域中有很多分散的其它颜色，说明存在内存碎片化，可能是内存泄露导致的。

本文中关于Observatory 的一些解释是从掘金上找到的,链接放在下面了,大家可以去看看,写的非常详细
https://juejin.im/post/6844903768989433864

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter