Fluter 应用调试

Flutter 构建模式

目前，Flutter一共提供了三种运行模式，分别是Debug、Release和Profile模式。其中，Debug模式主要用在软件编写过程中，Release模式主要用于应用发布过程中，而Profile模式则主要用于应用性能分析时，每个模式都有自己特殊的使用场景。下面简介介绍下这几种模式：

Debug模式
Debug模式又名调试模式，Debug模式可以同时在物理设备、仿真器或者模拟器上运行应用。默认情况下，使用flutter run命令运行应用程序时就是使用的Debug模式。在Debug模式下，所有的断言、服务扩展是开启的，并且在模式对快速开发和运行周期进行了编译优化，当使用调试工具进行代码调试时可以直接连接到应用的进程里。

Release模式
Release模式又名发布模式，此模式只能在物理设备上运行，不能在模拟器上运行。使用flutter run --release命令运行应用程序时就是使用的Release模式。在Release模式下，断点、调试信息和服务扩展是不可用的，并且Release模式针对快速启动、快速执行和安装包大小进行了优化。

Profile模式
Profile模式只能在物理设备上运行，不能在模拟器上运行。此模式主要用于应用性能分析，一些应用调试能力是被保留的，目的是分析应用存在的性能问题。Profile模式和Release模式大体相同，不同点体现在，Profile模式的某些服务扩展是启用的，某些进程调试手段也是开启的。

调试模式

在 Debug 模式下，app 可以被安装在物理设备、仿真器或者模拟器上进行调试。在Debug模式下，可以进行如下操作：

断点是开启的。
服务扩展是开启的。
针对快速开发和运行周期进行了编译优化（但不是针对执行速度、二进制文件大小或者部署）。
调试开启，类似开发者工具等调试工具可以连接到进程里。

如果是在 Web 平台下的调试模式，可以进行如下操作：

本次构建没有最小化资源并且整个构建没有优化性能。
为了简化调试，这个 Web 应用使用了 dartdevc 编译器。

默认情况下，运行 flutter run 会使用 Debug 模式，同时 IDE 也支持这些模式。例如，Android Studio 提供了 Run > Debug… 菜单选项，而且在项目面板中还有一个三角形的绿色运行按钮图标。

Release 模式

当你想要最大的优化以及最小的占用空间时，就使用 Release 模式来部署 app。 release 模式是不支持模拟器或者仿真器的，使用 Release 模式意味着。

断点是不可用的。
调试信息是不可见的。
调试是禁用的。
编译针对快速启动、快速执行和小的 package 的大小进行了优化。
服务扩展是禁用的。

对于Web开发来说，使用 Release 模式意味着。

这次构建资源已经被压缩，并且性能得以优化。
这个 Web 应用通过 dart2js 编译器构建，以确保更优秀的性能。

Profile 模式

在 Profile 模式下，一些调试能力是被保留的，足够分析你的 app 性能。Profile 模式在仿真器和模拟器上是不可用的，因为他们的行为不能代表真实的性能。和 release 相比， profile 模式有以下不同：

一些服务扩展是启用的。例如，支持 performance overlay。
Tracing 是启用的，一些调试工具，比如开发者工具可以连接到进程里。

在 Web 平台使用Profile 模式意味着：

资源文件没有被压缩，但是整体性能已经优化。
这个 Web 应用通过 dart2js 编译器构建。

调试工具

在Flutter应用开发中，有很多工具可以帮助调试 Flutter 应用程序，常见的如下所示。

开发者工具，是一套运行在浏览器的性能及分析工具。
Android Studio/IntelliJ 和 VS Code（借助 Flutter 和 Dart 插件）支持内置的源代码调试器，可以设置断点，单步调试，检查数值。
Flutter inspector，是开发者工具提供的 widget 检查器，也可直接在 Android Studio 和 IntelliJ 中使用（借助 Flutter 插件）。检查器可以可视化展现 widget 树，查看单个 widget 及其属性值，开启性能图层，等等。

开发者工具

要调试及分析应用，开发者工具可能是你的首选。开发者工具运行在浏览器，支持以下特性：

源代码调试器
Widget 检查器，展示可视化的 widget 树； “widget select” 模式，在应用中选择一个 widget，会在 widget 树直接定位到它的位置。
内存分析
时间线视图，支持跟踪，导入及导出跟踪信息
日志视图

如果你在Debug 模式或Profile 模式运行，那么可以在浏览器打开开发者工具连接到你的应用。开发者工具不能用在 Release 模式编译的应用，因为调试和分析信息都被删除了。如果你要用开发者工具分析应用，需确保使用 Profile 模式运行应用。

在这里插入图片描述

断点调试

和其他语言一样，Flutter的断点调试支持在 IDE 或编辑器（比如 Android Studio/IntelliJ 和 VS Code）、或者通过编码两种方式。
其中，开发者工具调试器如下图所示。
在这里插入图片描述
如果需要，在源代码中设置断点，然后点击工具栏中的【Debug】按钮，或选择【Run】 > 【Debug】即可开启调试功能。

开启调试后，可以在控制台看到如下一些信息。

底部的 Debugger 窗口会显示出堆栈和变量信息。
底部的 Console 窗口会显示详细的日志输出。
调试基于默认的启动配置，如果需要自定义，点击选择目标下拉按钮，选择 Edit configuration 进行配置。

在进行断点调试时，使用得最多的就是单步调试，三个单步调试按钮在暂停后会变为可用状态。

使用 Step in 来进入被调用的方法，在遇到方法内的第一行可执行代码时结束。
使用 Step over 直接执行某个方法调用而不进入内部；该按钮在当前方法内按行执行。
使用 Step out 来跳出当前方法，这种方式会直接执行完所有当前方法内的语句。

除此之外，我们还可以使用代码的方式进行断点调试，我们可以在源代码中使用 debugger()函数来开启断点，当代码运行到此处时就会刮起，如下所示。

import 'dart:developer';

void someFunction(double offset) {
  debugger(when: offset > 30.0);
  // ...
}

Dart 分析器

如果你使用的是 Android Studio或者VSCode，那么工具会自带的 Dart 分析器默认会检查代码，并发现可能的错误。如果你使用命令行，则可以使用 flutter analyze命令来检查代码。Dart 分析器非常依赖你在代码中添加的类型注解，以帮助跟踪问题。

另外，我们可以使用flutter analyze --flutter-repo命令将分析结果打印到控制台上，每次运行这个命名之前，请先运行flutter update-packages 升级最新的包，这样就可以获取最新的依赖包。如果你不这样做，你可能会从dart:ui得到一些错误消息，比如偏移量等。因为执行flutter analysis 命令时并不会主动去拉取依赖。

对于一次性的Dart分析，直接使用flutter analyze --flutter-repo即可，对于连续分析，则可以使用flutter analyze --flutter-repo --watch命令。如果你想知道多少个成员变量丢失了dartdocs，可以添加一个dartdocs参数。

Flutter inspector 工具

Flutter inspector 是分析Flutter组件状态树的利器，Flutter使用小部件来控制页面组件到布局的精准控制，Flutter inspector 可以帮助我们进行如下一些分析。

进行布局分析，理解布局层次
诊断布局问题

在这里插入图片描述
在调试模式下，我们点击Android Studio右边Flutter inspector按钮即可开启Flutter inspector分析，Flutter inspector提供了如下的可视化调试工具。

Select widget mode：启用此按钮后，选择组件树的代码会自动跳转到对应的源代码里面。
Refresh tree ：重新加载最新的组件信息。
Slow Animations：放慢动画速度，以便进行视觉上的查验。
Debug Paint：边框、方向的可视化。
Paint Baselines：每个渲染框在它的每个文本基线上画一条线。
Repaint Rainbow：查看重绘的严重程度，严重的会被爆红。

除了上面的功能外，我们还可以点击【Open DevTools】打开Flutter的调试页面，可以借助它进行很多性能分析，后面会具体介绍。
在这里插入图片描述

测量应用启动时间

要收集有关 Flutter 应用程序启动所需时间的详细信息，可以在运行 flutter run 命令时使用 trace-startup 和 profile 选项，如下所示。

flutter run --trace-startup --profile

跟踪输出被保存到 Flutter 工程目录在 build 目录下，一个名为 start_up_info.json 的 JSON 文件中，输出列出了从应用程序启动到这些跟踪事件（以微秒捕获）所用的时间，如下所示。

{
  "engineEnterTimestampMicros": 2346054348633,
  "timeToFrameworkInitMicros": 812748,
  "timeToFirstFrameRasterizedMicros": 1573154,
  "timeToFirstFrameMicros": 1221472,
  "timeAfterFrameworkInitMicros": 408724
}

对应的具体含义如下：

进入 Flutter 引擎时
展示应用第一帧时
初始化Flutter框架时
完成Flutter框架初始化时

使用Android Studio进行调试

Flutter官方推荐使用Android Studio或VSCode进行应用开发，和其他语言的调试一样，Dart代码的调试流程也差不多。如果还没有Flutter项目，可以新建一个示例项目。通过单击首先，点击调试图标（Debug-run icon）同时打开调试面板并在控制台中运行应用，首次运行应用是最慢的，应用启动后，界面应该是下面这样的。
在这里插入图片描述
然后，我们在在 counter++ 这一行上添加断点。在应用里，点击 + 按钮（FloatingActionButton，或者简称 FAB）来增加数字，应用会暂停。

你可以 step in/out/over Dart 语句、热重载和恢复执行应用、以及像使用其他调试器一样来使用 Dart 调试器。

Flutter inspector

Flutter inspector 是一个用来可视化以及查看 Flutter widget 树的工具，提供如下功能：

了解现有布局
诊断布局问题

可以使用 Android Studio 窗口右侧的垂直按钮来打开Flutter inspector，如下图所示。

在这里插入图片描述

Flutter outline

Flutter Outline 是一个可视的显示页面构建方法的功能，注意在构建方法上可能与 widget 树不同，可以使用 Android Studio 窗口右侧的垂直按钮切换 outline 的显示。
在这里插入图片描述
Tip: 我们可以安装一个 Presentation Assistant 插件来辅助我们进行开发，Presentation Assistant 提供了很多的快捷功能。例如，当焦点在编辑面板中时，输入 command-Shift-A（Mac）或者 shift-control-A（Windows 和 Linux），该插件会同时显示「查找」面板并显示在所有三个平台上执行此操作的提示。
在这里插入图片描述
然后在输入框中输入attach关键字，显示如下图。

在这里插入图片描述

使用 Android Gradle 调试

为了调试原生代码，你需要一个包含 Android 原生代码的应用。在本节中，你将学会如何连接两个调试器到你的应用：
1）Dart 调试器。
2）Android Gradle 调试器。

创建一个基本的 Flutter 应用，然后替换 lib/main.dart 的代码为以下示例代码。

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'URL Launcher',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'URL Launcher'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<void> _launched;

  Future<void> _launchInBrowser(String url) async {
    if (await canLaunch(url)) {
      await launch(url, forceSafariVC: false, forceWebView: false);
    } else {
      throw 'Could not launch $url';
    }
  }

  Future<void> _launchInWebViewOrVC(String url) async {
    if (await canLaunch(url)) {
      await launch(url, forceSafariVC: true, forceWebView: true);
    } else {
      throw 'Could not launch $url';
    }
  }

  Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) {
    if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('');
    }
  }

  @override
  Widget build(BuildContext context) {
    String toLaunch = 'https://flutter.dev';
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(16.0),
              child: Text(toLaunch),
            ),
            RaisedButton(
              onPressed: () => setState(() {
                    _launched = _launchInBrowser(toLaunch);
                  }),
              child: Text('Launch in browser'),
            ),
            Padding(padding: EdgeInsets.all(16.0)),
            RaisedButton(
              onPressed: () => setState(() {
                    _launched = _launchInWebViewOrVC(toLaunch);
                  }),
              child: Text('Launch in app'),
            ),
            Padding(padding: EdgeInsets.all(16.0)),
            FutureBuilder<void>(future: _launched, builder: _launchStatus),
          ],
        ),
      ),
    );
  }
}

然后，添加 url_launcher 依赖到 pubspec 文件，并执行 flutter pub get命令拉取依赖包。

name: flutter_app
description: A new Flutter application.
version: 1.0.0+1

dependencies:
  flutter:
    sdk: flutter

  url_launcher: ^3.0.3
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter

点击调试按钮（Debug-run icon）来同时打开调试面板并启动应用，如下图所示。
在这里插入图片描述
点击【Attach debugger to Android process】按钮，从进程对话框中，你应该可以看到每一个设备的入口。选择 show all processes 来显示每个设备可用的进程。

在调试面板中，你现在应该可以看到一个 Android Debugger 标签页，然后依次选择【app_name】 > 【android】 > 【app】 > 【src】 >【 main】 > 【java】 > 【io.flutter plugins】在项目面板，然后双击 GeneratedProjectRegistrant 在编辑面板中打开 Java 代码，此时Dart 和原生调试器都在与同一个进程交互。
在这里插入图片描述

在这里插入图片描述

Fluter 应用调试

Flutter 构建模式

调试模式

Release 模式

Profile 模式

调试工具

开发者工具

断点调试

Dart 分析器

Flutter inspector 工具

测量应用启动时间

使用Android Studio进行调试

Flutter inspector

Flutter outline

使用 Android Gradle 调试

xiangzhihong

引用和评论

推荐10个最受欢迎的 Vue.js UI 库

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号