使用f12定位bug

为什么找到网站中的bug后还要去分析它到底是属于前端bug还是后端bug

三个原因：

1.在一些公司，一个系统可能是由前端团队和后端团队共同开发出来的，因此在分配bug的时候，不同模块的bug一般都会指派给对应的负责团队乃至于个人。

2.提bug的时候，如果能尽量提供有价值的信息给开发人员，来缩小定位范围，甚至于如果能够直接协助定位到bug出在哪里，那么开发人员将更容易去fix掉bug，从而降低了测试和开发之间的沟通成本，提高了工作效率。

3.bug提的好从侧面也能体现测试人员具备了较高的技术专业性，而不是只会点点点，个人形象在项目团队中也会得到迅速提升。别人也会认为你是大佬

我们在分析一个系统bug来自于前端还是后台时，最有用的两个是调试器提供的两个标签，这两个标签底下都记录了一些数据，一个是console，一个network。

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

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

执行操作：

首先打开原型index.html文件

按F12进入控制器

选择console/network

操作原型界面

查看是否报错/请求状态是否正常

根据错误信息与请求状态来判定问题出在前端还是在后端

清楚请求状态信息，定位bug才更有信心

部分内容来源于：韬哥（NickJiang）