iOS 使用VSCode 调试 Flutter

开发模式

目前iOS开发使用的是混合模式开发,即部分新的业务需求使用Flutter,前期开发过程中,我们将Flutter集成成pod组件模式接入到主工程中,但是在开发过程中,需要进行本地Flutter代码开发,开发过程中难免会要调式代码,Android使用AndroidStudio调试。 此时需要通过Flutter Attch方式在AndroidStudio与设备之间建立Socket链接,之后便可以对Flutter代码进行调试,这里就不一一描述,iOS也是相同的路径,如果无法建立调试链接,就可能需要检查下内部的Socket链接是否正常。

调试工具 VSCode

1.安装 Dart Flutter插件,如下:

image.png

  1. 点击右边的调试按钮,进入调试窗口.
  2. 设置调式模式,选择 Add Configuration

image.png 4. 在弹出的launch.json文件中选择 Flutter: Attach to Device,然后保存

image.png

  1. 或者打开flutter_bailian项目,在debug模式下,即在lauch.json模式下配置下面的代码

"configurations": [ { "name": "Flutter: Attach to Device", "type": "dart", "request": "attach" }, { "name": "Bailian", "request": "launch", "type": "dart" }] request-->为attch时,为调试模式 request-->为launch时,为编译模式 在使用过程中,我们可以根据需要运行不同的模式,

image.png 这样整个配置就OK了, 6. 选择Flutter Attach to Device,然后按旁边的启动按钮,右下角会出现等待的提示

image.png 7.连接成功后会解析文件到设备(有时会时间很长)

image.png 8.代码框正上方为debug操作栏

image.png 9.为代码打上断点,重新进入页面后,如果程序碰到断点,会停留在断点上,左侧就为变量值了。

注意所有的调式基础是在运行iOS的目标工程后(BLFlutterManager)才能进行调试,否则调试失败 目前我的机器上面上面的调试都是失败的,不管使用AndroidStudio或者使用VSCode都不行,然后尝试另外一种方式,步骤如下: 1、在VSCode输入快捷键命令Command + Shift + P,输入 attch to flutter process

image.png 2. 输入在目标工程中URI确认就可以开始调试了

image.png

猜你喜欢

转载自juejin.im/post/7110231606958227487