Chrome浏览器调试移动端网页,测试人员也可以轻松debug

现在的产品,移动端应用占据很大市场,在测试过程中,就会测试各种各样的移动端页面。测试过程,或多或少会发现些问题,无非就是前端、后端问题。后端接口问题,可以利用工具:Fiddler或charles抓包查看;前端页面问题,可以让开发把调试工具放在页面中,可如果没有该调试工具,那该如何查看前端报错问题呢?比如,页面白屏,抓包没调接口,如何拿到报错信息呢。

讲到这里,就需要“请”出今天的主角了,Chrome网页调试工具。该调试工具,只需要将手机与电脑连接就可以调试了,但其中有个问题就是FQ了,这个后面再说,我们先来看如何完成页面调试。

页面调试 准备工作

数据线

手机设备

电脑,安装了Chrome浏览器

开启USB调试

这个大家都很熟悉吧,数据线与电脑连接,并允许USB调试,具体自己操作吧。需要注意的是,手机不是默认有开发者选项的,需要手动开启,开启后就会一直有。开启方式不同手机不同,但都差不多,连续点击(5次)关于手机里的软件版本号就ok了。

chrome调试工具

连接好设备

打开要调试的app或网页

PC端网页(Chrome浏览器)中输入地址:chrome://inspect/#devices
等待小一会,会出现如下截图页面,点击inspect就可以开始调试了。

Chrome浏览器调试移动端网页,测试人员也可以轻松debug

我们可以从上图所知,页面会显示手机设备信息,没错,就是当前连接的手机设备。

调试会单独新开窗口,会显示手机中打开的页面,如下截图所示:

Chrome浏览器调试移动端网页,测试人员也可以轻松debug

无情404

可能大家看到这里,会觉得,原来调试这么简单。其实不然,这只是顺利成功的简洁步骤而已。在没FQ的情况下,点击inspect按钮,弹出的页面是无情的404。为啥是404,因为chrome调试是外网了,所以访问不通。

这里看其他帖子,可以不FQ解决,但我尝试了几次,都没成功,步骤如下:

寻找ip地址:

搜索:chrometophone.appspot.com

搜索后会展示能ping通该地址的ip,如下所示:

Chrome浏览器调试移动端网页,测试人员也可以轻松debug

将能ping通的ip地址配置到host文件中,如下所示:

172.217.26.148 chrome-devtools-frontend.appspot.com

再次访问https://chrome-devtools-frontend.appspot.com/,能成功的话,就不要再单独FQ了,如果不行,但又想使用该方法调试,那就只能FQ了。

问题总结

Pending authentication:please accept debugging session on the device

解决办法:在调试过程中会出现该提示,是因为设备没连接好,重新允许下USB调试即可。

以上就是今天的分享内容,测试过程,遇到前端报错,不好确定问题的情况下,就可以使用该方法调试,不失为一种测试手段。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwysxd.html