HarmonyOS鸿蒙Next中引入本地的一个html文件怎么看log输出呢

HarmonyOS鸿蒙Next中引入本地的一个html文件怎么看log输出呢

引入本地的一个html文件怎么看输出呢

7 回复

楼主想要获取日志在鸿蒙的打印工具的话，在下面回调里面处理

.onConsole((event) => {
  if (event) {
    LogUtil.d(this.Tag, 'onConsole', 'getMessage:', event.message.getMessage(), 'getSourceId:',
      event.message.getSourceId(), 'getLineNumber:', event.message.getLineNumber(), 'getMessageLevel:',
      event.message.getMessageLevel())
  }
  return false;
})

更多关于HarmonyOS鸿蒙Next中引入本地的一个html文件怎么看log输出呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


第一步：在web组件中开启调试：

controller: webview.WebviewController = new webview.WebviewController();
aboutToAppear() {
    // 配置Web开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
}

build() {
    Column() {
        Web({ src: $r("index.html"), controller: this.controller })
    }
}

第二步：打开auto webview debug设置

调试Webview组件需要执行转发端口等繁琐的命令行操作，因此可以在DevEco Studio中勾选Auto WebView Debug，该操作会在应用启动后两分钟内自动监听可调试的WebView进程并完成端口转发。

第三步：打开谷歌浏览器，输入地址： chrome://inspect/#devices，edge浏览器输入：edge://inspect/#devices

第四步，在这里等待被发现：

后续步骤请参考官网链接：使用DevTools工具调试前端页面-Web调试维测-ArkWeb（方舟Web）-应用框架 - 华为HarmonyOS开发者

在Web组件中开启调试功能：

Web({
  src: $rawfile("index.html"),
  controller: this.controller,
  webDebuggingAccess: true // 允许调试
})

运行应用至设备后，在Chrome浏览器输入chrome://inspect，选择对应页面打开DevTools。在DevTools的Console面板中可直接查看HTML中通过console.log()输出的日志。

使用浏览器开发者工具
启用远程调试
通过hdc命令连接设备，并在Chrome浏览器中打开调试界面

hdc shell hilog -r  # 清空日志缓存
hdc shell hilog -p webview  # 过滤WebView日志

在Chrome地址栏输入 chrome://inspect，选择对应设备及页面，直接查看console.log输出

F12看控制台日志呀

在HarmonyOS Next中查看本地HTML文件的log输出，需使用WebviewController的onConsoleLog回调。示例代码：

import webview from '@ohos.web.webview';

let controller: webview.WebviewController = new webview.WebviewController();
controller.onConsoleLog((event) => {
  console.log('Web console log: ' + event.message); // 输出到应用日志
});

// 加载本地HTML
let webComponent = new webview.Webview($r('app.id'));
webComponent.setWebController(controller);
webComponent.loadUrl($rawfile('test.html'));

通过hdc shell hilog命令查看应用日志输出。HTML中使用console.log()的内容会在此显示。

在HarmonyOS Next中查看本地HTML文件的log输出，可以通过以下方式实现：

  1. 使用Web组件加载本地HTML时，可以通过onConsole事件监听控制台输出：
webview.on('console', (event) => {
  console.log('HTML Console:', event.message)
})
  1. 对于使用<web>标签的情况：
<web src="$rawfile(local.html)" onconsole="handleConsole"></web>
  1. 在JS/TS中处理日志：
handleConsole(event) {
  console.log('WebView Log:', event.message)
}
  1. 如果需要更详细的调试，可以在HTML中使用标准的console API，这些输出会被上述事件捕获：
<script>
console.log('This will be captured');
</script>

注意确保HTML文件已放置在resources/rawfile目录下，并通过$rawfile()正确引用。

回到顶部