项目场景:
项目中有一个查看一些数据的页面,点击“查看详情”按钮,可以进入这个页面,查看详情信息。
问题描述
点击“查看详情”按钮,页面一直在加载中,页面没有相关提示。
原因分析:
再次点击“查看详情”发起请求,f12查看接口信息
按f12后,发现接口是正常的,console在报错,所以大概率是前端的问题。
bug的排查和定位:
1.通过浏览器开发者工具,查看接口信息;
如何找到对应的接口?
f12后发现很多数据其中包含一些接口、图片等数据,点击“XHR”可以筛选出接口,然后根据接口名称定位到需要的接口。
2.查看接口信息,请求参数是否正确;
如何找到请求的参数?
①存在url里,?后的就是参数,参数与参数用&相连
②存在请求的body里
对比实际的请求参数与接口文档中约定的请求参数是否一致,一致则前端没有问题,不一致,则是前端的问题。
3.查看响应信息是否正确;
在请求参数正确的情况下,对比实际的响应信息与接口文档中的响应信息是否一致,一致则后端没有问题,不一致,则是后端的问题。
后端的错误,一般会在接口的响应中有相关提示。
可以借助接口的报错信息去定位bug。
4.查看console中是否有报错信息
一般console中的报错信息是前端的错误。
就先写到这里吧。成长在于总结,希望自己越来越棒!To be continue…