在 HarmonyOS 5 中调试 UniApp 应用的完整步骤如下,涵盖环境配置、设备连接及调试方法:
一、环境准备
-
开发工具
- 安装 HBuilderX 4.64+(需启用鸿蒙插件)
- 可选安装 DevEco Studio 5.0.3+(用于真机调试)
- 配置 Node.js ≥18.x:
npm install -g @dcloudio/uni-cli # 安装 UniApp CLI
2.项目配置
在 manifest.json
声明鸿蒙平台:
"harmonyos": {"appType": "ohos","packageName": "com.example.app", // 需与 AGC 应用包名一致"minPlatformVersion": 5
}
二、设备连接
1. USB 真机调试
- 鸿蒙设备开启开发者模式:
设置 > 系统 > 开发者选项 > 启用 USB 调试
- 连接电脑后,在设备弹窗点击 允许 USB 调试
- HBuilderX 选择菜单:
运行 > 运行到鸿蒙设备
2. 无线跨设备调试
hdc tconn 192.168.1.100 # 连接设备 IP
hdc list targets # 验证设备状态
需确保设备与 PC 在同一局域网
3. 模拟器调试
在 DevEco Studio 的 Device Manager 启动多规格模拟器(如折叠屏、横竖屏)
🔍 三、调试方法
1. 日志输出
- 使用
console
分级输出日志:
console.debug('%{public}s', '敏感数据可见'); // public 确保日志可见
console.error('[MyApp] 网络超时'); // 按 tag 过滤日志
2. 可视化组件检查
- 打开 ArkUI Inspector(DevEco Studio):
View > Tool Windows > ArkUI Inspector
- 查看编译后的组件层级,通过
data-test-id
定位元素:
<button data-test-id="login_btn">登录</button> <!-- 源码 -->
3. 断点调试(uni-app x 项目)
- 要求 HBuilderX 4.61+
- 步骤:
- 点击控制台右上角 蜘蛛按钮 开启调试
- 在代码行号左侧双击设置断点
- 运行应用,触发断点暂停后查看变量/调用栈
4. Webview 调试
- 在
EntryAbility.ets
开启调试支持:
import webview from '@ohos.web.webview';
webview.WebviewController.setWebDebuggingAccess(true); // 启用 Web 调试
- Chrome 访问
chrome://inspect
调试页面5
四、常见问题解决
-
设备未识别
检查开发者选项中 默认 USB 配置 需设为MIDI
或音频 -
断点失效
仅支持 uni-app x 项目(Vue3 语法) -
权限缺失
在module.json5
声明所需权限(如网络权限):
"requestPermissions": [{"name": "ohos.permission.INTERNET","usedScene": { "abilities": ["EntryAbility"] }
}]
五、发布前准备
- 证书配置
- 在
build-profile.json5
关联 AGC 正式签名证书
- 在
- 隐私合规
- 敏感权限(相机/位置)需在 AGC 提交隐私协议说明
调试效率提升:
- 多设备同步测试生命周期钩子与本地存储一致性
- 使用
@ohos.hidebug
监控内存占用,避免重复渲染