文章目录USB 调试和 WiFi 调试的区别代码实现权限配置如何用 DevTools 连接WiFi 方式连接流程图端口选择建议安全问题WiFi 调试比 USB 调试风险更高USB 调试 vs WiFi 调试该用哪个踩坑记录写在最后上一篇讲了 USB 调试需要插数据线。但有些情况下插线很不方便设备正在固定支架上测试特定姿态同时调试多台设备USB 口不够需要调试 USB 充电时的 Web 行为WiFi 无线调试就是为这些场景设计的。和 USB 调试的效果完全一样只是连接方式从 USB 变成了局域网 TCP。USB 调试和 WiFi 调试的区别对比项USB 调试WiFi 调试连接方式USB 数据线局域网同一 WiFi代码差异setWebDebuggingAccess(true)setWebDebuggingAccess(true, port)端口配置无需指定需要指定 TCP 端口号访问方式chrome://inspect/#devicesdevtools://devtools/bundled/inspector.html?...稳定性高有线连接略低依赖网络质量代码实现WiFi 调试只需要给setWebDebuggingAccess多传一个端口号参数import{webview}fromkit.ArkWeb;import{BusinessError}fromkit.BasicServicesKit;constDEBUGGING_PORT:number8888;// TCP 端口1024~65535 均可避开常用端口EntryComponentstruct WebComponent{controller:webview.WebviewControllernewwebview.WebviewController();aboutToAppear():void{try{// 第二个参数TCP Socket 监听端口webview.WebviewController.setWebDebuggingAccess(true,DEBUGGING_PORT);}catch(error){console.error(开启无线调试失败:${(errorasBusinessError).code},${(errorasBusinessError).message});}}build(){Column(){Web({src:https://www.example.com,controller:this.controller}).width(100%).height(100%)}}}和 USB 调试的区别多了第二个参数DEBUGGING_PORT端口号建议用try/catch包裹——端口被占用等情况会抛异常权限配置和 USB 调试一样需要在module.json5里声明网络权限{module:{requestPermissions:[{name:ohos.permission.INTERNET}]}}如何用 DevTools 连接WiFi 方式前提条件手机和电脑连接同一个 WiFi 网络。步骤一获取手机的 IP 地址在手机上「设置 → 关于手机 → 状态信息 → IP 地址」记下 IP比如192.168.1.123。步骤二运行应用安装并运行开启了 WiFi 调试的应用打开包含 Web 组件的页面。步骤三在 Chrome 打开调试页面在电脑 Chrome 地址栏输入devtools://devtools/bundled/inspector.html?ws192.168.1.123:8888/json把192.168.1.123替换为你手机的实际 IP8888替换为你配置的端口号。或者先访问http://192.168.1.123:8888/json查看所有可调试的页面列表找到对应页面的 WebSocket URL再用那个 URL 打开 DevTools。连接流程图端口选择建议端口号8888只是示例你可以用 1024~65535 范围内的任意值。但要避开以下常用端口防止冲突端口常见用途8080HTTP 代理/测试服务器8443HTTPS 测试服务器3000Node.js 开发服务器5000常见 Web 框架开发端口9229Node.js 调试端口推荐用8888、9090、7777这类不太常用的端口。安全问题WiFi 调试比 USB 调试风险更高USB 调试要求物理连接且设备会询问是否信任电脑有一定的物理安全保障。WiFi 调试的风险更高同一局域网内任何设备都可以连接到调试端口。这意味着公司内网里的同事、咖啡厅同一 WiFi 里的陌生人都可能连上你的调试接口。正确的安全实践import{BuildProfile}fromBuildProfile;constDEBUGGING_PORT:number8888;aboutToAppear():void{// 只在 DEBUG 模式下开启release 包绝对不能开启if(BuildProfile.DEBUG_MODE){try{webview.WebviewController.setWebDebuggingAccess(true,DEBUGGING_PORT);console.info(Web 无线调试已开启端口:${DEBUGGING_PORT});}catch(error){console.error(开启调试失败:${(errorasBusinessError).message});}}}生产环境绝对不能开启任何调试模式这是红线。USB 调试 vs WiFi 调试该用哪个日常开发USB 调试优先连接更稳定不受网络环境影响安全风险小以下场景考虑 WiFi 调试设备无法插 USB特殊测试夹具、多台设备并行测试需要同时调试多台设备每台用不同端口远程协助调试需要通过 VPN 或内网穿透踩坑记录坑一端口被防火墙拦截某些企业/校园网络会拦截非标准端口的通信。如果http://手机IP:8888/json访问超时先检查网络防火墙策略。坑二手机 IP 地址变化连接 WiFi 时手机通常是 DHCP 分配 IP重新连接 WiFi 后 IP 可能变化。建议在路由器上给手机绑定静态 IP或者在应用界面上显示当前 IP 地址方便查看。import{wifi}fromkit.ConnectivityKit;// 在页面上显示当前 IP方便开发时查看constlinkedInfowifi.getLinkedInfo();constiplinkedInfo.ipAddress;// 将数字 IP 转为字符串大端字节序constipStr${(ip24)0xff}.${(ip16)0xff}.${(ip8)0xff}.${ip0xff};console.info(当前设备 IP:${ipStr});坑三同时开两个 Web 组件页面端口冲突setWebDebuggingAccess是全局设置整个应用共用一个调试服务端口。如果应用里有多个页面都有 Web 组件不需要在每个页面里都调用只需要在应用启动时调用一次即可比如在EntryAbility.onCreate()里调用。写在最后WiFi 调试和 USB 调试的效果完全一样只是多了个端口参数多了个 IP 地址的连接方式。掌握这两种调试方式基本上覆盖了 Web 组件开发的所有调试场景。记住上线前一定要关掉。
HarmonyOS ArkWeb 系列之不插数据线也能调试网页——WiFi 无线调试详解
文章目录USB 调试和 WiFi 调试的区别代码实现权限配置如何用 DevTools 连接WiFi 方式连接流程图端口选择建议安全问题WiFi 调试比 USB 调试风险更高USB 调试 vs WiFi 调试该用哪个踩坑记录写在最后上一篇讲了 USB 调试需要插数据线。但有些情况下插线很不方便设备正在固定支架上测试特定姿态同时调试多台设备USB 口不够需要调试 USB 充电时的 Web 行为WiFi 无线调试就是为这些场景设计的。和 USB 调试的效果完全一样只是连接方式从 USB 变成了局域网 TCP。USB 调试和 WiFi 调试的区别对比项USB 调试WiFi 调试连接方式USB 数据线局域网同一 WiFi代码差异setWebDebuggingAccess(true)setWebDebuggingAccess(true, port)端口配置无需指定需要指定 TCP 端口号访问方式chrome://inspect/#devicesdevtools://devtools/bundled/inspector.html?...稳定性高有线连接略低依赖网络质量代码实现WiFi 调试只需要给setWebDebuggingAccess多传一个端口号参数import{webview}fromkit.ArkWeb;import{BusinessError}fromkit.BasicServicesKit;constDEBUGGING_PORT:number8888;// TCP 端口1024~65535 均可避开常用端口EntryComponentstruct WebComponent{controller:webview.WebviewControllernewwebview.WebviewController();aboutToAppear():void{try{// 第二个参数TCP Socket 监听端口webview.WebviewController.setWebDebuggingAccess(true,DEBUGGING_PORT);}catch(error){console.error(开启无线调试失败:${(errorasBusinessError).code},${(errorasBusinessError).message});}}build(){Column(){Web({src:https://www.example.com,controller:this.controller}).width(100%).height(100%)}}}和 USB 调试的区别多了第二个参数DEBUGGING_PORT端口号建议用try/catch包裹——端口被占用等情况会抛异常权限配置和 USB 调试一样需要在module.json5里声明网络权限{module:{requestPermissions:[{name:ohos.permission.INTERNET}]}}如何用 DevTools 连接WiFi 方式前提条件手机和电脑连接同一个 WiFi 网络。步骤一获取手机的 IP 地址在手机上「设置 → 关于手机 → 状态信息 → IP 地址」记下 IP比如192.168.1.123。步骤二运行应用安装并运行开启了 WiFi 调试的应用打开包含 Web 组件的页面。步骤三在 Chrome 打开调试页面在电脑 Chrome 地址栏输入devtools://devtools/bundled/inspector.html?ws192.168.1.123:8888/json把192.168.1.123替换为你手机的实际 IP8888替换为你配置的端口号。或者先访问http://192.168.1.123:8888/json查看所有可调试的页面列表找到对应页面的 WebSocket URL再用那个 URL 打开 DevTools。连接流程图端口选择建议端口号8888只是示例你可以用 1024~65535 范围内的任意值。但要避开以下常用端口防止冲突端口常见用途8080HTTP 代理/测试服务器8443HTTPS 测试服务器3000Node.js 开发服务器5000常见 Web 框架开发端口9229Node.js 调试端口推荐用8888、9090、7777这类不太常用的端口。安全问题WiFi 调试比 USB 调试风险更高USB 调试要求物理连接且设备会询问是否信任电脑有一定的物理安全保障。WiFi 调试的风险更高同一局域网内任何设备都可以连接到调试端口。这意味着公司内网里的同事、咖啡厅同一 WiFi 里的陌生人都可能连上你的调试接口。正确的安全实践import{BuildProfile}fromBuildProfile;constDEBUGGING_PORT:number8888;aboutToAppear():void{// 只在 DEBUG 模式下开启release 包绝对不能开启if(BuildProfile.DEBUG_MODE){try{webview.WebviewController.setWebDebuggingAccess(true,DEBUGGING_PORT);console.info(Web 无线调试已开启端口:${DEBUGGING_PORT});}catch(error){console.error(开启调试失败:${(errorasBusinessError).message});}}}生产环境绝对不能开启任何调试模式这是红线。USB 调试 vs WiFi 调试该用哪个日常开发USB 调试优先连接更稳定不受网络环境影响安全风险小以下场景考虑 WiFi 调试设备无法插 USB特殊测试夹具、多台设备并行测试需要同时调试多台设备每台用不同端口远程协助调试需要通过 VPN 或内网穿透踩坑记录坑一端口被防火墙拦截某些企业/校园网络会拦截非标准端口的通信。如果http://手机IP:8888/json访问超时先检查网络防火墙策略。坑二手机 IP 地址变化连接 WiFi 时手机通常是 DHCP 分配 IP重新连接 WiFi 后 IP 可能变化。建议在路由器上给手机绑定静态 IP或者在应用界面上显示当前 IP 地址方便查看。import{wifi}fromkit.ConnectivityKit;// 在页面上显示当前 IP方便开发时查看constlinkedInfowifi.getLinkedInfo();constiplinkedInfo.ipAddress;// 将数字 IP 转为字符串大端字节序constipStr${(ip24)0xff}.${(ip16)0xff}.${(ip8)0xff}.${ip0xff};console.info(当前设备 IP:${ipStr});坑三同时开两个 Web 组件页面端口冲突setWebDebuggingAccess是全局设置整个应用共用一个调试服务端口。如果应用里有多个页面都有 Web 组件不需要在每个页面里都调用只需要在应用启动时调用一次即可比如在EntryAbility.onCreate()里调用。写在最后WiFi 调试和 USB 调试的效果完全一样只是多了个端口参数多了个 IP 地址的连接方式。掌握这两种调试方式基本上覆盖了 Web 组件开发的所有调试场景。记住上线前一定要关掉。
