【汇总】如何定位前端bug和后端bug

前言

在一个项目中，前端出bug的几率往往高于后端，因此在不知道bug是属于谁的情况下，经验不足的测试员会自作聪明地把bug提给前端。这样一来，前端大哥在发现bug不属于自己的情况，难免心里不爽甚至找测试员理论。为了提高测试者的专业度，也为了团队的和谐，学会定位问题是一项必备本领。今天就来跟大家分享“如何定位前端bug和后端bug”

标题

1、
样式问题
关于布局和兼容性问题；
举个例子：同个界面，在15寸电脑上可以看到完整的内容，但是在13.3的电脑上只能看到部分；再举个例子：在Android 9.3的系统上，一副动画可以自动播放，在Android 4.4的系统上却没有动画效果。以上两种，都属于前端问题。也就是说，这类问题，百分之百是前端问题。

2、
响应时间长的问题
响应时间多久才算长呢，这个一般具体情况具体分析。
造成响应时间长可能是
1：前端请求了多次接口。这个时候有人问了，什么是请求多次接口。比如当前页面要调leave接口，清除数据后，再点击该页面，在network上看到这个这个接口出现了3次，那么就是前端请求了3次这个接口；
2：后端代码问题，在排除前端问题后，如果接口响应时间长（时间查看参考下图），那么无疑是后端代码质量问题了。

3、
和设计稿对不上
UI测试由设计师去走查测试，那么测试人员也要负责校对UI设计稿的工作，这种100%是前端问题了

4、
输入符合需求却报错
这个最好配合接口文档一起看，比如接口name要带参数sure，后端接口文档令这个sure的类型为string，但是前端传参的时候，把sure传承了int型，那么这个bug是属于前端的。
又比如，用户数据库存在“林家小猪“林家小李”“林家”3个用户，在界面的姓名输入框输入了“林家”，按照需求是模糊搜索，但是response只返回1个用户“林家”，这个时候就是后端的bug了。

1. 如果传参不符合接口文档的类型，少传必填参数带来的报错，就是前端bug；
2. 如果前端传参正确的情况下，response返回的数据不符合需求，那么就是后端bug。
   5、
   实现的功能跟需求不一致
   产品原型写得不够明显，或者是需求不明确导致，让产品和开发沟通。

---

【总结一些发现问题去定位问题的方法】
6、
网页上的某个图片的分辨率不对，如果我们了解实现过程，可以想到一般情况下，是根据某个地址去服务器取图片的，数据库一般只保存地址，那么图片能正确显示，就说明后端的基本功能是满足需求的。如果具体图片分辨率有误，最可能的原因是前端显示过程出了差错。
7、查日志
当我们发现一个bug，并不确定这个bug属于前端还是后端，可以查看后端服务的日志，复现bug时，查看日志中有没有相关信息。基本可以认为，如果日志没有输出，很可能这个功能并没有与后端交互，也就不存在后端的问题。反之，如果日志有输出，可以进一步查看有无错误日志信息，进一步分析。
8、查接口
（1）查看是后端返回给前端的数据有误，还是前端显示有误。
（2）大多数浏览器都有自带的接口查看工具，如Chrome，FireFox等都可以通过F12开启抓包，在NetWork中可以看到当前页面发送的每个http请求。
（3）我们需要对比通过后端接口拿到的数据和前端显示的数据，来确认问题出在哪里。
（4）如果数据错了，页面显示是错的，也是正常的，先从后端入手去解决。
（5）如果数据对了，但是显示错了，就需要问问前端的开发人员了。
1.出现样式的问题基本都是CSS的BUG
2.出现文本的问题基本上都是html的BUG
3.出现交互类的问题基本上都是Javascript的BUG 其他问题先沟通，再定位