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

理论上:

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

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

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

实际上:

查看响应结果

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

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

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

相关推荐
前端热爱者3 分钟前
vue-element-admin npm install 安装失败,tui-editor更名导致
前端·vue.js·npm·tui-editor
tester Jeffky16 分钟前
深入探索Vue.js中的class绑定:动态样式管理的核心机制
前端·javascript·vue.js
wsdf6gu19 分钟前
**掌握文本切分:在自然语言处理中的应用技巧**
前端
桃园码工23 分钟前
5_HTML5 SVG (1) --[HTML5 API 学习之旅]
前端·html5·svg
kk爱闹32 分钟前
弹窗组件嵌套弹窗组件问题
前端·javascript·vue.js
这可不简单32 分钟前
vue2 和 vue3 :关于keep-alive 使用的不同
前端·vue.js·vue
Benson叔32 分钟前
Vue3动态表单实现
前端·javascript·vue.js
雪芽蓝域zzs41 分钟前
Vue Web开发(十)
前端·javascript·vue.js
__十七1 小时前
使用html2canvas库对可滚动的dom节点导出全量的图片
前端·javascript·vue.js·elementui
Cachel wood1 小时前
Vue.js前端框架教程6:Element UI框架
前端·vue.js·git·elasticsearch·ui·前端框架