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

墨春

关注

阅读 112

2021-10-04

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

Dart 代码检查工具 Dart Analysis

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


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



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



修复后该问题自动消失

Flutter 界面调试工具 Flutter Inspector

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


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

标识控件

显示布局边界

显示帧数

显示文本对齐线

放慢动画速度

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


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

重中之重 Observatory 性能调试工具

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

打包过程


执行 flutter run --release


他给我报了一个 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

重新打包后成功



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

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

打开链接显示


说一下这里的属性

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 进入到详情页面


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

class hierarchy

APP 类的层次结构

cpu profile

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



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

cpu profile (table)

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


allocation profile

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


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

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

heap snapshot

堆快照


heap map

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

它以颜色显示内存块。 每个内存页面(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

精彩评论(0)

0 0 举报