Flutter应用如何调试--DevTools介绍(上)

Flutter应用如何调试–DevTools介绍(上)
Flutter应用如何调试–DevTools介绍(中)
Flutter应用如何调试–DevTools介绍(下)
我们使用Flutter开发跨平台的APP,当写完一个需求,运行在高性能手机上,可能感觉非常流畅,但是换个性能差些的手机运行,则有些卡顿。我们想要尽可能的提升APP性能,除了人工排查找出问题代码,本文将要介绍一个很强大的调试工具DevTools,它可以帮助我们更准确的分析APP。

DevTools简介

DevTools是一套DartFlutter性能调试工具,目前已经进行到Beta版本,仍在持续开发中,它可以帮助我们:

  • 检查 Flutter 应用程序的 UI 组件布局和状态;
  • 在 Flutter 应用程序中诊断 UI 性能过低的问题;
  • Flutter 和 Dart 应用的 CPU 性能检测;
  • 为 Flutter 应用进行网络性能检测;
  • 为 Flutter 或 Dart 应用进行源码级的调试;
  • 在 Flutter 或 Dart 命令行应用中测试内存问题;
  • 查看正在运行的 Flutter 或 Dart 的命令行应用程序相关的常规日志和诊断信息。

本文结合官方文档及个人实践经验,对这些功能在调试APP的过程中如何使用进行介绍,如有疏漏、错误欢迎联系我进行交流。


dart-devtools.gif

构建模式

介绍如何使用DevTools之前,先对Flutter的构建模式做下简单介绍,因为DevTools的功能可能需要在不同模式下进行使用。Flutter 支持三种模式编译 app,除了我们接触最多的debugrelease,还有profile模式。在debug模式下我们可以对应用进行断点调试、热重载,极大的方便我们快速开发,但也会输出很多额外信息,因此debub模式下并不代表我们APP的真正性能。给用户使用时我们选择release模式进行发布,release模式下断点是不可用的,调试信息是不可见的,对编译速度、快速执行和包大小进行了优化,除了用眼睛看,我们不便进行分析。这也就是profile构建模式的作用了,profile模式主要就是用来对APP进行分析,它有着和release模式相近的的性能,同时又有一些调试能力--足够用来分析APP性能。

使用哪个构建模式,取决于你处于哪个开发周期:

开发过程中,需要使用 热重载 功能,请选择 debug 构建模式;
当你需要分析性能的时候,选择使用 profile 构建模式;
发布应用的时候,需要选择使用 release 构建模式。

构建APP、启用devtools,可以使用Android Studio/IntelliJVS Code(借助 Flutter 和 Dart 插件)以及使用命令行工具。
本文主要使用Android Studio进行讲解,原理相通,DevTools部分是一样的。此外本文不会局限于介绍DevTools工具,而会对整个开发调试流程进行介绍。

启动DevTools

debug模式下,无论是以Flutter为主工程还是以Native为主混合工程正常启动即可。
profile模式下:
选择run‘android’ in Prodfle Mode

runprofile.png

以Native为主混合工程,如果不能选择的话,想要运行profile模式,首先需要在app -> build.gradle中配置profile模式,如果是多module的话,那么所有的module的build.gradle中增加此配置,默认情况下这里可能是配置好的,如果没有的话添加上即可。

profile.png

然后Android native工程在buildVariants中选择profile模式后点击运行
Androidprofile.png

app运行后 点击 flutter工程的 Flutter attach 按钮


attach.png

退出app,重新进入app当出现 Syncing files to device xxx的时候说明已经连上设备


dpendevtools1.png

然后点击open Devtools进入开发工具页面。
当程序运行起来之后,除了上面的进入Devtools入口,在Android studio右侧,还可以从Flutter inspector里面的more action,以及Flutter Performance底部的入口进入。

opendevtools2.png

opendevtools3.png

如果使用VSCode请参看在 VS Code 里安装和使用开发者工具
如果使用命令行开发请参看通过命令行安装和运行开发者工具

接下来我们一起开始使用Devtools吧,将会对里面的7个工具进行一一介绍,分别是:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容