• 如何快速定位错误是前端还是后端接口返回的?
  • 发布于 2个月前
  • 393 热度
    0 评论
  • 且醉
  • 0 粉丝 31 篇博客
  •   

在前后端分离流行的今天,查找Bug的第一步往往是先确定问题是属于前端的问题还是后端的问题。而且这种问题对于那种前后端由不同的团队的公司来说,这也是前端人员和后端人员在处理问题时最容易扯皮的地方。那作为前端开发人员,有哪些方式可以快速判断系统的问题是属于前端问题还是后端问题呢?今天我们就总结一下几种常见的判断报错是属于前端还是后端的方法。

方案一:根据对代码的实现的了解,判断报错属于前端还是后端
这个方案前提是需要你对代码实现很熟悉,也是最简单的方式。


方案二:前端代码全局搜索关键字,工程代码里搜索/控制台打开搜索
对应工程 gitlab 或者 vscode 或者 devTools global search 里去进行全局搜索。

方案三:翻阅 network 面板中的请求
翻阅 network 面板中的请求,看下返回的 response 是否携带错误提示,有则表示后端返回的;如果报错的接口刚好是以非200 的状态返回,或者是由新的操作触发调用接口,我们很快就能查找到对应的接口,如下:

方案四:使用 network search 进行搜索
但是很多情况,接口业务错误会以 http status 200 的状态码返回,如果此时请求了大量的接口(举个例子:进入页面调用了大量的接口,其中有一个接口返回了错误信息),那么除了逐个翻阅 network 这种低效的方式,chrome devTools 还提供了 network search 面板这种更便捷的方式,可以搜索接口详细信息(包括详细的返回信息),返回匹配结果。

如何打开 network search 面板?
在 network 面板中,按快捷键 ⌘ + F(Mac)、 CTRL + F(Windows)可呼出 network search 面板。

方案五:使用抓包工具

使用抓包工具可以查看 HTTP 请求和响应的详细信息,包括请求方法和路径、请求头和请求体、响应状态码和响应体等内容。通过对比请求和响应的信息,可以快速定位错误是前端还是后端接口返回的。
方案六:调试日志

在后端代码中,通常可以通过调试日志来查看错误信息。可以在后端代码中添加打印日志的语句,以便查看错误发生的位置和原因。
方案七:使用分层架构

采用分层架构可以将前端和后端代码分别开发和管理。在分层架构中,前端和后端各自负责不同的功能,可以更容易地定位错误是前端还是后端接口返回的。
方案八:使用单元测试和集成测试

编写单元测试和集成测试用例可以帮助发现前端和后端代码中的错误,并且可以快速定位错误的位置和原因。


用户评论