鸿蒙开发必修课:HDC命令行远程调试WebView全攻略

在鸿蒙应用开发过程中，你是否遇到过这样的困境：前端页面在浏览器中运行正常，但嵌入到App的WebView中却出现了各种奇怪的问题？当你试图定位问题时，却发现只能在手机上"抓瞎"式地查看效果，无法像PC端那样方便地使用开发者工具。

今天，我将为你分享一套硬核技能——通过HDC命令行实现鸿蒙设备WebView的远程调试，让你能够像使用本地Chrome开发者工具一样，实时调试应用内的网页内容。

一、调试前的准备工作

在开始之前，请确保你的开发环境满足以下条件：

1. 鸿蒙SDK已安装
   ：确保已安装DevEco Studio或单独的HDC工具
2. 环境变量配置
   ：HDC命令已添加到系统PATH中
3. 设备准备
   ：鸿蒙设备已开启开发者模式，并启用USB调试
4. 应用配置
   ：你的应用已在代码中开启了Web调试模式

应用代码配置

在你的鸿蒙应用代码中，需要先开启Web调试开关。打开对应的.ets文件，添加以下代码：

import { webview } from '@kit.ArkWeb';@Entry@Componentstruct WebComponent {  controller: webview.WebviewController = new webview.WebviewController();  aboutToAppear() {    // 开启Web调试模式    webview.WebviewController.setWebDebuggingAccess(true);  }  build() {    Column() {      Web({        src: 'https://www.example.com',        controller: this.controller      })    }  }}

同时，在module.json5文件中添加网络权限：

{  "module": {    "requestPermissions": [      {        "name": "ohos.permission.INTERNET"      }    ]  }}

二、实战调试：四个步骤搞定远程调试

第一步：确认设备连接

首先，我们需要确认鸿蒙设备已经通过USB线连接到电脑，并且USB调试功能已开启。

在终端中执行以下命令：

hdc list targets

预期输出：如果设备连接成功，会显示设备的序列号，例如：

5VXUN25822G00972

常见问题：如果输出为[Empty]，请检查：

• USB线是否支持数据传输
• 设备是否已开启开发者选项
• 电脑是否已安装对应的USB驱动

第二步：查找WebView调试端口

每个运行中的WebView都会暴露一个用于调试的Unix域套接字（Unix Domain Socket）。我们需要找到这个套接字的名称。

执行以下命令：

hdc shell cat /proc/net/unix | grep devtools

预期输出：你会看到类似以下格式的结果：

0: 00000002 0 10000 1 1 3002019 @webview_devtools_remote_203000: 00000002 0 10000 1 1 678807 @webview_devtools_remote_5755

这里的webview_devtools_remote_20300和webview_devtools_remote_5755就是我们要找的调试句柄。数字部分代表进程ID。

小贴士：每次重新启动应用后，进程ID可能会变化，需要重新执行此步骤查找新的句柄名称。

第三步：建立通信桥梁（端口映射）

这是整个调试流程中最关键的一步。我们需要将PC上的一个TCP端口映射到鸿蒙设备上的Unix域套接字。

执行以下命令：

hdc fport tcp:9222 localabstract:webview_devtools_remote_20300

命令解析：

• tcp:9222
  ：PC端的端口号，你可以根据需要修改（如9223、9224等）
• localabstract:webview_devtools_remote_20300
  ：设备端的调试句柄（第二步中查找到的）

成功提示：如果配置成功，会返回：

Forwardport result:OK

注意：如果需要调试另一个WebView进程，需要重新执行此命令，替换后面的句柄名称。

第四步：Chrome开启"上帝视角"

现在到了见证奇迹的时刻！打开PC上的Chrome浏览器，在地址栏输入：