对于开发项目来说，调试控制工具是不可少的，开发者是一定要掌握调试工具的使用，一来是为了查看log日志，一来是为了排查错误，再一个原因是可以查看内存占用情况，以便后续性能优化。
Flutter的调试主要有3个需要去关注的，一个是Flutter Outline，一个是Flutter Inspector，还有一个是log控制台。前者主要是用于视图预览，后者是用于性能调试，log控制台用于查看log信息以及定位错误等。
下面就详细的讲解一下如何使用Flutter的调试工具。
一、基础配置和设置
在讲解调试工具之前，先来看看有关的设置选项，点击菜单栏File-->Settings-->Languages & Frameworks --> Flutter，打开之后设置如图2.6.1所示，重点字段我都翻译成了中文，帮助大家理解，如果不是很熟悉这个设置，推荐大家按照我这样去配置。
【提示】如果Flutter Outline和Flutter Inspector没有出现在侧边栏（默认是在右边侧边栏），建议重启Android Studio，如果还没有出现，建议卸载Flutter插件，重新安装一次，安装完记得重启Android Studio。
基础配置和设置
二、介绍一下log控制台
控制台是调试程序必须要看的一个辅助工具，控制台有两个：一个是调试Android程序的 LogCat调试台，另一个是Flutter里面自带的Run控制台。LogCat调试台主要是查看原生Android有关的日志的，我们这里就不详细讲解它，我们重点来看了解一下Run控制台。
Run控制台在工程创建的时候是没有的，当我们运行项目的时候，Run控制台就会出现在底部菜单栏，如图所示：
这里面有几个工具，我简单的描述一下每个工具的作用：
首先我们看左边第一列的4个工具的作用，如图所示：
左边第一列的4个工具的作用
然后再看看第二列的2个工具的作用，如图所示：
第二列的2个工具的作用
然后再看看横向的5个工具的作用，如图所示：
横向的5个工具的作用
最后看看主体内容的介绍，如图所示：
主体内容的介绍
三、Dart Analysis
当我们安装了Dart插件之后，这个工具就会出现在底部工具栏面板里面。Dart Analysis这个工具从字面意思就可以知道它主要是用来分析Dart语法的。比如语法错误或者语法警告等。
比如声明变量未使用，这个属于语法警告，如图中的61行所示：
语法警告
比如语法错误，如图2.6.2.2所示：
语法错误
四、Flutter Outline
Flutter Outline主要是用来视图预览的。当我们运行项目之后，就会看到Flutter Outline里面会显示每一个类，成员变量，方法名，参数等详细信息，通过Flutter Outline考验快速定位到要查看的相关类或者方法字段信息。具体功能如图2.6.3.1所示：
具体截图
这里主要讲一下上方并排的7个工具的功能，以及右边那个漏斗形状的蓝色图标的作用。
| 图标 | 描述 |
|---|---|
|
添加一个Center组件。 |
|
添加一个Padding组件。 |
|
添加一个Column组件。 |
|
添加一个Row组件。 |
|
用来重构方法。 |
|
将组件向上移动。 |
|
将组件向下移动。 |
|
移除组件。 |
|
点击它，就会只显示组件，再次点击就显示完整的代码结构。例如上例的fluter_demo中，点击了这个图标之后，显示完整的代码结构，如下图所示： |
显示完整的代码结构
四、Flutter Inspector
。。。待续
五、代码中的调试
。。。待续
网友评论