HarmonyOS Next开发学习手册——Web调试维测

最新推荐文章于 2025-06-10 14:03:47 发布

OpenHarmony_小贾

最新推荐文章于 2025-06-10 14:03:47 发布

阅读量1.8k

点赞数 18

CC 4.0 BY-SA版权

分类专栏：鸿蒙开发 HarmonyOS 移动开发文章标签： harmonyos 前端组件化开发自定义控件 web组件鸿蒙开发移动开发

本文链接：https://blog.youkuaiyun.com/maniuT/article/details/140634174

使用Devtools工具调试前端页面

Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过 setWebDebuggingAccess() 接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页，设备需为4.1.0及以上版本。

使用DevTools工具，可以执行以下步骤：

在应用代码中开启Web调试开关，具体如下：

// xxx.ets
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

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

  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

开启调试功能需要在DevEco Studio应用工程hap模块的module.json5文件中增加如下权限，添加方法请参考在配置文件中声明权限。

"requestPermissions":[
   {
     "name" : "ohos.permission.INTERNET"
   }
 ]

将设备连接上电脑，在电脑端配置端口映射，配置方法如下：

//查找 devtools 远程调试所需的 domain socket 名称，该名称与进程号有关，重启调试应用后，需要重复此步骤，以完成端口转发
cat /proc/net/unix | grep devtools
// 添加映射 [pid] 替换成实际的进程id
hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]
// 查看映射 
hdc fport ls
示例：
hdc shell
cat /proc/net/unix | grep devtools
//显示 webview_devtools_remote_3458
exit
hdc fport tcp:9222 localabstract:webview_devtools_remote_3458
hdc fport ls

在电脑端Chrome浏览器地址栏中输入chrome://inspect/#devices，页面识别到设备后，就可以开始页面调试。调试效果如下：

图1 页面调试效果图

多应用调试请在调试地址内Devices中的configure添加多个端口号以同时调试多个应用：

图2 添加端口号效果图

windows便捷脚本，请复制以下信息建立bat文件，开启调试应用后执行：

@echo off
setlocal enabledelayedexpansion

:: Initialize port number and PID list
set PORT=9222
set PID_LIST=

:: Get the list of all forwarded ports and PIDs
for /f "tokens=2,5 delims=:_" %%a in ('hdc fport ls') do (
    if %%a gtr !PORT! (
        set PORT=%%a
    )
    for /f "tokens=1 delims= " %%c in ("%%b") do (
        set PID_LIST=!PID_LIST! %%c
    )
)

:: Increment port number for next application
set temp_PORT=!PORT!
set /a temp_PORT+=1

最低0.47元/天解锁文章