Flutter 开发之 VSCode & Xcode 联调 | Flutter & iOS Native 联调.md

748 阅读1分钟

背景

Flutter 开发中不可避免要用到「插件」,Flutter 通过「插件」实现 Dart 代码与 Native 代码的交互。VSCode 与 Xcode 联调能大大提高开发调试效率,本文将对此做详细介绍。

以 fluttertoast 为例展示调试效果:

VSCode 断点Xcode 断点VSCode 断点

我们实现了像调试同一个项目一样调试 Flutter 和 Native 代码,大大提高了调试效率。

思路

  • Xcode 调试必须通过 Xcode 把工程跑起来(通过 Flutter run 跑起来则无法通过 Xcode 调试 Native 代码)
  • 通过 Attach 到已启动的 APP 来调试 Flutter 代码
  • VSCode 通过配置 launch.json 文件来方便的 Debug Flutter 代码

实现

  1. Xcode 打开 Native 项目,并把项目 Run 起来

  2. 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=",
                // ]
              },
        ]
    }
    
  3. VSCode Debug 栏选中 Attach to iOS Device 进行 Debug!image-20221001202048985.png

  4. 此时在 VSCode 上可以调试 Flutter 代码,在 Xcode 上调试 iOS Native 代码,高效的联调吧

注意: 如果是模拟器调试则不需要 args 部分,如果是真机调试则每次都要更换 url,url 会在 Xcode 控制台打印image-20221003002729266.png

小结

科学的方法能够大大提高生产效率,进入新鲜领域或者遇到某类问题应该积极寻找最佳实践,而不是敷衍的完成任务即可。充满最佳实践的项目一定是易于维护,能高效迭代的,开发者心情舒畅,少掉头发。