Flutter的工程可以在vsCode里运行然后边改代码边调试吗？HarmonyOS鸿蒙Next

Flutter的工程可以在vsCode里运行然后边改代码边调试吗？HarmonyOS鸿蒙Next 一股来说我们在vscode里直接运行到模拟器，可以不需要重新打包就直接更新界面

现在的鸿蒙是做完一点就打包一次，不知道是不是方法不对

看到各类文档只有教学环境安装，直到运行成功就结束了

但是没看到调试的教学

5 回复

【解决方案】

开发者您好，可以通过Android Studio的flutter attach功能对flutter模块进行调试。（Android Studio版本不适宜太新，2021、2022年的版本足矣）。

  1. Android Studio安装flutter插件；
  2. USB连接手机，点击Android Studio工具栏上的flutter attach按钮，进入等待连接状态；
  3. 冷启动ohos项目（需要注意flutter module需要使用debug模式打包，直接启动现有安装的包即可，无需在DevEco Studio上重新运行），点击跳转到对应的flutter页面，加载flutter的har包，连接设备；
  4. 在Android Studio打开对应的flutter代码文件进行断点调试，若需修改flutter代码，修改保存文件后点击对应的热重载或者热重启按钮即可。

【背景知识】

flutter attach是flutter命令行工具提供的一个命令，用于将开发者的编辑器（如Android Studio）连接到正在运行的flutter应用程序，支持断点调试，以及热重载和热重启。其原理是利用了Dart VM的一个调试协议（VM服务协议），允许开发者以REST风格的API与Dart VM进行通信。

连接流程可以大致分为以下几步：

  1. 启动flutter应用程序：开发者使用flutter run命令启动flutter应用程序，该命令将启动Dart VM并加载应用程序代码；
  2. 启用VM服务：Dart VM支持一个VM服务，用于向外部应用程序提供调试和诊断功能。flutter run命令会自动启用VM服务，并监听一个默认的端口号；
  3. 连接编辑器：开发者使用flutter attach命令连接编辑器。flutter attach命令会尝试连接到运行中的flutter应用程序的VM服务，连接成功后，将在编辑器中打开一个调试会话；
  4. 交互调试：在编辑器中，开发者可以设置断点、单步执行代码、查看变量等，通过与Dart VM服务的交互进行代码开发调试。

更多关于Flutter的工程可以在vsCode里运行然后边改代码边调试吗？HarmonyOS鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


vscode上面呢？，

你好，请问修改的是flutter代码吗，VS Code里面直接点击“restart”就可以热更新的，不需要重新打包，请试试呢，

热重启可用代码层改动生效无需每次打包 但改系统 / 平台 / 模块配置的内容就必须重新打包，

在HarmonyOS NEXT上，目前无法像Flutter在VS Code中那样，实现修改代码后直接热重载到模拟器或真机并实时更新界面。

您遇到的“做完一点就打包一次”是当前HarmonyOS应用开发的正常流程，并非方法不对。主要原因如下：

  1. 开发范式与工具链不同：HarmonyOS NEXT使用ArkTS/ArkUI进行原生应用开发，其编译、打包和部署机制与Flutter等跨平台框架有本质区别。目前官方的DevEco Studio是深度集成、为这套原生开发生态量身定制的IDE，提供了完整的编译、调试、预览和性能分析工具链。

  2. 实时预览替代部分热重载功能：对于界面调试，DevEco Studio提供了强大的实时预览功能。在.ets文件编辑时，您可以在预览器中实时看到UI布局和样式的更改效果，这极大提高了UI开发的效率。但它与Flutter的热重载（包含状态保持）在机制和范围上有所不同。

  3. 调试方式：完整的应用逻辑调试（如网络请求、数据流、生命周期、TypeScript/ArkTS代码逻辑）需要在DevEco Studio中，通过将应用运行到模拟器或真机，然后使用其内置的调试器进行断点调试、变量查看等操作。每次修改涉及逻辑的代码后，通常需要重新编译运行。

当前建议的开发调试流程：

  • UI布局与样式调整：优先使用DevEco Studio的实时预览功能，可快速迭代。
  • 业务逻辑调试：在DevEco Studio中，使用其调试器连接运行在模拟器或真机上的应用进行调试。修改代码后需重新编译运行。
  • VS Code的使用：您可以使用VS Code进行ArkTS代码的编辑（需安装HarmonyOS扩展），但其功能主要集中在语法高亮、代码提示等编辑层面。完整的构建、运行和深度调试仍需回到DevEco Studio。

总结来说，HarmonyOS NEXT原生开发目前不具备Flutter式的全功能热重载。高效的调试依赖于DevEco Studio的预览器（针对UI）和调试器（针对逻辑）组合使用。

回到顶部