【功能测试】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 



相关推荐
1024小神8 小时前
记录xcode项目swiftui配置APP加载启动图
前端·ios·swiftui·swift
CHU7290358 小时前
社区生鲜买菜小程序前端功能版块设计及玩法介绍
前端·小程序
尤山海8 小时前
深度防御:内容类网站如何有效抵御 SQL 注入与脚本攻击(XSS)
前端·sql·安全·web安全·性能优化·状态模式·xss
前端小趴菜058 小时前
Windi CSS
前端·css
xuankuxiaoyao8 小时前
VUE.JS 实践 第二章
前端·javascript·vue.js
毕设源码-赖学姐8 小时前
【开题答辩全过程】以 基于Vue的电商管理平台为例,包含答辩的问题和答案
前端·javascript·vue.js
Wayward and pinnacle8 小时前
二次封装多选框组件
前端·javascript·vue.js
咬人喵喵8 小时前
植树节主题核心 SVG 交互玩法 + 品牌 / 账号案例 + 组件 / 教程
前端·css·编辑器·svg·e2编辑器
Sailing9 小时前
🚀AI 写代码越来越快,但我开始不敢上线了
前端·后端·面试
Alair‎9 小时前
Vue 3 基础教程:从入门到精通
前端·javascript·vue.js