Flutter 应用调试使用教程_调试使用帮助

程序调试是程序投入运行之前,使用手工或编译程序等方法进行的测试,主要用以修正语法错误和逻辑错误。程序调试是保证计算机信息系统正确性的必不可少的步骤。在Flutter应用开发中,Android Studio和VSCode是两种比较常见的集成开发环境,因此项目调试也围绕这两款IDE进行。Android Studio为Flutter提供完整的集成IDE体验,因此A

Flutter 应用调试使用教程

程序调试是程序投入运行之前,使用手工或编译程序等方法进行的测试,主要用以修正语法错误和逻辑错误。程序调试是保证计算机信息系统正确性的必不可少的步骤。
在Flutter应用开发中,Android Studio和VSCode是两种比较常见的集成开发环境,因此项目调试也围绕这两款IDE进行。Android Studio为Flutter提供完整的集成IDE体验,因此Android的调试技巧对于Flutter来说也是适用的。在 Flutter 中,调试代码主要分为输出日志、断点调试和布局调试 3 类,因此Flutter的调试也将围绕这 3 个主题。Android Studio

Flutter 应用调试使用教程_调试使用帮助

输出日志

为了便于跟踪和记录应用的运行情况,我们在开发时通常会在一些关键步骤输出日志(Log),在Flutter中我们使用 print 函数在控制台打印出相关的上下文信息。通过这些信息,就可以定位代码中可能出现的问题。不过,由于涉及 I/O 操作,使用 print 来打印信息会消耗较多的系统资源。同时,这些输出数据很可能会暴露 App 的执行细节,所以我们在发布正式版时还需要屏蔽掉这些输出。

不过最工程化的做法是读取项目配置文件,根据运行环境来开启日志调试功能。为了根据不同的运行环境来开启日志调试功能,我们可以使用 Flutter 提供的debugPrint 来代替 print。debugPrint 函数同样会将消息打印至控制台,但与 print 不同的是,它提供了定制打印的能力。也就是说,我们可以向 debugPrint 函数,赋值一个函数声明来自定义打印行为。

比如在下面的代码中,我们将 debugPrint 函数定义为一个空函数体,这样就可以实现一键取消打印的功能了。

debugPrint = (String message, {int wrapWidth}) {};//空实现

在 Flutter 中,我们可以使用不同的 main 文件来表示不同环境下的入口。同样,在Flutter开发中,可以通过 main.dart 与 main-dev.dart,去分别定义生产环境与开发环境不同的打印日志行为。

在下面的例子中,我们将生产环境的 debugPrint 定义为空实现,将开发环境的 debugPrint 定义为同步打印数据,如下所示。

//main.dart
void main() {
  // 将debugPrint指定为空的执行体, 所以它什么也不做
  debugPrint = (String message, {int wrapWidth}) {};
  runApp(MyApp()); 
}

//main-dev.dart
void main() async {
  // 将debugPrint指定为同步打印数据
  debugPrint = (String message, {int wrapWidth}) => debugPrintSynchronously(message, wrapWidth: wrapWidth);
  runApp(MyApp());
}

可以看到,在代码实现上,我们只要将应用内所有的 print 都替换成 debugPrint,就可以满足开发环境下打日志的需求,也可以保证生产环境下应用的执行信息不会被意外打印。

断点调试

输出日志固然方便,但如果要想获取更为详细,或是粒度更细的上下文信息,静态调试的方式非常不方便。这时,我们需要更为灵活的动态调试方法,即断点调试。断点调试可以让代码在目标语句上暂停,让程序逐条执行后续的代码语句,来帮助我们实时关注代码执行上下文中所有变量值的详细变化过程。

Android Studio 提供了断点调试的功能,调试 Flutter 应用与调试原生 Android 代码的方法完全一样,具体可以分为三步,即标记断点、调试应用、查看信息。

下面以 Flutter 默认的计数器应用模板为例,观察代码中 _counter 值的变化,体会断点调试的全过程。

首先是标记断点。既然我们要观察 _counter 值的变化,因此在界面上展示最新的 _counter 值时添加断点,去观察其数值变化是最理想的。因此,我们在行号右侧点击鼠标,可以把断点加载到初始化 Text 控件所示的位置。

在下图的例子中,我们为了观察 _counter 在等于 20 的时候是否正常,还特意设置了一个条件断点 _counter==20,这样调试器就只会在第 20 次点击计数器按钮时暂停下来。

Flutter 应用调试使用教程_调试使用帮助

添加断点后,对应的行号将会出现圆形的断点标记,并高亮显示整行代码。到此,断点就添加好了。当然,我们还可以同时添加多个断点,以便更好地观察代码的执行过程。

接下来则是调试应用了。和之前通过点击Run 按钮的运行方式不同,这一次我们需要点击工具栏上的虫子图标,以调试模式启动 App,如下图所示。
Flutter 应用调试使用教程_调试使用帮助
等调试器初始化好后,我们的程序就启动了。由于设置了断点,所以当代码运行到了断点位置,自动进入了 Debug 视图模式,如下图所示。

Flutter 应用调试使用教程_调试使用帮助
按照功能的不同,可以把 Debug 视图模式划分为 4 个区域,即 A 区控制调试工具、B 区步进调试工具、C 区帧调试窗口、D 区变量查看窗口。

控制调试工具区域主要用来控制调试的执行情况,如下图所示。
Flutter 应用调试使用教程_调试使用帮助
我们可以点击继续执行按钮来让程序继续运行、点击终止执行按钮来让程序终止运行、点击重新执行按钮来让程序重新启动,或是在程序正常执行时,点击暂停执行按钮按钮来让程序暂停运行。当然,我们可以点击编辑断点按钮来编辑断点信息,或是点击禁用断点按钮来取消断点。
步进调试工具区域主要用来控制断点的步进情况,如下图所示。
Flutter 应用调试使用教程_调试使用帮助
可以点击单步跳过按钮来让程序单步执行(但不会进入方法体内部)、点击单步进入或强制单步进入按钮让程序逐条语句执行,甚至还可以点击运行到光标处按钮让程序执行到在光标处。认为断点所在的方法体已经无需执行时,则可以点击单步跳出按钮让程序立刻执行完当前进入的方法,从而返回方法调用处的下一行。担任,还可以点击表达式计算按钮来通过赋值或表达式方式修改任意变量的值。

C 区用来指示当前断点所包含的函数执行堆栈,D 区则是其堆栈中的函数帧所对应的变量。

布局调试

除了输出日志、断点调试,布局分析也是开发中不可缺少的代码优化手段。借助Flutter提供的Flutter Inspector 可视化工具,可以帮助我们诊断布局问题。打开Android Studio,然后点击工具栏上的“Open DevTools”按钮即可启动 Flutter Inspector,如下图所示。
Flutter 应用调试使用教程_调试使用帮助
随后,Android Studio 会打开浏览器,将Flutter应用程序的的 Widget 树结构展示在面板中。可以看到,Flutter Inspector 所展示的 Widget 树结构,与代码中实现的 Widget 层次是一一对应的。
Flutter 应用调试使用教程_调试使用帮助
除了进行布局调试外,还可以使用Flutter Inspector进行布局调优。

VSCode

除了Android Studio外,VSCode也是一款比较常见的Flutter应用程序开发工具。使用VSCode提供的图形化调试界面,开发者可以很方便的进行Flutter应用的调试工作。使用VSCode打开Flutter项目,然后点击VSCode的断点调试按钮即可开启调试,如下图所示。
Flutter 应用调试使用教程_调试使用帮助
需要说明的是,第一次使用VSCode进行断点调试时,需要先安装并激活Dart DevTools调试工具。如果不确定是否绑定过DevTools工具,可以使用快捷键【command+shift+p】打开VSCode工具栏,然后输入Open DevTools打开调试窗口。
然后,在需要调试的代码处设置断点,点击左上方的开启调试按钮开启调试即可。当代码运行到断点处时,就会停留在断点处,然后就可以进行相关调试操作。

海计划公众号
(0)
上一篇 2020/03/20 22:21
下一篇 2020/03/20 22:21

您可能感兴趣的内容

  • 微信小程序前端样式WXSS书写指南教程_wxss攻略教程

    一. WXSS的简单介绍WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。与 CSS 相比,WXSS 扩展的特性有:尺寸单位样式导入二. 尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像

    2020/03/24
  • vill.ee小白攻略_真实模拟了眼球器官

    vill.ee小白攻略 官方网址:http://www.vill.ee/ 简介描述:真实模拟了眼球器官 这是一个网页技术的尝试,算是DEMO吧。网页真实模拟了3D眼球器官,包括背部…

    2020/03/11
  • JS常用正则表达式备忘录使用帮助_正则入门知识

    正则表达式或“regex”用于匹配字符串的各个部分 下面是我创建正则表达式的备忘单。匹配正则使用 .test() 方法let testString = “My test string”;
    let testRegex = /string/;
    testRegex.test(testString);匹配多个模式使用操作符号 |const regex = /yes|

    2020/03/30
  • Js实现动画缓存效果入门攻略_动画基础入门

    Js实现动画缓存效果代码如下:
    /**
    @description: 动画缓存 函数
    @param {string} targetId – 要移动的目标元素 id
    @param {number} targetPosition – 要移动的目标位置
    @param {number} frequency – 每次移动的频率
    */
    function m

    2020/03/29
  • 使用vue.js的动态组件模板新手入门_组件小白攻略

    组件并不总是具有相同的结构。有时需要管理许多不同的状态(注:指的是根据不同状态显示不同组件)。异步加载组件对此操作很有帮助。用例在 Scrumpy 中组件用于提醒、评论和附件等多个地方。让我们看一下评论部分,看看我要表达的是什么意思。评论不再只是简单的文本字段,你希望能够发布链接,上传图片,集成视频等等。所有这些完全不同的元素都必须在此评论中呈现出来。如果您

    2020/03/29
  • 前端,我为什么不要你使用说明_前端小白入门

    今年一月份以前端主管的身份进入现在的公司,到现在为止陆陆续续面试了十几个应聘者,惊讶地发现前端这个细分岗位的市场行情竟如此奇怪,一方面是各种公司争相聘请,导致价格高的浮躁;一方面是从业者大多经历尚浅,浅到没什么技术积累,没什么项目经验,更可怕的是没什么进取心。这里总结一下,自勉。 一年经验重复用 这个是最可怕的,如果不仔细了解,你很难分辨工作经验里

    2020/03/30
  • jquery.panzoom入门教程_元素平移和缩放插件

    jquery.panzoom入门教程 GitHub:https://github.com/timmywil/panzoom 简介描述:元素平移和缩放插件 Panzoom是一个渐进的…

    2020/03/06
  • 前端需要注意的SEO优化小白知识_seo小白指南

    1. 合理的title、description、keywords:搜索对这三项的权重逐个减小。确定大概的关键词后就开始写tdk(title、description、keywords),tdk的写法避免堆砌关键词title控制在30个字内,description一般控制在70-80,为了搜索结果的展示完整性title避免多次重复,例如:“苏州seo_苏州seo

    2020/03/29
  • seajs小白常识_一个web的模块加载器

    seajs小白常识 官方网址:https://seajs.github.io/seajs/ GitHub:https://github.com/seajs/seajs 简介描述:一…

    2020/03/06
  • vue2-elm基础知识_vue2 + vuex 构建一个具有 45 个页面的大型单页面应用

    vue2-elm基础知识 官方网址:https://cangdu.org/elm/ GitHub:https://github.com/bailicangdu/vue2-elm 简…

    2020/03/06
  • Vue关键词搜索高亮基础入门_高亮零基础入门

    有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多。本文就介绍一下关键词搜索高亮的实现方案。实现效果大概如下:可在线预览:http://wintc.top/laboratory/#/search-highlight。一、实现原理实现原理很简单:使用正则匹配出文本内容中的所有关键词,在关键词外包一层

    2020/03/22
  • 网页浏览器缩放监听小白知识_事件使用攻略

    这里的缩放不是指resize事件(改变浏览器窗口大小),而是指浏览器本身的缩放功能,一般使用以下方式进行缩放:ctrl配合鼠标滚轮ctrl配合-/+/0进行缩放。虽然没有专门的缩放事件,但是可以通过监听以上两种缩放操作事件进行达到“监听”缩放的目地:Ctrl+鼠标滚轮缩放:监听DOMMouseScroll并判断是否触发了ctrl按键键盘快捷键缩放:监听key

    2020/03/29
  • vue 数据通信总结基础知识入门_通信指南攻略

    数据单向流动prop react也是一样prop 1. prop / $emit (常用 父子组件传递) //父传给子
    //子通过props接收
    export default {name: ‘demo’,data: function() {},props: {title: {type:

    2020/03/24
  • React Hooks实践基础入门_Hooks小白常识

    9月份开始,使用了React16.8的新特性React Hooks对项目进行了重构,果然,感觉没有被辜负,就像阮一峰老师所说的一样,这个 API 是 React 的未来。HooksReact Hooks是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。说是新的特性,但是与其他的版本的

    2020/03/22
  • 泛型入门基础教程_java攻略教程

    泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。通俗理解:泛型就是解决 类 接口 方

    2020/03/23
  • vconsole使用帮助移动端h5开启控制台的实现_移动端入门攻略

    由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。代码如下:// 加载控制台
    export const loadScript = (url, callback) => {const script

    2020/03/30