Web前端页面根据响应数据初步定位Bug

平常做Web测试工作的时候，大家多多少少都会依靠浏览器自带的开发者工具来分析定位Bug，比如Google自带的Chrome开发者工具。一些不是太复杂的场景，可以通过浏览器端的请求和服务端返回的响应数据初步分析是否是Bug，以及Bug产生的原因。

1.开发者工具使用路径：

F12快捷键-->Network-->All/CSS/JS...-->Headers|Preview|Response|Cookie...
Response：响应返回的原始数据（raw data）
Preview：根据选择的资源类型（Json、Html、图片、文本），把响应返回的数据进行格式转换后显示相应的预览
Headers：包括Request和Response的一些“键-值”数据，可以查看网络传输是否正常，还有一些Cookie信息

2.Web前端返回响应数据的几种异常场景：

1）响应中没有返回数据，前端显示为空
响应中没有返回数据，即后端的数据没有返回给前端，很可能就是后端问题

2）响应中有返回正确数据，前端显示错误
响应数据正确，前端页面显示不正确，此时可以先查看前端对应的字段名，然后排查该字段的取值调用后端的是哪一个字段，前后端字段是否匹配。若不匹配，则可能是前端问题

3）响应中有返回错误数据，前端显示错误
响应中有数据，但数据不正确，与实际操作的结果不一致，可先从数据库查询是否有相关操作结果的记录，若没有记录，则可能是后端代码问题

3.排查Bug的大致思路

可以依次为：1-->2-->3-->4-->5-->6
1.测试环境Hosts配置
2.Web前端代码（html、css、js...）
3.中间件
4.后端服务器配置
5.后端代码
6.数据库