使用DevTools工具调试前端页面

介绍

1. Web组件支持使用DevTools工具调试前端页面。DevTools是Web前端开发调试工具，支持在电脑上调试移动设备前端页面。开发者通过setWebDebuggingAccess()接口开启Web组件前端页面调试能力，使用DevTools在电脑上调试移动前端网页，设备需为4.1.0及以上版本。
2. 本工程主要实现了对以下指南文档中使用DevTools工具调试前端页面示例代码片段的工程化，主要目标是帮助开发者如何使用Chrome浏览器调试Web页面。
3. 调试网页前，需要应用侧代码调用setWebDebuggingAccess()接口开启Web调试开关。 如果没有开启Web调试开关，则DevTools无法发现被调试的网页。

效果预览

不涉及。

使用说明

1. 在应用代码中开启Web调试开关，应用需要调用setWebDebuggingAccess20+接口，设置TCP Socket端口号并启用Web调试功能。
2. 开启调试功能需要在DevEco Studio应用工程hap模块的module.json5文件中增加如下权限。
3. 在Chrome浏览器上打开调试工具页面,端口需要配置成接口中指定的port端口。

工程目录

├── entry
│   └── src
│       └── main
│           ├── ets                                 // ArkTS代码区
│           │   ├── entryability
│           │   │   └── EntryAbility.ets            // 入口类
│           │   ├── entrybackupability
│           │   │   └── EntryBackupAbility.ets      // 备份恢复框架
│           │   └── pages
│           │       └── Index.ets                   // 主页
│           │       └── WebDebuggingWithWiFi.ets    // 无线调试
│           │       └── WebDebuggingWithUSB.ets     // USB连接调试
│           └── resources                           // 应用资源文件

具体实现

• 使用DevTools工具调试前端页面。
• 在应用代码中开启Web调试开关，应用需要调用setWebDebuggingAccess20+接口，设置TCP Socket端口号并启用Web调试功能。
• 无线调试直接通过接口设置端口号。
• USB连接调试。ArkWeb内核将启动一个domain socket的监听，以此实现DevTools对网页的调试功能。 Chrome浏览器无法直接访问到设备上的domain socket， 因此需要将设备上的domain socket转发到电脑上。
• 在Chrome浏览器上打开调试工具页面，配置ip和端口号。
• Chrome的调试页面将显示待调试的网页。

相关权限

不涉及。

依赖

不涉及。

约束与限制

1. 本示例仅支持标准系统上运行, 支持设备：华为手机。

2. HarmonyOS系统：HarmonyOS 5.0.5 Release及以上。

3. DevEco Studio版本：6.0.0 Release及以上。

4. HarmonyOS SDK版本：HarmonyOS 6.0.0 Release SDK及以上。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo ArkWebKit/ArkWebDebuggingWithDevtools > .git/info/sparse-checkout
git remote add origin https://gitee.com/harmonyos_samples/guide-snippets.git
git pull origin master