1.请求与相应
如果点击按钮，发送请求：get/post...，出现bug
1.前端没有带数据或者请求url错误，就是前端的问题(url错误或者为空，参数错误或者参数为空)
2.后端没有返回数据则是后端问题，
3.后台已经传回来了数据，但是到前端没有显示出来。这个也是前端问题。
get请求的参数放在url中，即在请求头中可见。不能携带大量参数。
post请求的参数在请求正文中。可以携带大量参数。
前后端分离并没有网上说的那么复杂。
1.首先要知道所有的程序都是一数据为基础的，没有数据的程序没有实际意义，程序的本质就是对程序的增删改查。
2.前后端分离就是把数据操作和显示分离出来。前端专注做数据显示，通过文字，图片或者图标等方式让数据形象直观的显示出来。后端专注做数据的操作。前端把数据发给后端，有后端对数据进行修改。
3.后端一般用java，c#等语言，现在的node属于JavaScript也能进行后端操作，此处不意义裂解语言。后端来进行数据库的链接，并对数据进行操作。
4.后端提供接口给前端调用，来触发后端对数据的操作。
基本原理就是这样，可能语言上不准确，思想是没有问题的。
之前开发写代码的时候，所有的ajax数据都不是后端返回的真实数据，而是我们自己通过接口mock模拟的假数据，当前端的代码编写完毕，后端的接口也已经写好之后，我们就需要把mock数据干掉，尝试使用后端提供的数据，进行前后端的一个调试，这个过程我们就把它称之为前后端的接口联调。
为什么要联调 本地的mock数据是JC同事自己写的，肯定符合前端需求，但是后端接口首先需要测试通不通，还需要测试数据格式对不对，还有后端有没有填写足够的数据，比如写列表页，前端想分页，如果后端就写了两条测试数据，你咋整？ 所以，Jack需要根据后端对接口的调整，不断地来回切换url，这样岂不是还在受后端的影响，还谈什么毛线的前后端分离，名存实亡嘛！
2.
页面元素之类的错误：
1）图片尺寸、图片分辨率（需要产品经理确认）不符合高保图，前端切图
网页上的某个图片的分辨率不对，如果我们了解实现过程，可以想到一般情况下，是根据某个地址去服务器取图片的，数据库一般只保存地址，那么图片能正确显示，就说明后端的基本功能是满足需求的。如果具体图片分辨率有误，最可能的原因是前端显示过程出了差错。
2）光标的几种形态 （输入框or可选择的_工字形光标、链接or按钮_食指竖起的白手套、白色箭头）， 参考文档：HTML光标样式
3）按钮点击没反应、下拉框层级关系没有动态变化、输入框校验（长度、非法字符）不严格
合理的表单验证模式应该是：双边验证。
前端在用户输入的过程中就需要实时地检查，是否带有特殊符号、值是否是在允许的范围内、是不是符合相应的规范等等。而不是等用户填写完内容并提交后，再由服务端来告诉用户说，“你的用户名不符合规范”。
服务在收到前端收到的数据后，不管前端有没有进行验证，都应该按后台的逻辑进行验证。
于是乎在这个时候，这些逻辑就被无可避免地放到前台里了。
4）面包屑导航条：不准确、不能跳转、跳转404错误
5）图片加载不出来：如果是静态图片就是打包的时候少了文件、如果是动态图片就是后台返回的数据有问题
6） 提示语：不友好，不符合用户场景，前端写提示语
7）前端写死了数据，没有动态读取后台返回的数据，
8）后台接口应答异常码，前端要有合理提示语
9）后台接口无应答or应答超时，前端要有超时提示语
10）同一个接口，用户正常操作的时候有没有必要同时发送N个？网络异常的时候，多次刷新页面，接口顺序怎么控制？是否应该灰掉按钮，让用户不能多次点击按钮？
11）多个接口（例如：A接口必须在B接口前面），导致网络延迟的时候，顺序有点乱了，有偶现BUG
12）
点击按钮无反应
先点击F12，再点击按钮
观察你的Network，看看请求有没有发出去
如果请求没有发出去，一定是该方法中有js代码写错语法了，排查语法，可以使用简单的alert弹框去做标记
如果请求发出去了，再继续排查
3.web排查bug
F12 -- Network -- XHR
排查结果如图：后端有返回数据
F12 -- Consol
排查结果如图：前端报错，说明是前端问题
往往UI设计师会设计一个网页的概念图出来，一般一个网页是一整张图，客户看了图之后觉得满意了，就可以把这张图丢给前端去切割开来，例如：把页头、导航栏、侧边栏、banner、页脚、按钮样式等等都切割开。在正真做网页的时候再一点点拼起来。
原文：https://www.cnblogs.com/yzwdcjs/p/12012886.html