Web测试必备技能——F12定位bug属于前端还是后端

本文主要是介绍Web测试必备技能——F12定位bug属于前端还是后端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

网络（NetWork）：浏览器与服务器通过HTTP协议通信流程
在这里插入图片描述
访问示例网站（http://geek.itheima.net/），观察请求信息：

浏览器发的请求信息展示
在这里插入图片描述

服务端响应的信息展示：

【Response】前端需要的参数（后端给前端传的参数）

在这里插入图片描述

chrom浏览器为例

（1）打开开发者工具，在浏览器菜单栏选择工具-开发者工具，快捷键是F12

（2）打开之后切换到Network页签，操作就可以看到请求响应

（3）再选择响应的链接，切换到Preview页签，可以看到响应的结果数据；切换到Headers页签可以看到请求的地址，请求的方式，结果等信息

（4）Response结果中可以看到返回的数据字段、值

如图，此时页面出现报错

点击该条报错信息
在这里插入图片描述

可以根据响应的值判断一些bug所在

（1）响应中没有数据，则是后端数据没有返回，前端展示为空，则为后端问题。例如：列表中新增一个数据，没有显示，通过请求中可以看到数据total为0，则是后端数据没有返回。

（2）响应中有数据，但是前端显示错误了，可以根据字段值判断是否前端显示中取错了字段显示，可以判断是前端问题。例如：前端显示内容错误了，把登录用户名显示了登录帐号，则可以在响应中看数据是否返回正确，返回正确而显示错误，则有可能是前端绑定字段错误。

（3）响应中有数据，但是跟自己操作的结果不一致，可以根据数据库查询，如果数据库中也没有记录，可能是代码有问题，没有记录你的操作。例如：注册了一个帐号，但是登录时提示帐号或密码错误，这就可以在数据库表中查看是否有注册的数据。

定位后提交问题

1、前端的bug通常是功能、界面和兼容性等有关。后台的bug与性能和安全性有关。前台bug定位：按F12在console中查看报错信息，对于出错的js可以在Sources下查看对应报错的资源文件，写入禅道提交给开发即可
2、后段查看日志一台服务器可以部署多个应用，

cd usr/local/测试服务器名称/logs //查看先进入到服务器的logs目录下(跟据实际日志位置调整)

tail -f catalina.out //监视catalina.out 文件的尾部内容（默认10行）

【参考】：
前端Debugger流程好牛！！！开发调试秘籍–前端Debugger实战
F12定位bug