目录一、核心原理二、前置代码开启 Web 调试必须第一步方式 1全局开启推荐整个应用所有 Web 页面生效方式 2组件内单独开启单页面生效权限补充三、调试方式USB 有线 步骤 1设备开启开发者模式步骤 2DevEco Studio 一键自动转发懒人首选不用敲命令步骤 3手动 hdc 命令转发IDE 自动转发失效时用Mac 终端直接执行步骤 4Chrome 连接调试面板四、Chrome DevTools 可实现的全部调试功能解决 H5 所有问题鸿蒙内嵌 H5 页面唯一官方标准调试工具Chrome DevTools谷歌浏览器调试面板搭配 DevEco Studio 自动转发、hdc 命令、日志工具下面分全套操作、两种调试模式、辅助工具、踩坑点完整说明。一、核心原理鸿蒙 Web 组件ArkWeb底层基于 Chromium 内核支持远程调试协议需要代码开启调试开关 端口转发 Chrome 连接三步即可像调试网页一样审查元素、抓接口、打断点、看 console 日志二、前置代码开启 Web 调试必须第一步方式 1全局开启推荐整个应用所有 Web 页面生效在页面aboutToAppear或EntryAbility的onWindowStageCreate中全局开启仅 Debug 包启用上线 Release 务必关闭。import { webview } from kit.ArkWeb; Entry Component struct WebPage { controller: webview.WebviewController new webview.WebviewController(); aboutToAppear() { // 开启USB调试模式全版本通用 webview.WebviewController.setWebDebuggingAccess(true); } build() { Web({ src: https://xxx.com/h5, controller: this.controller }) } }方式 2组件内单独开启单页面生效Web({ src: $rawfile(local.html), controller: this.controller }) .webDebuggingAccess(true)权限补充模块module.json5必须声明网络权限否则调试连接失败requestPermissions: [ {name: ohos.permission.INTERNET} ]三、调试方式USB 有线 步骤 1设备开启开发者模式设置 → 关于本机 → 连续点击版本号7 次开启开发者模式设置 → 系统和更新 → 开发者选项 → 打开USB 调试USB 连接 Mac/Windows 电脑设备弹窗授权调试步骤 2DevEco Studio 一键自动转发懒人首选不用敲命令从 DevEco Studio 5.0.5 开始内置Auto WebView Debug自动端口转发顶部菜单Run → Edit Configurations切换到对应 hap 模块在 General 栏勾选Auto WebView Debug重新运行 App打开 Web 页面IDE 自动完成 hdc 端口映射Run 控制台打印转发端口9222步骤 3手动 hdc 命令转发IDE 自动转发失效时用Mac 终端直接执行如果步骤2 中 Run 控制台打印转发端口 9222则不用考虑步骤3# 1. 查看连接设备 hdc list targets # 2. 端口映射 本地9222 - 设备Web调试端口 hdc fport tcp:9222 tcp:9222 # 3. 验证端口是否转发成功 hdc fport ls多页面 / 多 Web 进程端口冲突时可查询设备调试 socket 手动映射# 查设备内web调试进程标识 hdc shell cat /proc/net/unix | grep devtools # 映射示例替换末尾数字为查到的进程号 hdc fport tcp:9222 localabstract:webview_devtools_remote_38532步骤 4Chrome 连接调试面板电脑 Chrome 地址栏输入chrome://inspect/#devices勾选Discover USB devices、Discover network targets下方Remote Target会出现你的 H5 页面点击inspect打开完整调试面板四、Chrome DevTools 可实现的全部调试功能解决 H5 所有问题面板作用鸿蒙 Web 高频场景Elements查看 / 修改 DOM、CSS排查适配、白屏、样式错乱、刘海遮挡Console查看 h5console.log/ 报错执行 JS 和 ArkWeb 桥接测试Network抓全部接口请求、HTTPS 明文查看、看 404 / 跨域、上传下载SourcesH5 JS 源码断点、单步调试、定位 JS 崩溃白屏根源Application查看 localStorage/cookie、缓存、本地存储Performance页面加载性能、渲染卡顿、内存泄漏分析MemoryH5 内存溢出、页面切换残留占用排查
