前提条件

需要开启 网页调试setWebDebuggingAccess()

aboutToAppear(): void {  
  // 启动网页调试功能  
  webview.WebviewController.setWebDebuggingAccess(true);  
  
  // API20 支持 无线网页调试  
  // webview.WebviewController.setWebDebuggingAccess(true, 8888); // 8888 为暴露的端口号  
}

方式一：可视化调试工具 - ECHO

官网地址： https://echo.liriliri.io/

应用主页截图

应用网页调试列表

具体操作步骤如下图

方式二：DevEco 自动 Web Debug 映射浏览器调试

1. 打开项目模块的配置选项

2. 勾选 Auto WebView Debug

3. 打开 Chrome 浏览器 地址栏输入 chrome://inspect/#devices
4. 点击 Configure 映射端口号

5. 点击 inspect 进入调试页面
   
   

方式三：手动映射浏览器调试

具体流程参考文档： 将设备连接至电脑

参考文档

• 使用DevTools工具调试前端页面