测试技能之谷歌浏览器调试技巧

2019-02-23 00:36:17 / 打印

生活学习中我们常用的工具之一就是浏览器,但测试工程师需要知道不仅仅是输入网址,鼠标点击几下那么简单。

测试工作中,无论是业务的功能操作还是兼容性测试,都需要在浏览器中完成。作为一个软件测试工程师你一定要知道一些基本的浏览器使用技巧。

本篇主要从谷歌浏览器的使用来大概介绍一下,大家一定要形成一个概念,技能学习光靠阅读吸收是远远不够的,除了收藏下来多多理解,最主要的还是要去动手实践一下。能经常动手实践和思考的人,成长也一定是最快的。

打开浏览器,按F12打开调试窗口。

首先认识一下主界面的几个元素:

Elements:当前页面的html代码,查看HTML标签元素,UI自动化时元素定位需要查看这里的代码。

点击左上角的箭头工具,点击页面的元素,就可以获取到标签的相关属性信息。

Console:控制台主要显示加载页面时的一些错误信息,比如资源丢失和js错误等。

Network:显示浏览器与服务器请求和响应的信息。

当我们点击一个链接,或者输入域名回车后,浏览器就开始发送请求信息 ,包括请求URL、请求头、请求体等信息。

这里的请求响应类似于接口测试,可以查看请求的参数和返回的结果是否正确。

Source:这个是js的调试窗口,主要存放的是当前页面css文件、图片、js文件、以及html等。

设备模拟

点击箭头旁边的设备按钮,就可以调出设备和分辨率选择窗口了。

点击它可以切换到不同的终端进行页面验证,同时可以选择不同尺寸,chrome浏览器的模拟移动设备和真实的设备相差不大,是非常好的选择。

其他技巧,大家慢慢探索吧!

定期分享最新开发测试相关资料,谢谢关注!

努力,成为更好的自己!