Fiddler简单使用

Fiddler使用方法

1.作用

  • 接口测试,发送自定义请求,模拟小型的接口测试
  • 定位前后端bug,抓取协议包,前后端联调
  • 构建模拟测试场景,数据篡改,重定向
  • 弱网测试,模拟限速操作,弱网,断网
  • 前端性能优化及分析

2.工作原理

fiddler类似于客户端服务器中间的一个代理服务器

请求和响应由fiddler转发,所以它能截取数据信息

3.安装后配置

配置抓取规则Rules

隐藏CONNECT 请求和304

Hide Image Requests: 隐藏所有图像请求,这样在日志或会话列表中就不会显示图像文件的请求。

Hide CONNECTs: 隐藏所有的 CONNECT 请求,这通常用于 HTTPS 代理,允许隧道 SSL/TLS 流量。

Automatic Breakpoints: 自动在每个请求上设置断点,这可以用于调试目的,让每个请求都暂停,以便进行检查。

Customize Rules... Ctrl+R: 允许用户自定义规则,可能是通过快捷键 Ctrl+R 来访问规则定制界面。

Require Proxy Authentication: 要求代理身份验证,这意味着任何尝试通过代理的请求都需要提供认证信息。

Apply GZIP Encoding: 应用 GZIP 编码,这可以压缩传输的数据,减少传输大小,加快加载速度。

Remove All Encodings: 移除所有编码,这可能用于查看原始数据,不经过任何压缩或编码处理。

Hide 304s: 隐藏 304 状态码的响应,这表示自从上次请求后,内容没有变化,不需要重新下载。

Request Japanese Content: 请求日语内容,这可能用于模拟或测试针对特定语言的内容。

Automatically Authenticate: 自动进行身份验证,这可以用于自动处理需要认证的请求。

User-Agents: 用户代理设置,允许用户模拟不同的浏览器或设备来发送请求。

Performance: 性能设置,可能包括缓存、连接超时等性能相关的配置。

4.配置证书抓取HTTPS包

Tools下面的Option

把下面这些勾选上

5. 设置过滤器

抓取指定服务器的数据包

上面是请求信息,下面是响应信息

6. 模拟弱网测试

可以设置2G,3G,5G网

打开Rules下面的customize rules

找到

可以更改网络延迟,模拟各种网络环境

然后勾选performance的第一项完成调整

7. 断点调试

可以选择在请求前或是请求后打断点调试

选择请求前打断点

会被fiddler拦截

黄色按钮表示终止响应,绿色表示放行

这时候可以篡改请求的信息,然后放行提交

8. 如何定位前后端BUG

理论上:

请求参数有问题,那么是前端的问题;

请求参数没有问题,响应的参数有问题,那就是后端的问题。

但是没有详细接口文档的情况下,无法判断接口参数是否有问题

实际上:

查看响应结果

结合需求文档和日志,综合对比

假如通过抓包发现前端参数名错误或是参数值为空,从而导致后端报错。那么是前端的问题

可以按照接口文档对应数据填写上传验证

相关推荐
还是鼠鼠1 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味2 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj3 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠3 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象3 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录3 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX4 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing4 小时前
react redux监测值的变化
前端·javascript·react.js
engchina4 小时前
CSS 样式化表格:从基础到高级技巧
前端·css
m0_528723814 小时前
react中useEffect的使用
前端·javascript·react.js