鸿蒙模拟器WebView使用Chrome inspect调试

guo_zhen_qian2026-05-12 14:19

最近在调研一个鸿蒙的跨端项目，采用H5方案，需要调试一些页面，要用到webview的调试，记录一下模拟器如何打开webview调试

官网这篇文章说的也很清楚，直接看官网的文章也可以

1、配置鸿蒙环境

https://blog.csdn.net/guo_zhen_qian/article/details/145019360可以参考我这篇文章，首先配置好鸿蒙环境，至少hdc得生效

TypeScript 复制代码

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

创建完之后用hdc看看设备列表

bash 复制代码

➜  ~ hdc list targets                                              
127.0.0.1:5555

这个比较重要，每次你的app重启之后都需要配置一遍

一定把你的app run起来再执行以下操作

进入hdc shell

bash 复制代码

hdc shell

执行cat /proc/net/unix | grep devtools查询arkweb的domain socket

bash 复制代码

cat /proc/net/unix | grep devtools

退出 hdc shell

bash 复制代码

exit

执行端口转发hdc fport tcp:9222 localabstract:webview_devtools_remote_你的端口

bash 复制代码

hdc fport tcp:9222 localabstract:webview_devtools_remote_你的端口

检查端口转发是否成功 hdc fport ls

bash 复制代码

hdc fport ls

执行结果

执行成功

浏览器输入 chrome://inspect/#devices

点inspect 就可以进入调试模式了