鸿蒙开发使用DevTools工具调试ArkWeb组件中的前端页面

在鸿蒙next上进行混合开发，如何调适ArkWeb组件中的前端页面是个问题，以下是在pc端开启ArkWeb组件前端调试的具体步骤：

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

应用代码开启Web调试开关

调试网页前，需要应用侧代码调用setWebDebuggingAccess()接口开启Web调试开关。

如果没有开启Web调试开关，则DevTools无法发现被调试的网页。

在应用代码中开启Web调试开关，应用需要调用setWebDebuggingAccess20+接口，设置TCP Socket端口号并启用Web调试功能。

TypeScript 复制代码

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

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

  aboutToAppear(): void {
    try {
      // 配置Web开启无线调试模式，指定TCP Socket的端口。
      webview.WebviewController.setWebDebuggingAccess(true, 8888);
    } catch (error) {
      console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
    }
  }

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

说明

代码中使用的8888端口仅作为示例展示，开发者使用过程中，应保证端口号可以被应用使用。如果因为端口被占用或者应用无权限使用等因素导致端口无法被应用使用，会导致接口抛出异常或者ArkWeb无法开启调试模式。

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

XML 复制代码

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

在Chrome浏览器上打开调试工具页面

在电脑端Chrome浏览器地址栏中输入调试工具地址 chrome://inspect/#devices 并打开该页面。
修改Chrome调试工具的配置。

确保已勾选 "Discover network targets"，以便从指定的IP地址和端口号发现被调试网页。

(1) 点击 "Configure" 按钮。

(2) 在 "Target discovery settings" 中添加被调试设备的IP地址和setWebDebuggingAccess20+接口中指定的port端口，比如：192.168.0.3:8888。

说明

调试工具和被调试设备要在同一局域网下，并且能够相互访问。如果被调试设备有多个IP地址，要使用与调试工具同一个网段的IP地址。

等待发现被调试页面

如果前面的步骤执行成功，Chrome的调试页面将显示待调试的网页。

开始网页调试

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-debugging-with-devtoolshttps://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-debugging-with-devtools