【功能测试】6_Web端抓包 _Fiddler抓包工具的应用

文章目录

  • 一、抓包说明
    • [1.1 抓包](#1.1 抓包)
    • [1.2 抓包原理](#1.2 抓包原理)
    • [1.3 抓包工具的应用场景](#1.3 抓包工具的应用场景)
    • [1.4 如何定位Bug是前端还是后端的?](#1.4 如何定位Bug是前端还是后端的?)
  • 二、Fiddler抓包工具的使用
    • [2.1 抓包操作](#2.1 抓包操作)
    • [2.2 设置过滤](#2.2 设置过滤)
    • [2.3 安装证书](#2.3 安装证书)
    • [2.4 弱网设置](#2.4 弱网设置)
      • [2.4.1 弱网环境下可能会出现的异常](#2.4.1 弱网环境下可能会出现的异常)
      • [2.4.2 弱网测试步骤(重点)](#2.4.2 弱网测试步骤(重点))
      • [2.4.3 弱网延迟计算](#2.4.3 弱网延迟计算)
    • [2.5 断点设置](#2.5 断点设置)
      • [2.5.1 为什么要设置断点?](#2.5.1 为什么要设置断点?)
      • [2.5.2 断点操作步骤](#2.5.2 断点操作步骤)
        • [2.5.2.1 断点请求](#2.5.2.1 断点请求)
        • [2.5.2.2 断点响应](#2.5.2.2 断点响应)

一、抓包说明

1.1 抓包

说明:客户端向服务器发送请求以及服务器响应客户端的请求,都是以 数据包 来传递的。

抓包(packet capture):通过工具拦截客户端与服务器交互的数据包

1.2 抓包原理

抓包工具(fiddler):Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯。

yacas 复制代码
1、使用抓包工具开启代理服务(转发请求与响应)
2、将浏览器上网方式设置成通过代理上网(将请求发给抓包代理服务器)

1.3 抓包工具的应用场景

1.定位前后端Bug

2.弱网测试

3.绕过界面限制直接测试服务器

1.4 如何定位Bug是前端还是后端的?

① 如果抓不到请求,显然是前端问题。

② 如果有请求但是没响应,那就是后端的问题;

③ 如果有请求也有响应,需要查看响应信息, 如果返回报错了,则需要具体分析报错内容。

二、Fiddler抓包工具的使用

2.1 抓包操作

Fiddler只抓包操作,不需要任何设置。因为默认开启了代理 8888。(谷歌浏览器也不需要手工设置)

2.2 设置过滤

yacas 复制代码
为什么要过滤?
------抓包时,有很多其他请求,干扰太大,可以使用过滤只看被测项目相关信息。

第一步:Filters菜单--->勾选Use Filters

第二步: 在第二个下拉框中选择Show only the following Hosts,并输入目标hosts

第三步:Actions--->Run Filterset Now立即执 行

2.3 安装证书

yacas 复制代码
为什么要安装证书?
------抓取https协议的包。(带锁看不着,装证书就是解决带锁的问题)

2.4 弱网设置

2.4.1 弱网环境下可能会出现的异常

  • 上传文件时进度卡住不动
  • 登录不上或者登录后立即掉线
  • 响应过程中页面控件可点击,导致崩溃
  • 搜索不响应,多次点击后结果显示总在刷新被替换

2.4.2 弱网测试步骤(重点)

弱网测试目标:项目使用用户有不同的网络环境,需要验证在网络环境较差的情况,能正常使用项目。

yacas 复制代码
1.设置要模拟的网络速度
2.开启网络延时
3.测试项目

1、设置要模拟的网络速度

2、开启网络延时

3、测试项目

yacas 复制代码
注:测试完成后需恢复设置
------查看弱网执行时间

2.4.3 弱网延迟计算

yacas 复制代码
弱网延迟时间计算公式:
延时ms=[1KB/(速率bps/8)B/s]*1000  单位换算关系:(B:字节	b:位)

1B = 8b
1B/s = 8b/s(或1Bps=8bps)
1KB = 1024B
1KB/s = 1024B/s
1MB = 1024KB
1MB/s = 1024KB/s
1Mbps=1000 000bps
1M带宽:速率为1Mbps
1s = 1000ms

2.5 断点设置

2.5.1 为什么要设置断点?

yacas 复制代码
绕开前端js限制,直接测试服务端。

2.5.2 断点操作步骤

yacas 复制代码
1.设置断点
2.修改请求
3.修改响应
2.5.2.1 断点请求
yacas 复制代码
1、启动Fiddler
2、打开tpshop登录页面,输入账号、密码、验证码
3、设置请求断点
4、在请求中把手机号删除
5、点击 Run to Completion (所有页面都要释放)


2.5.2.2 断点响应
yacas 复制代码
1、启动Fiddler
2、打开tpshop登录页面,输入账号、密码、和错误的验证码
3、设置响应断点
4、在响应中修改 哈哈,登录成功了!!!
5、点击 Run to Completion 



相关推荐
天人合一peng1 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
测试_AI_一辰2 小时前
Agent & RAG 测试工程05:把 RAG 的检索过程跑清楚:chunk 是什么、怎么来的、怎么被命中的
开发语言·人工智能·功能测试·自动化·ai编程
方也_arkling2 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐2 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
web打印社区2 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO3 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
Amumu121383 小时前
Vuex介绍
前端·javascript·vue.js
We་ct3 小时前
LeetCode 54. 螺旋矩阵:两种解法吃透顺时针遍历逻辑
前端·算法·leetcode·矩阵·typescript
2601_949480064 小时前
【无标题】
开发语言·前端·javascript
css趣多多4 小时前
Vue过滤器
前端·javascript·vue.js