项目场景：

项目中有一个查看一些数据的页面，点击“查看详情”按钮，可以进入这个页面，查看详情信息。

---

问题描述

点击“查看详情”按钮，页面一直在加载中，页面没有相关提示。

---

原因分析：

再次点击“查看详情”发起请求，f12查看接口信息
按f12后，发现接口是正常的，console在报错，所以大概率是前端的问题。

---

bug的排查和定位：

1.通过浏览器开发者工具，查看接口信息；
如何找到对应的接口？
f12后发现很多数据其中包含一些接口、图片等数据，点击“XHR”可以筛选出接口，然后根据接口名称定位到需要的接口。

2.查看接口信息，请求参数是否正确；
如何找到请求的参数？
①存在url里，？后的就是参数，参数与参数用&相连

②存在请求的body里
对比实际的请求参数与接口文档中约定的请求参数是否一致，一致则前端没有问题，不一致，则是前端的问题。
3.查看响应信息是否正确；
在请求参数正确的情况下，对比实际的响应信息与接口文档中的响应信息是否一致，一致则后端没有问题，不一致，则是后端的问题。
后端的错误，一般会在接口的响应中有相关提示。
可以借助接口的报错信息去定位bug。

4.查看console中是否有报错信息
一般console中的报错信息是前端的错误。
就先写到这里吧。成长在于总结，希望自己越来越棒！To be continue…