如何解决HarmonyOS鸿蒙Next中Web组件无法使用Devtools工具进行调试问题

【问题现象】

在弹窗中加载Web组件，点开弹窗显示Web组件无异常，但使用Devtools无法捕获该Web组件内容。

【背景知识】

使用Devtools工具调试前端页面

【定位思路】

1. 先检查是否设置了setWebDebuggingAccess(true)，这是使用devTools调试的前提条件，发现代码中有开启。
2. 检查setWebDebuggingAccess(true)是否生效，可以通过在样机上写demo的方式抓取布局，发现新写的demo可以正常捕获布局。
3. 排查以上可能的原因对比发现，问题代码中的setWebDebuggingAccess(true)和目标Web组件嵌套了一层@Builder布局。

【解决方案】

将WebviewController.setWebDebuggingAccess(true)设置在Web组件的父布局中，不要跨越层级设置。

正确的设置方式，问题代码如下：

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })
  webcontroller: web_webview.WebviewController = new web_webview.WebviewController();

  aboutToAppear(): void {
    try {
      // 开启debugging的位置和web在一个组件内，都在CustomDialogExample 中
      web_webview.WebviewController.setWebDebuggingAccess(true);
    } catch (error) {
      let e: business_error.BusinessError = error as business_error.BusinessError;
      console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
    }
  }

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