鸿蒙Flutter实战：04-如何使用DevTools调试Webview

合集 - 鸿蒙 Flutter 实战(15)

1.flutter 鸿蒙适配指南2024-10-172.鸿蒙Flutter实战：08-如何调试代码2024-10-233.鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙2024-10-234.鸿蒙Flutter实战：07混合开发2024-10-235.鸿蒙Flutter实战：02-Windows环境搭建踩坑指南2024-10-22

6.鸿蒙Flutter实战：04-如何使用DevTools调试Webview2024-10-22

7.鸿蒙Flutter实战：05-使用第三方插件2024-10-228.鸿蒙Flutter实战：06-使用ArkTs开发Flutter鸿蒙插件2024-10-229.鸿蒙Flutter实战：01-搭建开发环境2024-10-2110.鸿蒙Flutter实战：03-鸿蒙Flutter开发中集成Webview2024-10-2211.鸿蒙Flutter实战：10-常见问题集合2024-10-2312.鸿蒙Flutter实战：11-使用 Flutter SDK 3.22.02024-11-0113.鸿蒙Flutter实战：12-使用模拟器开发调试2024-11-1014.鸿蒙Flutter实战：13-鸿蒙应用打包上架流程2024-11-1015.鸿蒙Flutter实战：14-现有Flutter 项目支持鸿蒙 II2024-12-26

收起

鸿蒙 Flutter 如何使用 DevTools 调试 Webview

在《鸿蒙 Flutter 开发中集成 Webview》，介绍了如果在 Flutter 中集成 Webview. 本文则为 Webview 的调试方法。

配置 Webview

CustomView.ets 文件中，在生命周期aboutToAppear处配置允许调试：

  aboutToAppear() {
    webview.WebviewController.setWebDebuggingAccess(true);
  }

找到 devtools 的端口

运行 App，使用 hdc 命令连接设备，查找相关端口

# 连接设备
hdc shell

# 找到相关进程
cat /proc/net/unix | grep devtools

#0: 00000002 0 10000 1 1 2318187 @webview_devtools_remote_43406
#0: 00000002 0 10000 1 1 20785 @webview_devtools_remote_6312

如上面所示，webview_devtools_remote_43406 即为我们要调试的页面

开启端口转发

将设备中的端口转发到开发电脑上

hdc fport tcp:9222 localabstract:webview_devtools_remote_43406

# Forwardport result:OK

在 Chrome 中找打 Webview 并开始调试

在 Chrome 中打开 chrome://inspect/#devices页面，观察页面中RemoteTarget 处出现了相关页面

选择需要调度的页面，点击 inspect，弹出 DevTools 窗口，开启页面调度

其他

如果要在 Webview 注入 js 代码，可在 Web 组件配置处使用runJavaScript方法注入 JavaScript 脚本，如

    Web({src: 'https://baidu.com', controller: this.webviewController})
      .domStorageAccess(true)
      .fileAccess(true)
      .mixedMode(MixedMode.All)
      .databaseAccess(true)
      .javaScriptAccess(true)
      .onPageEnd(() => {
          this.webviewController.runJavaScript("document.querySelector('meta[http-equiv=\"Content-Security-Policy\"]').remove()");
      })

参考资料

• ArkWeb API
• ArkWeb介绍