1.1.5 Native 启动下的Flutter 调试

在Flutter 模式下，Flutter 插件调用Xcodebuild（Gradle）命令构建iOS（Android）工程。对于具备Native 背景的开发者来说，这不仅有些不适应，而且常因为Xcodebuild 等命令的参数问题，导致重复编译，当Native 工程规模庞大时尤为复杂。如何解决这个问题呢？这就涉及Flutter 启动和Native 启动下的Flutter 调试与热重载，如图1-5 所示。

图1-5

1．Flutter 启动下的Flutter 调试与热重载逻辑

实际上，当Native 工程配置好Flutter 支持后，在Flutter 启动下做的工作主要有：

①检查是否需要重新生成flutter_tools.snapshot。

②基于pubspec.yaml 获取依赖（pub packages get），并生成插件描述文件.flutter-plugins 和pubspec.lock。

③基于Flutter 配置（如Framework 路径、Debug/Release 模式、是否开启Dart 2 等），生成Generated.xcconfig（iOS）和local.properties（Android）。

④基于Gradle 和Xcodebuild 构建应用。

⑤基于ADB 和LLDB 启动应用。

⑥等待应用中的Flutter 启动，寻找Observatory 端口，通过Dart Debugger 连接以便调试。

⑦寻找到端口后同步Hot Reload 依赖的文件，同时透过Daemon 监听命令（如用户点击插件按钮）实现Full Restart 或Hot Reload。

换个角度来看，如果能够解决Native 启动下的Dart 调试和Hot Reload，由fluttertools 造成的编译慢等将不再是问题，且可解决调试环境不稳定的问题。当从Xcode 启动包含了Debug 模式Flutter 内容的iOS（Android Studio启动Android 类似，这里不再重复）应用时，我们需要关注步骤①②③⑥⑦。而步骤①②③除非flutter_tools、pubspec.yaml 或Flutter 配置发生变化，否则都不需要重新执行。步骤⑥⑦则是研发人员依赖的调试与热重载，必须考虑此模式下如何支持。

2．Native 启动下的Flutter 的调试与热重载逻辑

寻找iOS 设备上的Observatory 端口。通过idevicesyslog 获取命令行，此处涉及libimobiledevice 库，其包含了idevicesyslog、iproxy 等命令。

​kylewong@KyleWongdeMacBook-Pro ios % idevicesyslog | grep listening​

​Aug 26 14:07:18 KyleWongs-iPhone Runner(Flutter)[686] <Notice>:​

​flutter: Observatory listening on​

​http://127.0.0.1:56486/oB7rB0DQ3vU=/​

可以看到iOS 设备上的Observatory 启动了一个x 的端口（端口号随机），认证码为y。

透过iproxy 将iOS 设备上的端口x 映射到本机端口z。

​kylewong@KyleWongdeMacBook-Pro ios % iproxy 8101 56486​

​your-ios-device-uuid​

可以看到waiting for connection，此时就可以访问http://127.0.0.1:z/y/#/vm，打开Observatory，如图1-6 所示。

图1-6

可以使用Observatory 检查诸多与Dart 相关的内存和调试等，这里不再展开。

也可以通过IDE 链接去调试，配置Dart Remote Debug，如图1-7 所示。

图1-7

这里需要注意的是，端口要使用刚转发到计算机的端口z，搜索源码路径为Flutter 工程的根目录。

为了避免出现因为认证码造成的无法连接的问题，启动时需要传入'--disable-service-auth-codes'标志。

配置好之后单击“调试”按钮，连接到调试端口，如图1-8 所示。

图1-8

成功后可以看到Debugger 显示Connected。如果没有显示，则再单击一次“调试”按钮，如图1-9 所示。

图1-9

之后便可以正常地使用IDE 设置断点和调试Dart（Flutter）代码了，如图1-10 所示。

图1-10