开发者社区> aweiloveandroid> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 对于开发项目来说,调试控制工具是不可少的,开发者是一定要掌握调试工具的使用,一来是为了查看log日志,一来是为了排查错误,再一个原因是可以查看内存占用情况,以便后续性能优化。
+关注继续查看

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

。。。待续

五、代码中的调试

。。。待续


【好消息】我的微信公众号正式开通了,关注一下吧!微信搜索 Flutter那些事

我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《Flutter企业级应用开发实战手册》电子版地址
随着 Flutter 在国内逐步应用,许多开发者逐渐认识到它的玄妙之处。开发者在娴熟地使用 Flutter 进行开发并提高研发效率的同时,也面临着不小的挑战。
18 0
Android Studio开发flutter快捷键
下面是android studio开发flutter快捷键的一些总结,非常实用,掌握后能明显提高编码速度和编码质量: 1、快速创建widget:在dart文件中输入stf或stl出现提示后按回车即可
42 0
重磅首发|如何构建Flutter企业级应用开发?闲鱼技术实战白皮书帮我解答
《Flutter企业级应用开发实战手册》重磅升级!本书由浅入深、娓娓道来地讲述 Flutter 核心知识点,更囊括进阶与深度内容。全书结合知识点,配以相关案例与实践进行讲解,通过思路引导,举一反三。
3507 0
"零"学习成本:使用 Web 标准开发动态化 Flutter 应用
Kraken 是由淘系技术部前端架构团队开发的一个基于 Flutter 的动态化框架,本文将带大家了解和认识 Kraken,分享 Kraken 的一些设计思想以及 Flutter 和 Web 技术对接的实践。
1723 0
看!闲鱼又开源了一个 Flutter 开发利器
随着 Flutter 这一框架的快速发展,有越来越多的业务开始使用 Flutter 来重构或新建其产品。但在我们的实践过程中发现,一方面 Flutter 开发效率高,性能优异,跨平台表现好,另一方面 Flutter 也面临着插件,基础能力,底层框架缺失或者不完善等问题。
13535 0
Flutter for Web开发环境安装【1.5.4】
最新的Flutter 1.5.4已经支持Web开发,这个教程将介绍如何在Linux、windows和Mac下安装Flutter web开发环境:安装Flutter SDK和Flutter Web构建工具,并利用Flutter Web演示代码来验证开发环境搭建成功。
2774 0
开发跨平台app推荐React Native还是flutter?
知乎热门问题:开发跨平台app推荐React Native还是flutter?
8102 0
+关注
aweiloveandroid
高级Android开发工程师,4年移动端开发经验,擅长项目框架架构设计,自定义UI,着力研究跨平台开发。公众号:卢召韦,欢迎关注。 https://github.com/AweiLoveAndroid
54
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载