如何使用DevTools工具调试前端页面?

如何使用DevTools工具调试前端页面?

HarmonyOS
2024-08-07 10:33:18
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
coolhead2000

(1)开启Web组件前端调试能力

web_webview.WebviewController.setWebDebuggingAccess(true);

(2)配置网络权限

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

(3)设备连接上电脑,在电脑端配置端口映射,配置方法如下:

//查找 devtools 远程调试所需的应用browser进程号,重启调试应用后,需要重复此步骤,以完成端口转发 hdc shell ps -ef | grep "应用包名" exit

// 添加映射 [pid] 替换成实际的browser进程id
hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]
// 查看映射 
hdc fport ls
示例:
hdc shell
ps -ef | grep "myapp"
//显示browser进程和render进程
20020131     45151   681 3 16:39:05 ?     00:00:04 com.example.myapplication
1000010      45221   780 4 16:39:05 ?     00:00:05 com.example.myapplication
exit
hdc fport tcp:9222 localabstract:webview_devtools_remote_45151
hdc fport ls

(4)电脑端Chrome浏览器地址栏中输入chrome://inspect/#devices,页面识别到设备后,就可以开始页面调试。

分享
微博
QQ
微信
回复
2024-08-07 15:24:18
相关问题
使用Devtools调试webview
127浏览 • 1回复 待解决
HarmonyOS WebView组件前端页面调试
127浏览 • 1回复 待解决
HarmonyOS DevTools调试网页中找不到设备
384浏览 • 1回复 待解决
前端页面和原生页面如何进行通信?
287浏览 • 1回复 待解决
hdc工具支持远程调试吗?
3295浏览 • 1回复 待解决
HarmonyOS 调试工具执行命令异常
371浏览 • 1回复 待解决
如何使用gdb调试native应用
637浏览 • 1回复 待解决
如何使用发布证书进行调试
331浏览 • 1回复 待解决
如何使用Charles工具抓包
2241浏览 • 1回复 待解决
性能调试工具及其滑动丢帧案例分享
752浏览 • 1回复 待解决
如何使用发布证书进行调试
248浏览 • 1回复 待解决
HarmonyOS 如何使用发布证书进行调试
564浏览 • 1回复 待解决
如何申请使用DevEco Studio工具
9396浏览 • 2回复 待解决
如何使用 DevEco Studio 调试鸿蒙应用?
53浏览 • 0回复 待解决
如何在HarmonyOS中调试h5页面
796浏览 • 1回复 待解决