测试人员如何判断bug是前端还是后端

part1：前端和后端的区别是什么，呈现形式是什么

1. 前端简介

前端又称web前端，web顾名思义就是网页，所以大部分人的理解就是前端就是做网页的。但其实并不是，前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互的过程。以前的前端确实就是单纯的用DreamWeaver以及其它一系列的软件做静态网页，但随着互联网技术的不断发展，网站开发的难度加大，网页从静态发展为动态，交互效果更加强大。

随着手机成为人们不可或缺的一部分，前端也开始向手机端发展，向我们平时所用的微信小程序和一些手机app都属于前端。随着科技的不断发展，前端还在向智能电视、智能手表甚至人工智能领域等方面不断的发展。

1. 后端简介

多数后端开发人员从事于构建他们正在工作的应用程序背后的实际逻辑。前端开发人员构建用户界面，而后端开发人员编写代码，使其工作。后端开发人员写可使得按钮工作的代码，通过指出从数据库中提取哪些数据并将其传回到前端。后端开发人员也可能会大量参与系统架构，决定如何组织系统的逻辑，以便能够正常维护和运行。

可能会参与构建框架或系统架构，以便于更容易编写程序。后端开发人员比前端开发人员花费更多的时间在实现算法和解决问题上。通常前端开发工作更多的是关于创建用户界面和与之相关的内容，而不是实现实际的业务逻辑，使应用程序工作。

part2:前后端的特点是什么

1.前端特点

界面、布局、交互

2.后端特点

业务逻辑、性能、数据、安全性

part3:如何分析bug（bug类型）

（1）数据库层面的：

可能少某个字段，或者字段值为空等等，这些可能在设计数据库时就埋下了错误的种子，导致程序调用数据库错误的数据产生bug，这一类问题不算普遍，但也是最容易忽视的一种情况，有时候从数据库入手定位bug说不定还能发现数据库的设计缺陷。

（2）网络层面的：

通常这种都是网络情况较差的时候产生的，比如手机的移动网络信号不好，又或是公司网络不稳定，导致js/css未加载完全或者请求超时等等，这种问题其实非程序bug造成的，可以不用提交bug，也不用让开发毫无头绪的去查代码的问题。当然如果可以的话也可以当优化建议提给开发，让他优化代码，比如压缩js/css，增加超时时间，超时后的重试机制。

（3）代码层面的：

普遍的bug基本都是代码有问题造成的，排除掉1和2剩下后就可以确定是程序bug了。对于了解网络架构的人来说，其实程序也分前端和后端的，一般对于界面显示有问题直接可以判断是前端的问题，比如系统兼容性，浏览器兼容性。

而对于数据或者逻辑上的问题，则需要（检查接口）前端和后台之间是通过接口文件相互联系的，通过抓包工具来进行分析 ：

1）请求未返回数据，可能是client（客户端）请求数据错误，可能是server端（服务器端）处理错误。

2）请求返回错误的数据，那就是server端处理错误。

part4:如何区分前端问题和后端问题

1.抓包工具

抓包工具常用于查看是前端的显示有误，还是后端返回给前端的数据有误，通常浏览器自带的F12、charles、等工具都可以。

a、主要从请求接口、传参、响应三个方面分析。

1）请求接口URL是否正确

如果请求接口URL不正确，为前端Bug；

2）http请求中的参数是否正确

如果http请求中的参数不正确，为前端Bug；

3）如果接口URL和参数都正确，查看响应内容是否正确

如果这种情况下响应内容不正确，则为后端Bug。

4）如果JS基础比较好的话，也可以在浏览器的控制台中输入JS代码进行调试。

b、根据接口的文件，检查数据是否正确。

如果发送的数据是正确的，但是后台反馈的数据是不符合需求的，那就是后台的问题。

如果前端没有请求接口，或者请求的时候发送数据与需求不符，那这个时候就是前端的问题了。

2.响应状态码代表意义也有助于判断bug。

请参考：常见的http状态码_服务器找不到请求的网页_霸王龙吃蛋糕的博客-优快云博客

3..查看日志

出现bug时，查看服务器里的日志。如果日志没有输出，基本认为该功能没有与后端交互，非后端bug；如果有输出，就查看有无相关错误日志信息来进一步分析。

4.查看数据库

很多bug出现在接口的相互调用的情形里。可以通过在数据库里查询数据、比对来判断是哪些接口出了问题，比如：在A模块添加一条数据，但是在B模块没有展示，这时我们 通过查询数据库的数据来确认，是A模块没有插入数据，还是B模块没有查询到。而知道接口是前端还是后端负责开发的，就知道bug该给谁改了。

5.经验判断

平时的经历多了，对前后端代码的功能实现、交互等知识有了更深认识，事后及时思考总结，自然而然地会level up。关键在于态度和行动，多和开发人员沟通，有助于了解他们所开发的具体模块，再加上自己对业务足够熟悉，就很容易判断bug是谁的了。

part5:如何精准的定位前台bug并且描述bug？

请参考：如何使用web端的控制台（F12）_浏览器f12控制台怎么用_霸王龙吃蛋糕的博客-优快云博客