鸿蒙实战开发-如何使用Devtools工具调试前端页面

Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动装备前端页面的能力。开发者通过setWebDebuggingAccess()接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动装备上的前端网页，装备需为4.1.0及以上版本。
使用DevTools工具，可以实行以下步骤：
1.在应用代码中开启Web调试开关，详细如下：

1. // xxx.ets
2. import web_webview from '@ohos.web.webview';
4. @Entry
5. @Component
6. struct WebComponent {
7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
8.   aboutToAppear() {
9.     // 配置Web开启调试模式
10.     web_webview.WebviewController.setWebDebuggingAccess(true);
11.   }
12.   build() {
13.     Column() {
14.       Web({ src: 'www.example.com', controller: this.controller })
15.     }
16.   }
17. }

复制代码

2.开启调试功能需要在DevEco Studio应用工程的module.json5文件中增加权限, 详细如下：

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

复制代码

3.将装备连接上电脑，在电脑端配置端口映射，配置方法如下：

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

复制代码

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

复制代码

1. // 添加映射 [pid] 替换成实际的browser进程id
2. hdc fport tcp:9222 localabstract:webview_devtools_remote_[pid]
3. // 查看映射
4. hdc fport ls

复制代码

1. 示例：
2. hdc shell
3. ps -ef | grep "myapp"
4. //显示browser进程和render进程
5. 20020131     45151   681 3 16:39:05 ?     00:00:04 com.example.myapplication
6. 1000010      45221   780 4 16:39:05 ?     00:00:05 com.example.myapplication
7. exit
8. hdc fport tcp:9222 localabstract:webview_devtools_remote_45151
9. hdc fport ls

复制代码

4.在电脑端Chrome欣赏器地址栏中输入chrome://inspect/#devices，页面辨认到装备后，就可以开始页面调试。调试结果如下：
图1 页面调试结果图

如果大家还没有掌握鸿蒙，如今想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私掩护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于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.……

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。