Flutter调试技巧总结——高效开发的秘密

14,253 阅读6分钟

刚开始学前端的时候看到大家都是用的console.log()作为调试的手段,也可以说,很多人只会用console.log()。在学习Flutter开发app的时候,我就在思考,除了使用print()来调试,Flutter还提供了哪些更为高效的调试方法呢?

非常不幸的是,我在开发自己的第一款Flutter App时,就几乎将所有可能遇到的错误类型都踩到了,这也让我意识到我需要对这部分知识做出总结,扩充自己的武器库,提升自己的开发效率。

为什么要总结调试技巧

  • 大部分开发人员调试的时候,都只懂得使用打印。这种方法虽然使用方便,但是只会这种方法不能在复杂的代码中高效debug,效率低下,容易打击开发人员的信心。
  • 工欲善其事,必先利其器。掌握强大的调试工具,是提高开发效率,提升开发体验,促进正向循环的关键保证。
  • 能够养成良好的开发习惯,促进我们深入思考bug出现的原因,而不是让debug流于表面。

都有哪些调试技巧

我将自己遇到的错误类型归 语法和代码错误运行时错误逻辑错误 三大类,同时还从官方文档总结了 界面调试 的技巧,分享给大家。

一、语法和代码错误 [入门]

语法和代码错误是一种比较低级的错误,指的是在编写代码过程中,IDE就已经显示出来的警告或者错误信息。如果我们不修复它,在保存代码的之后,IDE就不会编译代码并推送到设备上。

解决办法很简单,就是通过阅读红线上的错误信息,然后分析自己的代码哪里出错了。在Flutter的开发过程中,有如下几种典型错误,可以说是新手必犯,如果你跟我一样,把这些错误类型都踩了个遍,那么说明你还处于入门阶段。

  1. 缺少引用
    在Flutter中,由于一切皆为widget的理念,几乎每写一个 .dart文件都涉及到了widget,而如果涉及到widget都必须引入material.dart或者cupertino.dart这些导出了widgets.dart的文件。不要以为在main.dart中有了import 'package:flutter/material.dart';,其它.dart文件就不需要了。
  2. 错字
  3. 符号错误
    在Dart中,必须以分号作为语句结束的标识,分号是不能省略的。了解更多关于Dart的语法知识,可以参考官方文档

二、运行时错误 [重点]

运行时错误是指,编写代码过程中不会出现,但是当App运行时,就会将错误信息打印在App中(例如黄色警告条、红屏)以及控制台里。这些错误信息会告诉你哪里出现了错误,以及出错后该如何修复。

修复运行时错误的一大难点就是,不懂得如何阅读错误日志。我根据自己遇到的运行时错误,划分了两大类,并总结了相应的排查方法。

  1. 有出错堆栈的
    对于这种有出错堆栈信息的,只需要找到错误原因和定位到错误代码,即可快速解决问题。
  2. 有指导内容的
    对于这种有官方指导内容的,需要细心阅读其说明,才能解决问题。以图中的提示为例,Flutter发现我们的widget太大了以致于超过了渲染区域,官方建议我们使用flex因子来强制约束子数组们的大小,又或者是改用ListView组件。(学好英语很重要!)

三、逻辑错误 [难点]

逻辑错误是指,在App运行过程中,App没有出现上述的任何运行时错误或者崩溃,但是App上的运行结果并不符合我们的预期

这类错误通常难以定位,最常见的解决办法就是,找到相应业务的代码,检查方法的调用、数值的计算或者是参数的传递是否有问题。如果无法通过这种简单的方法排查问题,那么就要开始使用Flutter的调试工具了。

以我的真实案例举例:

  addResult(result) {
    // 我没有意识到需要调用this.setState()才能更新数据到界面
    results.add(result);
  }
  1. print函数

我的初步判断是,addResult函数没有被调用,但是当我添加了print函数之后,打脸了

  addResult(result) {
    results.add(result);
    print(results);
    // 打印结果显示,addResult函数被调用了,而且results数组也新增加了成员
  }

print函数能够将任何对象打印到调试控制台中,在Flutter框架里,大部分的类都实现了toString函数(如例子里的List对象),可以很方便快速地排查这些小问题。

  1. 断点调试

很多人不常用断点调试,是因为他们觉得使用起来很麻烦。实际上在VS Code中,Flutter的断点调试开启只需要两步:

启动断点调试之后,在VS Code顶部就会悬浮一个工具条,该工具条的各个按钮用法如下:
在断点调试的过程中,可以通过鼠标指针,实时查看指定的对象的值
还可以在左侧的调试面板中,查看全部的变量信息和调用堆栈信息
断点调试的最大好处在于,可以帮助你一步一步地跟踪调用过程,在每一步中观察对象的值的变化,找到值变化与预期不符合的那一步,即可排查问题。即使是很复杂的代码结构和很繁琐的调用步骤,也能降低理解代码的难度

四、界面调试

在Flutter框架中,有一个很有用的界面调试工具,那就是Debug Painting,即可以给界面绘制布局边界。

在VS Code中,开启该绘制功能十分简单,只需要在Flutter App调试的过程中,打开命令面板(cmd+shift+p),输入Flutter Toggle Debug Painting

可以看到还有许多可以开启的功能,我认为对于界面调试而言,最重要的功能还是Debug Painting,它可以很清晰的展示出每个元素的布局边界,迅速帮开发者找出布局出问题的地方,还是拿我自己开发计算器App的过程来举个例子:
如图所示,当我把App的整体功能开发完毕之后,它在iPhone XS Max模拟器上显示的非常完美,但是在Android 720p的机型上显示却十分糟糕。我通过开启Debug Painting,找出了部分按钮的字体没有居中的原因——在Android 720p机型上,字体的高度比想象中的要大,导致其无法很好地居中在父布局里。

总结

内容很多,最后总结一下,本文根据我之前开发计算器App的过程中,踩到的坑,总结出了 三种错误类型一种界面调试方法

  • 错误类型:语法和代码错误(三种典型例子)、运行时错误(两种排查方法)和 逻辑错误(两种调试方法)。
  • 界面调试:利用好Flutter的界面调试工具Debug Painting。

学习过程中,不断发现自己的不足,就能找到提升自己的空间;经常总结,升华方法论,就能不断提升自己。