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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351