Flutter 优化开发调试

Flutter 优化开发调试

内存分析

记录之前学习在VScode中使用DevToos分析flutter应用内存
首先在IDE上下载Flutter插件,具体可参考文档
因为在VSCode中运行且分析内存需要 profile model才能获取与release环境相同的内存使用量,所以还需要配置launch.json文件

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "huawei",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile",
            "args": [
                "--dart-define",
                "APP_CHANNEL=huawei",
            ]
        }
    ]
}

接下来开始在运行调试下运行,运行成功后再进入vscode左边菜单栏中选择flutter插件找到dev tools 选择memory即可看到内存使用情况

内存统计信息的时间序列图呈现了 Dart 或 Flutter 堆以及 Dart 或 Flutter 的本机内存随时间的变化状态。
如右侧logger可查看对应说明：捕获使用情况、容量、外部、垃圾收集和驻留集大小
x轴是事件的时间轴,y 轴上绘制的数据都带有数据收集时的时间戳
y轴上绘制的数量如下：
Dart/Flutter: 堆中的对象（Dart 和 Flutter 对象）
Dart/Flutter Native: 不在 Dart/Flutter 堆中但仍属于总内存占用一部分的内存。此内存中的对象将是Native对象
Allocated: 堆的当前容量通常略大于所有堆对象的总大小。
RSS: 常驻集大小显示进程的内存量。它不包括换出的内存。它包括已加载的共享库的内存以及所有堆栈和堆内存

接着获取堆快照分析并查看,在删除图标的坐标图标可点击take heap snapshot

这样就可以继续并点击内存概览图，则会显示该特定时刻的内存使用情况详细信息并在下方导出信息
使用内存视图能够检测到内存堆中导致内存泄漏的未使用对象,当然也可以结合原生工具分析内存

调试分析

有时我们可能无法快速定位异常错误,可以使用断点调试进行条件断点和全局断点
如下在左侧点击并右键编辑条件判断：

全局断点可根据需要打开

断点也只是辅助调试之一,更快速的还是结合日志分层级输出更直观

布局分析

Flutter 提供的热重载机制，已经极大地缩短了从代码编写到界面运行所耗费的时间，可以更快地发现代码与目标界面的明显问题，同时也提供更快地发现界面中更为细小的问题，比如对齐、边距等，可以使用 Debug Painting 这个界面调试工具。
Debug Painting 能够以辅助线的方式，清晰展示每个控件元素的布局边界，因此我们可以根据辅助线快速找出布局出问题的地方。而 Debug Painting 的开启也比较简单，只需要将 debugPaintSizeEnabled 变量置为 true 即可

import 'package:flutter/rendering.dart';
 
void main() {
  debugPaintSizeEnabled = true;      // 打开 Debug Painting 调试开关
  runApp(new MyApp());
}

最后还可以结合Flutter Inspector 查看Widget树结构关系是否正确,这个对初学者理解布局会有很大帮助
分析问题的方法有很多种结合需求选择最合理的才是最有效的。