如何区分前后端Bug

如何区分前后端Bug

为什么要区分前后端Bug?
如果是大规模团队、多人开发的系统，测试不能明确到底是谁的 BUG，将 BUG 提交给了错误的开发人员，再加上人都有依赖心理，这个 BUG 就会被当皮球一样踢来踢去，极大增加了沟通成本，影响 BUG 修复时效。

前后端 BUG 各有的特点
前端 BUG：界面相关、布局相关、兼容性相关、交互相关。
后端 BUG：业务逻辑相关、性能相关、数据相关、安全性相关。

如何区分前后端 BUG
一）经验法
平时工作中多注意积累总结经验（比如根据上面的第二项内容【前后端 BUG 各有的特点】来初步判断这个 BUG 属于前端还是后端）。
二）查看日志法
复现 BUG 时，查看日志中有没有相关信息。
如果日志没有输出，很可能这个功能并没有与后端交互，也就不存在后端的问题。
如果日志有输出，可以进一步查看有无错误日志信息，进一步分析。
三）接口查看法
大多数浏览器都有自带的接口查看工具，比如 Chrome 浏览器通过 F12 开启抓包，来查看是后端返回给前端的数据有误，还是前端显示有误。
1、检查接口 URL：URL 错误，前端 BUG。
2、检查接口传参：传参错误，前端 BUG。
3、检查接口响应：响应错误，后端 BUG。
4、控制台 js 报错：前端没有发起接口请求，前端 BUG。

页面请求过程：

用户页面输入某个字段，点击提交按钮

页面携带数据进行请求，访问具体的功能接口

由后端服务执行该接口相应的业务逻辑，如涉及数据，再去请求并组装数据返回给前端

前端页面进行渲染和展示对应的页面和数据

前端bug	后端bug
界面相关	业务逻辑
布局相关	性能相关
兼容性相关	数据相关
···	安全性相关

1. 经验法：譬如看到界面、布局，公式渲染不对，图片显示模糊等类似的bug，都属于前端数据，功能逻辑和性能都属于后端

2.抓接口确认，如果接口返回值正确，页面未显示，或页面显示不对，说明接口已经传过来数据，但前端未显示出来，属于前端问题；如果接口返回值错误，前端显示和接口返回的一致，这就属于后端bug，说明接口有问题；

例：前端页面展示的图片模糊，肯定属于前端bug，我们分析一下图片显示的实现方法，图片地址存放在数据库，根据该地址去服务器取图片，图片能显示出来，说明接口功能实现没问题，显示不清晰，就是分辨率有问题，需要前端调试

3.和开发人员沟通，如果实在拿不定，就需要和前后端开发人员进行沟通判定，时间紧急的情况这下这个办法是很实用，但是自己能定位尽量不麻烦别人拉 。。。。。

前端bug分类：

样式问题-----CSS

文本问题----html

交互问题------Javascript