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

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

很是不幸的是，我在开发本身的第一款Flutter App时，就几乎将全部可能遇到的错误类型都踩到了，这也让我意识到我须要对这部分知识作出总结，扩充本身的武器库，提高本身的开发效率。

为何要总结调试技巧

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

都有哪些调试技巧

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

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

语法和代码错误是一种比较低级的错误，指的是在编写代码过程当中，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的语法知识，能够参考官方文档。

2、运行时错误 [重点]

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

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

1. 有出错堆栈的

   

   对于这种有出错堆栈信息的，只须要找到错误缘由和定位到错误代码，便可快速解决问题。
2. 有指导内容的

   

   对于这种有官方指导内容的，须要细心阅读其说明，才能解决问题。以图中的提示为例，Flutter发现咱们的widget太大了以至于超过了渲染区域，官方建议咱们使用flex因子来强制约束子数组们的大小，又或者是改用ListView组件。（学好英语很重要！）

3、逻辑错误 [难点]

逻辑错误是指，在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对象），能够很方便快速地排查这些小问题。

2. 断点调试

不少人不经常使用断点调试，是由于他们以为使用起来很麻烦。实际上在VS Code中，Flutter的断点调试开启只须要两步：

启动断点调试以后，在VS Code顶部就会悬浮一个工具条，该工具条的各个按钮用法以下：

在断点调试的过程当中，能够经过鼠标指针，实时查看指定的对象的值

还能够在左侧的调试面板中，查看所有的变量信息和调用堆栈信息

断点调试的最大好处在于，能够帮助你一步一步地跟踪调用过程，在每一步中观察对象的值的变化， 找到值变化与预期不符合的那一步，便可排查问题。即便是很复杂的代码结构和很繁琐的调用步骤，也能 下降理解代码的难度。

4、界面调试

在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。

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