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

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

为什么要总结调试技巧

• 大部分开发人员调试的时候，都只懂得使用打印。这种方法虽然使用方便，但是只会这种方法不能在复杂的代码中高效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。

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