背景
Flutter 开发中不可避免要用到「插件」,Flutter 通过「插件」实现 Dart 代码与 Native 代码的交互。VSCode 与 Xcode 联调能大大提高开发调试效率,本文将对此做详细介绍。
以 fluttertoast 为例展示调试效果:
我们实现了像调试同一个项目一样调试 Flutter 和 Native 代码,大大提高了调试效率。
思路
- Xcode 调试必须通过 Xcode 把工程跑起来(通过
Flutter run
跑起来则无法通过 Xcode 调试 Native 代码) - 通过 Attach 到已启动的 APP 来调试 Flutter 代码
- VSCode 通过配置
launch.json
文件来方便的 Debug Flutter 代码
实现
-
Xcode 打开 Native 项目,并把项目 Run 起来
-
VSCode 配置 launch.json 文件,添加如下配置
{ "version": "0.2.0", "configurations": [ { "name": "Attach to iOS Device", "type": "dart", // 这里是 attach "request": "attach", // Flutter 的入口函数 "program": "lib/main.dart", // "args": [ // "--app-id", // 真机调试时需要把 `http://127.0.0.1:62545/mOf4_BrcKHE=` 改为你 Xcode 控制台输出的 url (注意这个 url 每次启动都会变) // "http://127.0.0.1:62545/mOf4_BrcKHE=", // ] }, ] }
-
VSCode Debug 栏选中 Attach to iOS Device 进行 Debug!
-
此时在 VSCode 上可以调试 Flutter 代码,在 Xcode 上调试 iOS Native 代码,高效的联调吧
注意: 如果是模拟器调试则不需要 args 部分,如果是真机调试则每次都要更换 url,url 会在 Xcode 控制台打印
小结
科学的方法能够大大提高生产效率,进入新鲜领域或者遇到某类问题应该积极寻找最佳实践,而不是敷衍的完成任务即可。充满最佳实践的项目一定是易于维护,能高效迭代的,开发者心情舒畅,少掉头发。