鸿蒙实战开发-如何使用Devtools工具调试前端页面
Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动装备前端页面的能力。开发者通过setWebDebuggingAccess()接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动装备上的前端网页，装备需为4.1.0及以上版本。使用DevTools工具，可以实行以下步骤：
1.在应用代码中开启Web调试开关，详细如下：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
aboutToAppear() {
// 配置Web开启调试模式
web_webview.WebviewController.setWebDebuggingAccess(true);
}
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
2.开启调试功能需要在DevEco Studio应用工程的module.json5文件中增加权限, 详细如下：
"requestPermissions":[
{
"name" : "ohos.permission.INTERNET"
}
]
3.将装备连接上电脑，在电脑端配置端口映射，配置方法如下：
//查找 devtools 远程调试所需的应用browser进程号，重启调试应用后，需要重复此步骤，以完成端口转发
hdc shell
ps -ef | grep "应用包名"
exit
//查找 devtools 远程调试所需的应用browser进程号，重启调试应用后，需要重复此步骤，以完成端口转发
hdc shell
ps -ef | grep "应用包名"
exit
// 添加映射 替换成实际的browser进程id
hdc fport tcp:9222 localabstract:webview_devtools_remote_
// 查看映射
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，页面辨认到装备后，就可以开始页面调试。调试结果如下：
图1 页面调试结果图
https://i-blog.csdnimg.cn/blog_migrate/18d92cc271ae0f71e88ff1aebb4e77ad.png
如果大家还没有掌握鸿蒙，如今想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
https://i-blog.csdnimg.cn/blog_migrate/69dc0874385ae600a52fa11996546a67.png
OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
https://i-blog.csdnimg.cn/blog_migrate/76dfe2dae3dba70b8d165b51e05cc954.png
《鸿蒙开发学习手册》：
如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.基本概念
2.构建第一个ArkTS应用
3.……
https://i-blog.csdnimg.cn/blog_migrate/0cb460409a7f960dd2d03ad7fe7059f4.png#pic_center
开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
https://i-blog.csdnimg.cn/blog_migrate/91cf12d303d2e121cbb15315dcb252a5.png#pic_center
基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3
1.Ability开发
2.UI开发
3.公共事件与关照
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.装备管理
12.装备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
https://i-blog.csdnimg.cn/blog_migrate/97029297754f66c15a8abd66122f0f6b.png#pic_center
鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG
https://i-blog.csdnimg.cn/blog_migrate/12157f558bab5d72f5455ba7b7de26be.png#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]