接口测试在日常的测试中也是一个比较常见的环节，在测试过程中，我们通常会通过jmeter或postman这些工具来发请求进行测试，亦或是自己写http或grpc请求的代码，实现请求的发送和接收的校验。这是比较常用的接口测试的方式。但是在新的这份工作中，竟然是直接通过浏览器的开发者工具去校验接口，于是来了解下这种功能和接口测试一体化的测试方式，以便更好的应对之后的工作。
1. 入口查看方式
windows上一般是F12直接进入，mac上通过option+command+i 的组合键来进入页面。
2. 主要内容介绍
开发者工具中，主要有以下几个组件：
1）Elements: 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果；
2）Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；
3）Sources: 主要用来调试js；
4）Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；
5）Profiles: 分析web应用或者页面的执行时间以及内存使用情况；
6）Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
7）Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
8）Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
3. 测试主要关注点
在测试过程中，目前主要关注Network和Timeline两项。
1）首先可以先清空日志，如下图，红框框选的按钮可以清空当前日志信息。
2）发送请求查看响应情况
每个请求都会有log信息，通过log信息，查看每个请求的发送和接收响应情况。上图便是一个响应示例。包括了请求头、请求行、响应头、响应数据等，可以根据页面的返回，与需求或开发文档对应，看是否符合预期。亦或是排查报错的情况。
3）Timeline的响应时间记录。
在请求过程中，用户体验也是很重要的，如果一个请求迟迟不返回，或者返回过慢，很影响用户体验。如下图，通过timing选项，可以方便的查看每个请求的耗时，从而作出判断，是否需要优化该请求接口。
以上就是基于开发者工具的日常测试过程，大家可以多多交流日常哦～
