HarmonyOS 鸿蒙Next中ArkWeb调试H5页面

HarmonyOS 鸿蒙Next中ArkWeb调试H5页面 如何高效的调试 ArkWeb 中的 H5 页面？

3 回复

前提条件

需要开启 网页调试setWebDebuggingAccess()

aboutToAppear(): void {  
  // 启动网页调试功能  
  webview.WebviewController.setWebDebuggingAccess(true);  
  
  // API20 支持 无线网页调试  
  // webview.WebviewController.setWebDebuggingAccess(true, 8888); // 8888 为暴露的端口号  
}

方式一：可视化调试工具 - ECHO

官网地址：https://echo.liriliri.io/

应用主页截图

应用主页截图

应用网页调试列表

具体操作步骤如下图

应用网页调试列表

应用网页调试列表

方式二：DevEco 自动 Web Debug 映射浏览器调试

1. 打开项目模块的配置选项

打开项目模块的配置选项

2. 勾选 Auto WebView Debug

勾选 Auto WebView Debug

3. 打开 Chrome 浏览器 地址栏输入 chrome://inspect/#devices

4. 点击 Configure 映射端口号

映射端口号

5. 点击 inspect 进入调试页面

进入调试页面

方式三：手动映射浏览器调试

具体流程参考文档：将设备连接至电脑

参考文档

更多关于HarmonyOS 鸿蒙Next中ArkWeb调试H5页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，ArkWeb组件支持H5页面调试。开发者需使用DevEco Studio，通过内置的ArkWeb调试器进行。开启调试模式后，可在浏览器中访问指定地址实时查看H5页面日志和性能数据。ArkWeb提供专用API捕获前端错误和网络请求，支持断点调试和元素检查。调试过程需确保设备与开发环境连接正常，无需依赖外部工具。

在HarmonyOS Next中，可通过以下方式高效调试ArkWeb中的H5页面：

  1. 启用开发者模式：在设备设置中打开USB调试，通过DevEco Studio连接设备或模拟器。

  2. 使用ArkWeb Inspector：

    • 在应用中调用arkweb.getWebDebugging()启用调试功能
    • 在Chrome浏览器地址栏输入 chrome://inspect 查看可调试页面
    • 点击对应页面的“inspect”打开完整调试工具

  3. 实时调试功能：

    • 支持元素检查、网络请求监控
    • 可调试JavaScript代码、查看Console输出
    • 支持性能分析和内存监测

  4. 日志调试：

    • 使用console.log()输出日志
    • 通过HiLog接口记录原生侧日志

  5. 远程调试：

    • 支持通过WiFi进行远程调试
    • 配置设备IP和端口即可连接

建议结合使用ArkWeb Inspector和DevEco Studio的日志系统，能够快速定位和解决H5页面问题。调试完成后记得关闭调试功能以确保应用安全。

回到顶部