浙里办真机调试方法,解决跳转地址不在白名单中问题

引言

最近做的浙里办H5应用里面遇到一个文件上传的问题,这是一个偶发性问题;因此需要大量上传测试

而浙里办的开发工具ZWEurope在绑定安卓设备时选不了文件,要想测试bug就需要发布后真机测试

要是能有一个本地真机调试的方法,不就完美了吗?

解决方案

从ZWEurope里面就能知道浙里办为我们提供了基本的认证方法 ,除此之外和普通的H5应用并无区别

通过扫描发布二维码,我们可以直接在浙里办APP上查看不同的发布内容;而直接打开二维码链接可以看到它就是普通的H5网站;因此我大胆尝试,用手机APP直接扫描本地npm run serve网址二维码(在chrome中可以直接点击网址后面的分享箭头选择创建二维码)

APP提示网页无法打开

这也正常,因为手机并不能访问PC的localhost的网站

重新扫描192.158.1.xx:8080(局域网访问网址)的网址,会发现浙里办无响应;这里使用ZWEurope重试可以知道是因为localhost:8080无法访问导致的;修改redirectUrl=http://localhost:8080为redirectUrl=http://192.168.1.xx:8080重试

结果APP提示跳转地址不在白名单中!

这就比较难办了,因为这个白名单是不归我们管的;后台并没有配置方法

除非可以有代理手机localhost的方法

通过前文远程无线调试安卓手机(mi9)的chrome浏览器可知google为我们提供了强大的手机–PC联调机制;

其实它还有一个功能,就是端口转发(Port forwarding)

开启此功能后即可在手机上通过loclahost:8080访问PC的localhost:8080

所以真机调试浙里办的方法就是:

• npm run之后 确保可以通过ZWEurope本地访问待调试应用

• 手机开启USB调试(无线调试)并与PC连接

• 配置手机到PC的端口转发(二选一)

  • 使用adb命令直接转发(推荐)

    adb reverse tcp:8080 tcp:8080

  • 使用chrome的Port forwarding转发

    在chrome://inspect/#devices中开启Port forwarding并配置待调试应用端口转发

• PC打开npm run的服务(如:localhost:8080),选择分享→创建二维码

• 打开浙里办APP扫描二维码

这样操作后并不能如ZWEurope一样在手机上触发代码中的断点;因为浙里办APP并未启用调试功能;只能通过log确认问题;唯一的好处是可以即时查看代码效果,避免发布再测试的流程

参考资料

• How can I access my localhost from my Android device?