您现在的位置是：首页 >学无止境 >如何定位bug是前端还是后端？？？网站首页学无止境

如何定位bug是前端还是后端？？？

耀个丸子~ 2025-07-16 00:01:03
简介如何定位bug是前端还是后端？？？

        在平时的开发过程中，正确定位前后端bug是提高开发效率和项目质量的关键。以下是一些实用的方法。

1.观察Bug的具体表现：

  • 前端Bug‌：通常表现为页面显示错乱、样式问题、交互问题等，如布局错乱、样式与设计不符、元素位置偏移、点击按钮无反应、页面加载缓慢等。
  • 后端Bug‌：通常表现为数据处理错误、业务逻辑错误、数据库操作错误等，如数据错误、计算错误、接口数据返回问题等。

        前端主要负责显示数据，后端主要负责处理数据、存储数据，前后端主要通过接口进行数据交换。

1.）前端bug特征
界面显示类问题：如文字大小不一，控件颜色不搭，控件不整齐，静态界面错误；
页面布局类问题：文字排版没有统一，行间距大小、重叠、显示不全；
页面交互类问题：没有点击，拖拽，基本都是JS的问题；
兼容性问题：不同环境下的界面显示类问题和页面布局类问题；


2.）后端bug特征
业务逻辑类问题：如正确的用户名密码却登录失败等；
数据类问题：数据新增成功但是没有显示；
性能类问题，安全类问题；

2.查看错误日志：

  • 前端错误：通常在浏览器的开发者工具中显示，包括JavaScript控制台的错误信息、网络请求返回的状态码等。
  • 后端错误：通常记录在服务器端的日志文件中，包括错误信息、异常堆栈等。

3.对比前后端代码：

  • 前端代码：涉及DOM操作、事件处理、前端框架使用等。
  • 后端代码：涉及数据处理、算法实现、接口调用等。

4.通过接口抓包来判断：

  • 前端Bug：如页面上的数据没有正确传到request的参数中，或者response中的参数值没有正确显示到前端页面上。
  • 后端Bug：如request的参数值没有正确存到数据库中，或者数据库中的数据没有正确存到response中的参数中。

抓包+报文分析 ：

1）在复现bug时，F12或者Fiddler抓包，分析报文；

2）如果前端没有发出请求，则是前端bug;

3）如果前端发出了请求，但是参数不对，则是前端bug;

4）如果前端发出了请求，参数正确，后端没有相应，没有数据，则是后端bug;

5）如果前端发出了请求，参数正确，后端返回的数据不正确，则是后端bug；

6）如果前端发出了请求，参数正确，后端返回的数据也正确，但是界面显示不对，则是前端bug；

5.查看接口状态码：

  • 前端问题：接口状态码以4开头的问题通常是前端问题。
  • 后端问题：接口状态码以5开头的问题通常是后端问题。

常见的状态码：

  1. 1xx 类状态码属于提示信息，是协议处理中的⼀种中间状态，实际⽤到的⽐较少。
  2. 2xx 类状态码表示服务器成功处理了客户端的请求，也是我们最愿意看到的状态。
  • 「200 OK」是最常⻅的成功状态码，表示⼀切正常。如果是⾮ HEAD 请求，服务器返回的响应头都会有 body 数据。
  • 「204 No Content」也是常⻅的成功状态码，与 200 OK 基本相同，但响应头没有 body 数据。
  • 「206 Partial Content」是应⽤于 HTTP 分块下载或断点续传，表示响应返回的 body 数据并不是资源的全部，⽽是其中的⼀部分，也是服务器处理成功的状态。
  1. 3xx 类状态码表示客户端请求的资源发⽣了变动，需要客户端⽤新的 URL 重新发送请求获取资源，也就是重定向。
  • 「301 Moved Permanently」表示永久重定向，说明请求的资源已经不存在了，需改⽤新的 URL 再次访问。
  • 「302 Found」表示临时重定向，说明请求的资源还在，但暂时需要⽤另⼀个 URL 来访问。
  • 301 和 302 都会在响应头⾥使⽤字段 Location ，指明后续要跳转的 URL，浏览器会⾃动定向新的URL。
  • 「304 Not Modified」不具有跳转的含义，表示资源未修改，重定向已存在的缓冲⽂件，也称缓存定向，也就是告诉客户端可以继续使⽤缓存资源，⽤于缓存控制。
  1. 4xx 类状态码表示客户端发送的报⽂有误，服务器⽆法处理，也就是错误码的含义。
  • 「400 Bad Request」表示客户端请求的报⽂有错误，但只是个笼统的错误。
  • 「403 Forbidden」表示服务器禁⽌访问资源，并不是客户端的请求出错。
  • 「404 Not Found」表示请求的资源在服务器上不存在或未找到，所以⽆法提供给客户端。
  1. 5xx 类状态码表示客户端请求报⽂正确，但是服务器处理时内部发⽣了错误，属于服务器端的错误码。
  • 「500 Internal Server Error」与 400 类型，是个笼统通⽤的错误码，服务器发⽣了什么错误，我们并不知道。
  • 「501 Not Implemented」表示客户端请求的功能还不⽀持，类似“即将开业，敬请期待”的意思。
  • 「502 Bad Gateway」通常是服务器作为⽹关或代理时返回的错误码，表示服务器⾃身⼯作正常，访问后端服务器发⽣了错误。
  • 「503 Service Unavailable」表示服务器当前很忙，暂时⽆法响应客户端，类似“⽹络服务正忙，请稍后重试”的意思。

6.前端特定调试方法


（1）使用Vue Devtools等调试工具：对于使用Vue等前端框架的项目，可以利用Vue Devtools等浏览器扩展工具来查看和调试组件状态、属性和事件。

（2）控制台日志：在代码中添加console.log、console.error等日志语句，跟踪程序执行流程和变量状态变化。

（3）代码调试：通过浏览器的开发者工具设置断点，逐步执行代码，查看变量的值和调用栈，定位问题所在。

7.后端特定调试方法 


（1）查看数据库：检查数据库中的数据是否正确存储和更新。如果数据不正确，可能是后端处理逻辑的问题。

（2）查看缓存：如果项目使用了缓存机制，检查缓存是否正确更新和同步。缓存问题也可能导致后端bug。

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐