1
背景
今年年初受疫情的影响,给大部分同事办公带来了不便,因此,公司今年开始着手移动办公,将部分原来需要在PC端操作的功能逐渐增加到了移动端,开发了很多的H5报表。因为是内部用的功能,在测试的时候也没有可以去关注兼容性和一些app端的专项测试,我们只是负责测试自己部门开发的轻应用,接入到公司的平台中能不能正常使用。
上线一段时间后,偶尔会出现一些交互上的偶现问题不太好排查原因或者定位,最近遇到过一个偶现的问题,用户在使用过程中进入H5页面的时候白屏了,一次偶然的机会,看到了开发使用谷歌浏览器再调试真机,觉得这个功能挺实用的,因此把它记录下来,分享给大家一起学习。
2
远程调试android设备
有几个准备事项要先检查一下:
1、将手机与电脑用数据线连接,确保电脑上安装了手机的驱动,手机打开调试模式
2、确保电脑上可以访问谷歌的相关网站,否则无法捕捉到手机上的页面
可以从https://github.com/ 下载对应的版本
3、打开谷歌浏览器,在地址栏输入chrome://inspect/#devices
点击inspect按钮,会弹出一个新的窗口,上面会显示手机上的页面,点一下刷新之后,会显示相关的请求加载信息:
动态演示效果图如下:
到此,安卓设备的远程调试就可以使用了,具体用来干什么,就看个人需要。
3
远程调试ios设备
ios设备的连接比安卓的要稍微复杂一点,需要额外安装2个工具。
1、安装scoop工具
需要在win10下,使用powershell安装scoop工具:
#修改执行策略,选择是 set-executionpolicy unrestricted -s cu #安装scoop iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
执行完后,会显示一个类似下图的信息:
如果未得到这样的提示信息,可以多重试几次这个步骤,如果页面有标红的报错信息,可以看一下,C盘用户目录下,是否有生成scoop的文件夹,有的话,直接在scoop的文件夹目录下打开powershell窗口,再执行后面的操作。
2、通过scoop安装ios_webkit_debug_proxy
scoop bucket add extras scoop install ios-webkit-debug-proxy
也可以从github上下载包进行安装:
https://github.com/google/ios-webkit-debug-proxy
3、手机也需要用数据线连接,并安装好相应的驱动,如果是抓取ios自带的safari浏览器上访问的网页的话,还需要在iphone的设置->safari-->高级->web检查器,打开对应的开关。
4、在powershell窗口中输入如下命令:
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
然后谷歌浏览器地址栏输入chrome://inspect/#devices ,在Discover USB devices后面点击Port forwarding...,按照下面的配置添加9221端口,然后刷新页面,就可以捕捉到手机上访问的web网页地址,不过需要安装对应app的debug版本才可以在点击inspect的时候看到页面。
以上就是真机调试的一些简单操作步骤,当然,调试的工具肯定不止这一个,后续接触到更好的再分享给大家。