活用 F12 开发者工具，测试服从原来可以提高这么多

什么是F12?

F12开发者工具是浏览器自带的一个开发调试工具，由于可以用F12快捷键直接启动，所以简称为F12工具。
F12工具由于有如下的特点，所以被开发和测试职员广泛利用：
1.简朴轻量免安装，是浏览器内置的开发者工具，可以提供捕获浏览器的数据报文的功能；
2.作为浏览器的一部分，是数据收发的一端，抓取到的 HTTPs 报文是可以得到明文数据的，不像Fiddler和Charles等工具，需要安装证书，所以操作简朴。
如何启动F12?

F12开发者工具的启动方式有很多，如下：
1）键盘按F12即可立即启动
2）鼠标右键选检查页面启动
3）在菜单里：更多工具里–>开发者工具，点击可以直接启动：**
4）Ctrl+Shift+i 快捷键启动
F12的常规设置

1.显示的位置调整
靠右、靠左、靠下、独立窗口

2.设置颜色和语言（chrome）
Chrome浏览器默认是英文的，可以手动设置为中文的模式。

3.手机版本的切换
得当测试H5页面和小步伐测试，可以方便在电脑操作和调试；也可以选择尺寸和差别的手机型号，并且也可以自定义手机型号和列表。

测试利用F12工具的紧张场景

F12开发者工具是开发和测试都会经常利用的一个工具。作为软件测试需紧张可以利用的场景有哪些呢？
1.项目的抓包分析和定位问题
测试紧张用来进行抓包定位和分析问题。好比我们在测试项目的时候，发现了一个bug，要定位这个bug是前端bug照旧后端bug，就可以通过抓包来进行分析。
F12记录了前后端的交互，可以通过看前端发送的请求和后端收到的相应，如下图所示：

先找到这个报文，然后点击查看右边的请求和相应。
请求消息注意看：请求头 +请求体，特殊是请求体里的请求正文，就是我们页面上传输的参数和数据，需要检查是否有问题：

相应消息就是服务器的返回的相应消息，重点看的也是相应体：

所以，结合以上抓包信息，我们可以按照如下步调和原则来判断和分析bug：
1.如果是显着的前端页面问题，好比js报错，那么就是前端的bug；
2.通过抓包结果来分析：
1）如果前端没有发送请求，那么是前端问题
2）前端发送请求的数据错误，那么是前端问题
3）如果后端没有给相应消息，那么是后端问题
4）如果后端相应消息数据错误 ，那么是后端问题
5）如果后端给了精确的相应，但是前端没有精确显示，那么是前端问题
当然，除了抓包分析，我们还需要共同数据库进行数据确认，以及结合Linux服务器分析项目日记来定位具体的问题。
2.F12做接口测试和数据篡改
点击菜单栏里的新请求按钮，可以打开一个新请求的编辑页面，输入请求的地址和参数、请求头，点击发送按钮即可发送接口请求。

大概选中报文然后右键选择编辑并重发，也可以对这个接口数据进行修改，好比做一些异常的接口测试，检查相应结果，确认接口服务器处理结果。

3.F12工具做弱网测试
大家都知道有很多工具可以做弱网测试，好比Fiddler工具，Charles工具，QNET工具等，F12开发者工具也可以做弱网测试。
如下是谷歌浏览器和火狐浏览器的弱网配置页面：

可以从预设置好的网络类型里选择，也可以本身定义和添加网络参数。
总结

相对于其他的抓包工具F12开发者工具的优缺点如下：
优点：
1.最简朴、最轻量级的，免安装，是浏览器内置的开发者工具；
2.抓取到的 HTTPs 报文是可以得到明文数据的，不需要安装证书。
缺点：
1.由于只能抓当前浏览器的收发报文，层次只能是在应用层 Http(s)协议，不能抓取其他的数据报文；
2.F12 抓包调试也能满足我们基本的测试工作需求，但是作用面和强大性和其他的抓包工具照旧有一定差距的。
测试可以利用的工具很多，但是F12开发者工具是利用最简便的，如果能灵活运用，可以让工作服从提升不少！
末了： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取 【保证100%免费】

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权势巨子的解答，刷完这一套面试资料信赖大家都能找到满意的工作。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。