鸿蒙Flutter实战：08-如何调试代码

合集 - 鸿蒙 Flutter 实战(15)

1.flutter 鸿蒙适配指南2024-10-17

2.鸿蒙Flutter实战：08-如何调试代码2024-10-23

3.鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙2024-10-234.鸿蒙Flutter实战：07混合开发2024-10-235.鸿蒙Flutter实战：02-Windows环境搭建踩坑指南2024-10-226.鸿蒙Flutter实战：04-如何使用DevTools调试Webview2024-10-227.鸿蒙Flutter实战：05-使用第三方插件2024-10-228.鸿蒙Flutter实战：06-使用ArkTs开发Flutter鸿蒙插件2024-10-229.鸿蒙Flutter实战：01-搭建开发环境2024-10-2110.鸿蒙Flutter实战：03-鸿蒙Flutter开发中集成Webview2024-10-2211.鸿蒙Flutter实战：10-常见问题集合2024-10-2312.鸿蒙Flutter实战：11-使用 Flutter SDK 3.22.02024-11-0113.鸿蒙Flutter实战：12-使用模拟器开发调试2024-11-1014.鸿蒙Flutter实战：13-鸿蒙应用打包上架流程2024-11-1015.鸿蒙Flutter实战：14-现有Flutter 项目支持鸿蒙 II2024-12-26

收起

鸿蒙Flutter实战：如何调试代码

1.环境搭建

参考文章鸿蒙Flutter实战：01-搭建开发环境搭建好开发环境。IDE 安装好 DevEco 和 VsCode/Android Studio。

2.配置

如果是 vscode, 可以在 .vscode/launch.json 文件中，增加以下配置

   {
      "name": "ohos-app (attach mode)",
      "cwd": "packages/apps/ohos_app",
      "request": "attach",
      "type": "dart",
    },
    {
      "name": "ohos_app",
      "cwd": "packages/apps/ohos_app",
      "request": "launch",
      "type": "dart"
    },

添加成功后，会在运行和调度的 Tab 栏目中，出现启动的选项。这里添加了两个配置，一个是 Attach 模式，一个是普通的运行模式。

3.查看日志

查看日志，可以在运行Flutter处的IDE调试控制台查看 Flutter 项目日志，可以使用 hdc hilog 命令或DevEco 查看系统日志。

4.调试 Flutter

主要有两种调试方案。

方案一

在IDE 中直接运行 Flutter 项目，IDE 可选择 Andriod Studio 或者 VsCode，在调试栏点击 Debug 运行。

方案二

适应DecEco运行鸿蒙项目，注意需要打开的是ohos鸿蒙目录代码，待IDE分析结束后，点击运行。

当app在鸿蒙设备上启动成功后，立即在 Vscode 中调出 Command Pallet，找到 Flutter Attach ，将 Flutter 调试器连接至宿主机

然后就是增加断点，使用hot reload 重新加载 Flutter，调试项目代码。

调试 ArkTs

需要使用 DevEcho 打开项目，点击运行旁边的 Debug Entry 按钮，开始程序调试。

调试 Webview

参考文章 鸿蒙Flutter实战：04-如何使用DevTools调试Webview进行 Webview 调试。