前端bug特点:界面相关 布局相关 兼容性相关
后端bug特点:业务逻辑相关 性能相关 数据相关 安全性

定位方法:
1.查日志:
通过查看后端服务日志,复现时没有相关日志,基本认为这个功能没有与后端交互,那就是前端问题。

2.查接口
抓包查看接口的入参 地址 出参是否和接口文档一致。
1.如果请求数据和接口文档不一致,则是前端问题
2.如果请求数据和接口文档一致,响应数据和接口文档也一致,则是前端问题。
3.如果请求数据和接口文档一致,响应数据和接口文档不一致则是后端问题。

3.开发者工具的使用(chrome浏览器)

(1)打开开发者工具,在浏览器菜单栏选择工具-开发者工具,快捷键是F12

(2)打开之后切换到Network页签,操作就可以看到请求响应

(3)再选择响应的链接,切换到Preview页签,可以看到响应的结果数据;切换到Headers页签可以看到请求的地址,请求的方式,结果等信息

(4)Response结果中可以看到返回的数据字段、值
可以根据响应的值判断一些bug所在
(1)响应中没有数据,则是后端数据没有返回,前端展示为空,则为后端问题。例如:列表中新增一个数据,没有显示,通过请求中可以看到数据total为0,则是后端数据没有返回。(2)响应中有数据,但是前端显示错误了,可以根据字段值判断是否前端显示中取错了字段显示,可以判断是前端问题。例如:B端显示内容错误了,把登录用户名显示了登录帐号,则可以在响应中看数据是否返回正确,返回正确而显示错误,则有可能是前端绑定字段错误。(3)响应中有数据,但是跟自己操作的结果不一致,可以根据数据库查询,如果数据库中也没有记录,可能是代码有问题,没有记录你的操作。例如:注册了一个帐号,但是登录时提示帐号或密码错误,这就可以在数据库表中查看是否有注册的数据。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐