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

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

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

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

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

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

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

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

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

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

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

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

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

设备模拟

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

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

其他技巧，大家慢慢探索吧！