HarmonyOS开发之使用Chrome DevTools实现远程调试-CFANZ编程社区

一、环境准备

1. 开发工具要求

• DevEco Studio 3.1+ • Chrome 浏览器（推荐最新版），设备版本需要4.1.0以上

2. 设备要求

· HarmonyOS 4.1.0及以上版本的设备

· 已开启开发者模式（设置 > 关于本机 > 连续点击版本号7次）

· 打开USB调试

二、配置应用调试权限

1. 添加INTERNET权限

在module.json5中添加权限声明：

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

2. 开启Web调试模式

调试网页前，需要应用侧代码调用setWebDebuggingAccess()接口开启Web调试开关：

// WebComponent.ets
import webview from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  aboutToAppear() {
    // 开启调试模式
    webview.WebviewController.setWebDebuggingAccess(true);
  }

  build() {
    Column() {
      Web({
        src: 'https://developer.huawei.com/',
        controller: this.controller
      })
    }
  }
}

三、设备连接与配置

1. 设备连接流程

通过USB连接设备与电脑
开启USB调试（设置 > 系统 > 开发者选项 > USB调试）

2. 验证设备连接

执行命令检查设备识别：

hdc list targets

成功连接示例：

Attached devices:
123456789ABCDEF device

四、端口转发配置

1. 查询调试端口

进入hdc shell后执行：

cat /proc/net/unix | grep devtools

典型返回结果：

0000000000000000: 00000003 00000000 00000000 0001 01 1942 @webview_devtools_remote_38532

2. 设置端口转发

退出shell后执行（替换进程号）：

hdc fport tcp:9222 localabstract:webview_devtools_remote_38532

3. 验证端口映射

hdc fport ls

成功示例：

tcp:9222 -> localabstract:webview_devtools_remote_38532

五、Chrome调试配置

1. 打开调试页面

访问：chrome://inspect/#devices

2. 配置调试端口

点击【Configure】
添加localhost:9222 （注：此处需替换为实际示意图）

六、调试实战演示

1. 加载调试页面

当Web组件加载页面后，调试页面将显示可调试目标：

2. 开始调试

点击【inspect】打开完整调试工具：

七、自动化脚本（Windows）

创建web_debug.bat自动化端口转发：

@echo off
setlocal enabledelayedexpansion
set PORT=9222
set PID_LIST=

for /f "tokens=2,5 delims=:_" %%a in ('hdc fport ls') do (
   if %%a gtr !PORT! (
      set PORT=%%a
      for /f "tokens=1 delims= " %%c in ("%%b") do (
         set PID_LIST=!PID_LIST! %%c
         set /a temp_PORT=!PORT!+1
         set PORT=!temp_PORT!
      )
   )
)

for /f "tokens=*" %%a in ('hdc shell "cat /proc/net/unix | grep devtools"') do (
   set SOCKET_NAME=%%a
   for /f "delims=_ tokens=4" %%b in ("!SOCKET_NAME!") do set PID=%%b
   echo !PID_LIST! | findstr /C:"!PID!" > nul
   if errorlevel 1 (
      hdc fport tcp:!PORT! localabstract:webview_devtools_remote_!PID!
      set PID_LIST=!PID_LIST! !PID!
      set /a temp_PORT=!PORT!+1
      set PORT=!temp_PORT!
   )
)

常见问题排查

问题现象	解决方案
Chrome无法发现设备	1. 检查端口转发命令 2. 确认Web组件已加载页面
调试连接不稳定	1. 重启hdc服务 2. 重新插拔USB线
权限错误	检查module.json5权限声明格式