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

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

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

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

web_webview.WebviewController.setWebDebuggingAccess(true);
  • 1.

(2)配置网络权限

"requestPermissions":[
   {
     "name" : "ohos.permission.INTERNET"
   }
 ]
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

(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
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

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

分享
微博
QQ
微信
回复
2024-08-07 15:24:18


相关问题
使用Devtools调试webview
680浏览 • 1回复 待解决
HarmonyOS WebView组件前端页面调试
903浏览 • 1回复 待解决
HarmonyOS Devtools 做Web调试
517浏览 • 1回复 待解决
HarmonyOS DevTools调试网页中找不到设备
1130浏览 • 1回复 待解决
前端页面和原生页面如何进行通信?
1018浏览 • 1回复 待解决
hdc工具支持远程调试吗?
4192浏览 • 1回复 待解决
HarmonyOS 调试工具执行命令异常
1021浏览 • 1回复 待解决
HarmonyOS 应用访问前端页面方法
448浏览 • 1回复 待解决
HarmonyOS RN调试工具flipper连接不上
697浏览 • 1回复 待解决
性能调试工具及其滑动丢帧案例分享
1467浏览 • 1回复 待解决
如何使用gdb调试native应用
1199浏览 • 1回复 待解决
如何使用发布证书进行调试
949浏览 • 1回复 待解决
如何使用发布证书进行调试
886浏览 • 1回复 待解决