Flutter 调试方式

作者: iwakevin | 来源:发表于2018-12-05 10:31 被阅读72次

    在 Flutter 里有几种调试方式。

    • 断点调试。
    • debugger 调试。
    • rendering 调试。
    • 日志调试。
    • 运行状态调试。
    • 真机调试。

    断点调试

    在 Flutter 进行断点调试非常简单,只需要在 Vscode 上打上一个断点,按 F5 就会停在断点处。通过左边的调试栏,观察断点处的变量以及栈堆情况。


    image.png

    debugger调试

    除了打断点,也可以使用 debugger API 的方式。

    import 'dart:developer';
    
    void someFunction(double offset) {
        debugger(when: offset > 30.0, message: 'offset 大于 30 时,中断');
        // ...
    }
    

    这段代码表明,当 offset 这个变量的值大于 30.0 时中断运行,并输出 message 的内容。debugger 代码只会在开发阶段运行

    rendering 调试

    rendering 即开启布局线,当打开 rendering 时,会在界面上看到一些布局线,以便于修复布局效果。

    import 'package:flutter/rendering.dart';
    
    void main() {
        debugPaintSizeEnabled = !true;
        runApp(new MyApp());
    }
    

    打开之后看到的效果。


    image.png

    日志调试

    日志调试,直接使用 print 输出内容即可,在 AS、Vscode 里的控制台/调试控制台都可以看到。

    为了方便,定义一个 Debug 类。

    class Debug {
        static log(String tag, String text) {
            print('[$tag] $text');
        }
        static info(String tag, String text) {
            print('[$tag] $text');
        }
        static success(String tag, String text) {
            print('[$tag] $text');
        }
        static error(String tag, String text) {
            print('[$tag] $text');
        }
    }
    

    运行状态调试

    在使用命令:flutter run 时,会有一个 Observatory URL 地址提供(一般为:http://127.0.0.1:8108/),那就是运行状态调试,打开之后可以看到应用的 GC、VM 方面的信息。注意,如果使用 F5 启动,则没有这个功能。

    真机调试

    开启真机调试的步骤:

    1. 打开 开发者选项 还有 USB 调试。
    2. 使用 USB 将手机连接电脑,若手机出现提示,授权电脑访问手机。
    3. 在命令执行 flutter devices 确认连接电脑的设备。
    4. 然后可通过执行 flutter run 运行我们的 app。
      在手机上开启 USB 调试模式。


      image.png

    相关文章

      网友评论

        本文标题:Flutter 调试方式

        本文链接:https://www.haomeiwen.com/subject/avkicqtx.html