华为鸿蒙手机通过Chrome DevTools调试App内WebView页面

 

 

📱 第一步：设备与基础环境准备

在开始之前，请确保手机和电脑端已做好基础准备。

准备事项	具体操作
手机端	进入 设置 > 关于手机，连续点击“版本号”7次开启开发者模式。然后进入 设置 > 系统和更新 > 开发人员选项，开启 “USB调试”。
电脑端 (Mac)	确保已安装 DevEco Studio。HDC工具通常随其安装，路径为 /Applications/DevEco-Studio.app/Contents/sdk/.../toolchains/。请参考你之前成功配置的经验，在终端使用 hdc -h 验证命令可用。

⚙️ 第二步：应用工程配置（关键）

这是开启WebView调试权限的核心，必须在你的鸿蒙应用源代码中完成。

1. 代码中启用调试：
   在你的WebView所属的ArkTS文件（如Entry.ets）中，导入模块并开启调试开关。

import web_webview from '@ohos.web.webview';
// 在合适的生命周期函数中调用，例如 aboutToAppear
web_webview.WebviewController.setWebDebuggingAccess(true);

2. 配置网络权限：
   在项目的 module.json5 配置文件中，添加网络权限。

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

完成以上两步后，请务必重新编译并安装应用到你的鸿蒙手机。

🔌 第三步：连接手机并映射调试端口

现在，通过HDC命令建立手机和Chrome之间的调试桥梁。

1. 连接设备：使用USB数据线连接手机和Mac。在终端执行 hdc list targets，确认设备已连接。
2. 查询调试端口：需要获取你应用中WebView进程的唯一标识。

# 进入设备Shell
hdc shell
# 查找WebView调试进程
cat /proc/net/unix | grep devtools

成功后，会显示类似 webview_devtools_remote_38532 的结果，末尾的数字（如38532）就是进程PID，请记下。

3. 执行端口映射：退出Shell（输入 exit），执行以下命令进行端口转发（请将 38532 替换为你的实际PID）。

hdc fport tcp:9222 localabstract:webview_devtools_remote_38532

🛠️ 第四步：在Chrome DevTools中调试

现在，你可以在电脑端的Chrome浏览器中进行调试了。

1. 在Chrome地址栏输入：chrome://inspect/#devices
2. 确保 “Discover network targets” 被勾选，并点击其旁的 “Configure…” 按钮，添加 localhost:9222。
3. 稍等片刻，页面下方 “Remote Target” 区域会显示出你的手机和其中可调试的WebView页面。
4. 点击你想要调试的页面下方的 “inspect” 按钮，就会弹出一个完整的Chrome开发者工具窗口，你可以像调试普通网页一样进行元素检查、网络监控、控制台调试等操作。

💡 常见问题与技巧

• 查询不到端口：如果 cat /proc/net/unix | grep devtools 没有输出，请确认：1) 应用代码中的 setWebDebuggingAccess(true) 已执行且应用已重装；2) 可尝试执行 hdc shell param set web.debug.devtools true 全局开启调试；3) 确保鸿蒙系统为4.1.0或以上版本。
• Chrome中看不到设备：检查端口映射命令的PID是否正确；确认Chrome中已正确配置 localhost:9222。
• 安全提示：setWebDebuggingAccess(true) 务必仅用于开发调试，在发布应用前需要关闭此功能。
• 进程变化：如果应用重启，WebView的PID可能会改变，需要重新执行第三步的查询和端口映射。