HarmonyOS Flutter in action: 08 - How to debug code

1.Environment setup

Refer to the article Harmony Flutter Practice: 01 - Build the Development Environment to build the development environment. The IDE has DevEco and VsCode/Android Studio installed.

2. Configuration

If vscode is used, you can add the following configuration to the .vscode/launch.json file

   {
      "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"
    },

After the addition is successful, the option to start will appear in the Tab column of Run and Schedule. Two configurations have been added here, one is Attach mode and one is normal run mode.

3. Review the logs

To view the logs, you can view the Flutter project logs in the IDE debug console where you run Flutter, and you can use the 'hdc hilog' command or DevEco to view the system logs.

4.Debugging Flutter

There are two main debugging scenarios.

Option 1

To run the Flutter project directly in the IDE, the IDE can choose Andriod Studio or VsCode, and click Debug in the debug bar to run.

Option two

To adapt to DecEco running the HarmonyOS project, note that the ohos HarmonyOS directory code needs to be opened, and click Run after the IDE analysis is completed.

When the app is successfully launched on the HarmonyOS device, immediately call up the Command Pallet in Vscode, find Flutter Attach, and connect the Flutter debugger to the host

Then it's a matter of adding breakpoints, reloading Flutter with hot reload, and debugging the project code.

Debugging ArkTs

You need to use DevEcho to open the project and click the Debug Entry button next to Run to start debugging the program.

Debugging the Webview

Refer to the article Harmony Flutter Practice: 04 - How to Debug Webview with DevTools for Webview debugging.