如何使用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
相关问题
前端页面和原生页面如何进行通信?
102浏览 • 1回复 待解决
hdc工具支持远程调试吗?
3018浏览 • 1回复 待解决
HarmonyOS 调试工具执行命令异常
85浏览 • 1回复 待解决
如何使用发布证书进行调试
144浏览 • 1回复 待解决
如何使用gdb调试native应用
473浏览 • 1回复 待解决
如何使用Charles工具抓包
1936浏览 • 1回复 待解决
如何使用发布证书进行调试
102浏览 • 1回复 待解决
HarmonyOS 如何使用发布证书进行调试
191浏览 • 1回复 待解决
如何申请使用DevEco Studio工具
9183浏览 • 2回复 待解决
性能调试工具及其滑动丢帧案例分享
509浏览 • 1回复 待解决
如何在HarmonyOS中调试h5页面
555浏览 • 1回复 待解决
如何使用远程真机调试和运行应用
4752浏览 • 1回复 待解决
工具类里 怎么跳转或打开页面呢?
3498浏览 • 1回复 待解决
前端手动刷新显示Rdb数据
565浏览 • 1回复 待解决
日志工具类的使用方法
140浏览 • 1回复 待解决
无法正常使用开发工具Pycharm
30252浏览 • 47回复 已解决