老司机带你快速上手调试Flutter项目

对于开发项目来说,调试控制工具是不可少的,开发者是一定要掌握调试工具的使用,一来是为了查看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

。。。待续

五、代码中的调试

。。。待续

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏wblearn

代码提示插件Spket

Spket是一个可以在Eclipse及MyEclipse中实现JavaScript代码自动提示、自动校验、自动纠错的插件。

12310
来自专栏前端儿

Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

如果要将Sass编译成css文件,安装相应的编译工具就行,然后在命令行直接sass a.scss:b.css 编译就行了

13620
来自专栏梦里茶室

【Chromium中文文档】Chromium多进程架构

问题 构建一个从不会挂起或崩溃的渲染引擎几乎是不可能的。构建一个完全安全的渲染引擎也是几乎不可能的。 在某种程度上,web浏览器当前状态就像一个与过去的多任务操...

38050
来自专栏BIT泽清

React Native应用部署/马甲包热更新-CodePush最新集成总结(2018年最新)

React Native支持大家用React Native技术开发APP,并打包生成一个APP。在动态更新方面React Native只是提供了动态更新的基础,...

41500
来自专栏魏艾斯博客www.vpsss.net

WordPress 手动优化和插件优化 MySQL 数据库的方法

15520
来自专栏技术博文

SSDB 配置文件

SSDB 的配置非常简单, 附带的 ssdb.conf 你不用修改便可以使用. 如果你要高度定制, 还是需要修改一些配置的. 下面做介绍. SSDB 的配置文件...

27750
来自专栏守望轩

Visual Studio 2008 每日提示(十二)

#111、定义最近使用的列表中显示项的数目 原文链接:How to customize the number of items shown in the re...

37440
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native应用部署/热更新-CodePush最新集成总结(新)

React Native应用部署/热更新-CodePush最新集成总结(新) ---- 更新说明: 此次博文更新适配了最新版的CodePush v1.17....

82860
来自专栏程序员的知识天地

程序员常用开发工具配置,给自己留一手!

修改D:javaenvapache-tomcat-7.0.26confserver.xml

12510
来自专栏about云

zookeeper思考与总结1:在其它组件的作用及hdfs对比

一、zookeeper在其它组件的作用 1.为什么会产生zookeeper zookeeper是模仿的谷歌的Chubby来解决分布式一致性的问题。2006年的时...

40850

扫码关注云+社区

领取腾讯云代金券