F12抓包04:(核心功能)Network接口抓包、定位缺陷

课程大纲

一、录制请求

① tab导航选择"网络"(Network),即可进入网络抓包界面,进入界面默认开启录制模式,显示浏览器当前标签页的请求列表。

② 查看请求列表,包含了当前标签页执行的所有请求和下载的资源,列表显示每条请求的相应内容。

还可以在字段行单击右键,勾选想要查看的字段。

③ 单击列表项的"名称",可以查看请求的详细内容。接口请求和资源类请求的详情字段稍有不同。

(接口类请求详情)

(资源类请求详情)

二、请求详情介绍

(此篇不再赘述http请求的详解,您可以查看下方"接口基础知识"合集进行学习)接口基础知识https://blog.csdn.net/weixin_37846886/category_12776171.html?spm=1001.2014.3001.5482

请求详情字段包含:

  • ​标头(Headers)

  • 载荷(Payload)

  • 响应(Response)

  • 预览(Preview)

  • 启动器(Initiator)

  • 时间(Timing)

  • Cookie

**标头(Headers):**请求常规信息、响应头、请求头。

载**荷(Payload):**请求体。会自动编排格式后显示,可以查看源代码,如果是url参数,还可以查看url编码格式的数据。

**响应(Response):**服务器返回内容。

**预览(Preview):**响应解析后的内容。

如:返回内容是html标签,预览则解析为html网页进行显示;返回内容是资源类,可能两者一样如css、js文件都显示文件内容。

|-----------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|
| 响应 | 预览 |
| | |

**启动器(Initiator):**触发请求的源头。显示是通过哪个页面或者脚本发起了该请求。用于调试和追踪请求的起源。

**时间(Timing):**完成请求消耗的时间。包含请求开始时间、DNS 解析时间、连接时间、服务器响应时间、内容下载时间等。可以用来分析、优化请求性能。

**Cookie:**请求和响应的Cookie。

三、前后端缺陷定位

在测试基础理论课程中,我们讲过bug从前到后的定位方法,《测试基础:缺陷(bug)生命周期和缺陷(bug)管理规范

关于第2点"排查前端"再细化,即打开"检查"工具后出现以下几种情况,可区分 端问题

|----------------------------------------------|----------|
| 场景 | 问题定位 |
| 1、点击网页后未发送请求; | 前端 |
| 2、前端已发送请求,但发送的请求错误; (如:url、请求方法、数据等错误) | 前端 |
| 3、前端已发送正确请求,服务端未返回响应; (如:响应超时) | 后端 |
| 4、前端已发送正确请求,服务器返回响应异常; (如:返回状态码403、404、500等) | 后端 |
| 5、前端已发送正确请求,服务器返回响应正常,但响应数据错误; | 后端 |
| 6、前端已发送正确请求,服务器返回响应正常,响应数据正确,但前端显示错误。 | 前端 |

进一步简要查找前端问题,可如下操作:

① 通过"网络"右上角问题提示,可排查是否js错误;

② 查看tab导航"控制台",排查js错误。

相关推荐
互联网杂货铺1 天前
如何用Postman实现自动化测试?
自动化测试·软件测试·python·测试工具·测试用例·接口测试·postman
程序员小远3 天前
Python+requests实现接口自动化测试框架
自动化测试·软件测试·python·测试工具·职场和发展·测试用例·接口测试
测试19984 天前
postman测试文件上传接口详解
自动化测试·软件测试·python·测试工具·测试用例·接口测试·postman
土小帽软件测试8 天前
jmeter基础08_(组件)http请求默认值
测试工具·jmeter·接口测试·软件测试学习
互联网杂货铺11 天前
接口测试工具:Jmeter
自动化测试·软件测试·python·测试工具·职场和发展·测试用例·接口测试
天才测试猿18 天前
接口自动化测试用例
自动化测试·软件测试·python·测试工具·测试用例·接口测试·postman
qq_4337169520 天前
压力测试Monkey命令参数和报告分析!
自动化测试·selenium·测试工具·单元测试·pytest·接口测试·压力测试
程序员杰哥20 天前
如何使用Postman,通过Mock的方式测试我们的API
自动化测试·软件测试·python·测试工具·测试用例·接口测试·postman
Fanmeang21 天前
OSPF-2 邻接建立关系
运维·网络·华为·抓包·ensp·ospf·邻居状态
小码哥说测试22 天前
接口自动化入门 —— Http的请求头,请求体,响应码解析!
自动化测试·软件测试·测试工具·jmeter·小程序·接口测试·postman