HarmonyOS ArkWeb 系列之用 Chrome DevTools 调试手机上的网页

文章目录开启调试模式的方法USB 调试完整代码权限配置用 Chrome DevTools 连接调试USB 调试的完整流程图DevTools 能做什么重要警告上线前必须关闭调试踩坑记录写在最后做 Web 内嵌页开发有个痛点页面跑在手机上但 DevTools 在电脑上。想调试 JS、查元素、看网络请求只能在代码里到处加console.log调完还要一条条删掉。HarmonyOS 的 Web 组件支持接入 Chrome DevTools 进行远程调试一行代码开启体验和在 Chrome 桌面端调试本地页面没什么区别。开启调试模式的方法核心就是一个静态方法调用webview.WebviewController.setWebDebuggingAccess(true);这个方法是静态方法不是某个控制器实例的方法所以不需要先创建 Controller 就能调用。调用时机通常是在页面的aboutToAppear()生命周期里确保 Web 组件加载之前就开启调试。USB 调试完整代码import{webview}fromkit.ArkWeb;EntryComponentstruct WebComponent{controller:webview.WebviewControllernewwebview.WebviewController();aboutToAppear():void{// 在组件即将出现前开启 Web 调试模式// 注意这是静态方法用类名调用不是 this.controller.xxxwebview.WebviewController.setWebDebuggingAccess(true);}build(){Column(){Web({src:https://www.example.com,controller:this.controller}).width(100%).height(100%)}}}权限配置调试模式需要ohos.permission.INTERNET权限因为调试协议走网络通信在module.json5里声明{module:{requestPermissions:[{name:ohos.permission.INTERNET}]}}用 Chrome DevTools 连接调试步骤一USB 连接设备在 HarmonyOS 设备上进入「设置 → 关于手机 → 版本号」连续点击 7 次开启开发者模式回到「设置 → 系统 → 开发者选项」开启「USB 调试」用 USB 线连接手机和电脑授权 USB 调试权限步骤二安装并运行应用把包含setWebDebuggingAccess(true)的应用安装到设备并运行打开包含 Web 组件的页面。步骤三用 Chrome 打开调试入口在电脑的 Chrome 浏览器地址栏输入chrome://inspect/#devices步骤四发现设备并调试Chrome 应该能自动发现通过 USB 连接的 HarmonyOS 设备以及上面运行的 Web 组件页面。点击页面下方的「inspect」按钮就会弹出完整的 Chrome DevTools 窗口。USB 调试的完整流程图DevTools 能做什么连接成功后可以使用 Chrome DevTools 的全部功能DevTools 面板能做什么Elements查看/修改 DOM 结构和 CSS 样式Console执行 JS查看console.log输出Sources查看 JS 源码设置断点单步调试Network查看所有网络请求分析加载性能Performance录制性能剖析找渲染瓶颈Memory查看内存占用排查内存泄漏这比满屏console.log调试高效得多。重要警告上线前必须关闭调试这个问题很严重很多开发者忘记处理setWebDebuggingAccess(true)绝对不能带进发布版本。原因很简单开启调试模式后任何连接了 USB 并打开了chrome://inspect的人都可以看到你 Web 组件里的所有内容执行任意 JS甚至读取 localStorage 里的数据。对用户来说这是严重的安全漏洞。正确做法是用编译条件控制aboutToAppear():void{// 只在 debug 模式下开启release 编译时不会包含这行代码if(process.env.NODE_ENVdevelopment){webview.WebviewController.setWebDebuggingAccess(true);}}或者使用 HarmonyOS 的 BuildProfile 机制import{BuildProfile}fromBuildProfile;aboutToAppear():void{if(BuildProfile.DEBUG_MODE){webview.WebviewController.setWebDebuggingAccess(true);}}这样打 release 包时DEBUG_MODE为false调试代码就不会执行。踩坑记录坑一setWebDebuggingAccess必须在 Web 组件渲染前调用如果在 Web 已经加载完页面后才调用这个方法调试可能无法正常工作。一定要放在aboutToAppear()里。坑二部分手机需要手动信任 ADB 连接初次连接时手机会弹出是否信任此电脑的对话框一定要点允许否则 Chrome 无法发现设备。坑三加载本地文件$rawfile()也可以调试setWebDebuggingAccess(true)对本地 HTML 文件同样有效不只是网络地址。调试本地 H5 页面时一样好用。写在最后USB 调试这个功能强烈推荐在开发阶段就配置好一行代码的事能省掉大量靠肉眼猜 bug 的时间。但记住——上线版本务必关掉。