Web测试-笔记-F12的用处

最近开始做web端的测试，和之前C/S的测试在一些方式上还是有明显区别的。
总结一下在干活的过程中遇到的一些技巧和测试的工具，以便日后整理关于B/S的相关资料。
在测试的时候遇到报错。需要自己去定位这个问题的原因，然后再联系开发修改。
这也是目前测试需要掌握的能力之一（提高工作效率，也能锻炼自己的能力）。
今天就来总结和学习一下——F12开发者选项。
1. Elements

关于Elements关注的不多。除了查看页面元素属性和进行修改之外，其他没有过多了解-。 -！
2. Console
除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，可以直接在Console中输入"console"并执行

在测试日常工作中一般用来定位问题——看看是不是前端JS报错，然后去找前端开发…
3. Sources
看上去有点通过工具打开一个项目要进行一波操作的意思，也差不多就是这个东西啦！

4. Network
这个东西也就是测试工作中用到的最多东西了…
每次找开发看问题，他的第一反应总会嘟囔：F12打开了没？后端吐数据了没？ -。 -
这个东西确实好用，比起我之前做C/S测试的时候，前段和后端的报文每次都是需要去捞日志方便的多了。

4.1 这个就是开关，开启了以后才会记录你在网页上操作的所有信息（默认开启）。
4.2 清空所有记录。
4.3 …
用到的最多的就是这两个。其他的暂时不多了解。
举个例子：
我们在页面搜索“测试”的时候，会返回一些搜索结果

通过这里的截图，我们可以看到请求报文和响应报文以及其他的东西。
请求头、请求体
响应头、响应体
请求头包含了一些这次报文发送的具体信息：地址、方式、状态等等；
请求体（重要）：一般来说我们定位问题最需要关注的问题，要看这次网页上进行的搜索的操作生成的请求报文体中究竟有没有包含相关的字段
包含了，且响应报文也包含了这个三个结果的信息。如果没有返回这个list，那就要去具体查日志，具体哪个系统没有返回？后端调用方法处理的时候具体的报错信息了。

以上就是在工作中暂时用到的功能，介绍起来比较粗糙且一些小的功能点没有介绍到。
以后的工作中会慢慢接触到越多的功能，日后会逐渐完善这篇博客。