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

简介: 本文介绍了鸿蒙Flutter项目的开发环境搭建、配置、日志查看及调试方法。首先按照指南搭建开发环境,安装IDE插件;接着配置vscode的launch.json文件;通过IDE调试控制台或命令行查看日志;提供两种调试Flutter的方式,包括IDE直接运行和使用DevEco;最后介绍ArkTs和Webview的调试方法。

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 调试。

目录
相关文章
|
1月前
|
JavaScript API 数据处理
基于HarmonyOS 5.0 (Next)技术的渐变模糊效果技术实现【代码实战】
本文详细介绍如何在HarmonyOS 5.0(Next)中实现渐变模糊效果,涵盖从基础页面搭建到添加模糊、渐变效果的全过程,并通过代码实战展示具体操作步骤。文章首先介绍了使用`Stack`和`Image`控件设置背景并应用`foregroundBlurStyle`属性实现模糊效果,接着通过`linearGradient`属性融入渐变效果,使界面更加精致美观。此外,还展示了如何利用滑动条和手势等交互元素动态调整模糊与渐变效果,增强用户体验。最后,通过具体代码示例说明如何为图片、弹窗等控件添加渐变模糊效果,突显HarmonyOS的强大功能与灵活性。
101 17
|
2天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
22天前
|
索引 API
鸿蒙开发:自定义一个股票代码选择键盘
金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。
鸿蒙开发:自定义一个股票代码选择键盘
|
24天前
|
存储 JavaScript 开发工具
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
本次的.HarmonyOS Next ,ArkTS语言,HarmonyOS的元服务和DevEco Studio 开发工具,为开发者提供了构建现代化、轻量化、高性能应用的便捷方式。这些技术和工具将帮助开发者更好地适应未来的智能设备和服务提供方式。
59 8
基于HarmonyOS 5.0(NEXT)与SpringCloud架构的跨平台应用开发与服务集成研究【实战】
|
1月前
|
安全 数据安全/隐私保护 UED
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
### HarmonyOS 5.0(Next)应用开发实战:使用ArkTS构建开箱即用的登录页面 HarmonyOS 5.0(Next)融合了美学与科技,引入“光感美学”设计理念和多设备深度协同功能。本文通过 ArkTS 构建一个简单的登录页面,展示了模块化导入、状态管理、方法封装、声明式UI构建及事件处理等最佳实践。代码实现了一个包含用户名和密码输入框及登录按钮的界面,支持错误提示和页面跳转。
148 14
HarmonyOS 5.0 (Next)应用开发实战:使用ArkTS构建开箱即用的登录页面【HarmonyOS 5.0(Next)】
|
1月前
|
自然语言处理 搜索推荐 数据安全/隐私保护
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
鸿蒙登录页面设计展示了 HarmonyOS 5.0(Next)的未来美学理念,结合科技与艺术,为用户带来视觉盛宴。该页面使用 ArkTS 开发,支持个性化定制和无缝智能设备连接。代码解析涵盖了声明式 UI、状态管理、事件处理及路由导航等关键概念,帮助开发者快速上手 HarmonyOS 应用开发。通过这段代码,开发者可以了解如何构建交互式界面并实现跨设备协同工作,推动智能生态的发展。
147 10
鸿蒙登录页面好看的样式设计-HarmonyOS应用开发实战与ArkTS代码解析【HarmonyOS 5.0(Next)】
|
27天前
|
Dart 前端开发 IDE
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
本文介绍了如何将现有 Flutter 项目适配鸿蒙系统,详细步骤包括安装 FVM、使用 FVM 安装 Flutter SDK、搭建开发环境、创建项目架构和壳工程等。
180 4
鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II
|
1月前
|
人工智能 安全 数据安全/隐私保护
HarmonyOS应用开发实战:基于ArkTS的开箱即用登录页面实现【样式方式实现①】【HarmonyOS 5.0(Next)】
本文介绍了基于HarmonyOS 5.0(Next)和ArkTS实现的开箱即用登录页面。HarmonyOS 5.0是华为于2024年10月22日发布的第三代移动操作系统,具备原生智能、互联、安全及流畅特性。文章详细解析了使用ArkTS开发登录页面的代码,涵盖组件定义、界面布局、事件处理、样式设置及异步操作等内容,展示了清晰的组件结构、响应式设计与模块化编程的优势。通过这段代码,开发者可以快速上手并构建高效、美观的应用界面。
155 9
|
21天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
87 47
Harmony OS开发-ArkTS语言速成二
|
22天前
|
API
鸿蒙开发:自定义一个英文键盘
实现方式呢,有很多种,目前采用了比较简单的一种,如果大家采用网格Grid组件实现方式,也是可以的,但是需要考虑每行的边距以及数据,还有最后两行的格子占位问题。
鸿蒙开发:自定义一个英文键盘