检查面板定位bug问题

在软件测试工作中，我们常常需要定位bug问题，定位接口耗时的情况。不是模块的开发者，往往很难准确定位到bug所属的人员。其实定位bug是有技巧的，掌握相关的技巧往往能事半功倍。那应该如何准确定位bug，减少工作中不必要的沟通？

按下F12，打开检查面板，你可能就能找到答案！检查面板其实是一个分析利器。善用检查面板的功能，能很大程度上改善我们工作的质量。但是当你打开检查面板，就会发现参数众多，光是时间参数就分为不同阶段。因此熟悉这些参数是必不可少的。今天我们就来介绍一下这个和浏览器绑定在一起的检查面板。下面从定位bug问题，定位接口耗时两方面展开做具体介绍。

标题工具栏

使用标题工具栏，您可以：

过滤响应标头和请求标头部分中的标头。

阻止此请求中涉及的域。该域将添加到“阻止”侧栏中。

重新发送请求。“重新发送”按钮打开一个包含两个项目的菜单：

重新发送：重新发送请求。

编辑和重新发送：启用编辑模式，您可以在其中修改请求的方法、URL、请求头或请求正文。单击“发送”发送修改后的请求，或单击“取消”取消编辑。

控制台：记录了前端js执行的情况，以及前端向服务器发出去的所有http请求信息，如果有js错误可以在控制台下看到，同样如果发送到后台的某个http请求没有得到服务器正常响应，也能看到他的状态信息。

网络：记录了前端往服务器发的所有的http请求信息，而且每个请求发送了什么数据，服务器是否正常响应了请求，如果响应了，响应回来的状态码是什么，响应数据是什么都可以在“网络”标签下看到。

状态码	说明	schema
200	OK	请求响应对象
201	Created
401	Unauthorized
403	Forbidden
404	Not Found

Timings tab

在接口耗时分析中，我们可以查看Timings选项卡来判断接口耗时，但是Timings选项卡具体的参数众多，难以分辨，下面具体介绍，

Timings选项卡提供了有关网络请求的每个阶段所用时间的信息，以及更详细、带注释的时间线栏视图，因此很容易找到性能瓶颈。

Request Timing

Request Timing部分将网络请求分解为HTTP Archive规范中定义的以下阶段子集：

Name	Description
Blocked	在队列中等待网络连接所花费的时间。浏览器对可以同时连接到单个服务器的数量施加了限制。在Firefox中，默认值为6，但可以使用network.http.max-persistent-connections-per-server首选项进行更改。如果所有连接都在使用中，则浏览器在释放连接之前无法下载更多资源。
DNS resolution	解析主机名所花费的时间。
Connecting	创建TCP连接所需的时间。
Sending	向服务器发送HTTP请求所花费的时间。
Waiting	正在等待服务器的响应。
Receiving	从服务器（或缓存）读取整个响应所花费的时间。

前后端问题定位

一般来说，前端往往是页面问题。后端往往是数据处理上的问题。下面论述各种情况，以及相应的判断。

情况	分支	判断
前端没发送请求		前端问题
前端发送请求，但是发错了请求		（地址错误，传参错误）
前端发送请求，并且请求正确
	有预期的响应数据，前端显示错误	前端取错字段
	没响应	后端问题
	接口错误	后端问题
	没有预期的响应数据	后端问题，可查询数据库，查日志