Fiddler基础使用介绍

一、Fiddler基础介绍

  • Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的通讯,设置断点,查看所有的"进出"Fiddler的数据(指cookie.html、js、css等文件)。
  • Fiddler的作用:
  1. 通过抓包工具截取观察网站请求信息,更深入了解网站。
  2. 观察请求与返回的信息,帮助我们定位前后端bug。
  3. 通过抓包工具拦截请求数据,进行修改信息。绕过前端界面限制。
  4. 通过抓包工具模拟接口请求数据。

二、Fiddler安装

官方网站:https://www.telerik.com/download/fiddler

填写信息注册即可下载。

三、Fiddler界面功能介绍

四、Fiddler抓取https请求

Fiddler是不会主动抓取https请求的,需要配置下才会抓取https请求:

打开Fiddler --- Tools --- Options --- HTTPS。

首次点击会提示安装证书,点击同意即可。

配置成功后,就会抓取https请求了。

五、Fiddler抓取app请求

  • 获取电脑的IP地址。
  • 手机wifi设置代理。
  1. 代理手动,主机名输入电脑的IP地址,端口号输入8888(Fiddler默认)
  • 手机证书安装。
  1. 完成代理设置后,进入手机浏览器,按照下图在网址处输入上一步设置的ip:端口下载证书,如:IP:8888,(注意,此步骤需要连接对应wifi后操作,且不能连接vpn)。
  2. 进入证书下载页面后点击下载"FiddlerRoot certificate"。
  3. 下载成功后可打开手机设置,搜索"信任",点击"信任的凭据"->"用户",就可查看到刚才下载的证书。

若只想抓取安卓app的请求,可以设置:

  1. 打开Fiddler --- Tools --- Options --- HTTPS --- 下拉列表选择 from remote clients only

六、Fiddler过滤请求

  1. 在使用中因为在不停的发送请求,导致很多时候找不到想要的请求,我们可以使用过滤器。
  2. 配置:只抓取www.baidu.com的请求。
  3. 若想抓取多个域名用分号隔开(;)。

七、Fiddler删除数据

  1. 删除所有的:点击上面的×,选择Remove all。
  2. 单个删除:选中一条请求,按"delete"键删除。

八、Fiddler请求响应报文详解

我们现在抓到了一个接口,怎么看呢?看一个接口地址,接口参数,请求方式,响应内容。

选择这个inspectors检查,这里有接口的信息:

  1. headers:发送请求的头信息。这里要关注的,请求类型。这个类型。这个类型规定了我们发送的参数要求以这个类型发送。
  2. textView:参数的文本。
  3. Syntaxview:参数的加强版。
  4. WebForms:显示请求的GET参数和POST body内容,特别说明月,这里body应该是application/x-www-form-urien-coded格式。
  5. HexView:用十六进制数据显示请求。
  6. Auth:显示header中的Proxy-Authorization和Authorization信息电。
  7. Cookies:请求发送的cookies信息。
  8. Raw:将整个请求显示为纯文本。
  9. Json:如果请求的body是json格式,就是用分级的Json来显示它。
  10. XML:如果请求的body是XML格式,就是用分级的XML树来显示它。

九、Fiddler定位bug是前端还是后端

  1. 抓到的接口如何区分是前端bug,还是后端bug。
  2. 比如现在需求上面要求登录后,提升访问成功4个字,而现在没有提示,那这个时候到底是前端没显示,还是后端没给数据给前端没显示呢?
  3. 那就通过看接口响应回来的内容有没有返回这4个字,有这4个字则前端没显示,没有这4个字证明后端的问题。

十、Fiddler模拟弱网测试

  1. 网络设置:模拟调制解调器的速度。
  2. Rules --- Performances --- Simulate Modem Speeds。

想要自己设置网络:可以更改网络速度:

  1. Rules --- Customize Rules --- 就打开了 Fiddler ScriptEditor。
  2. 接着Ctrl+F查找 "m_SimulateModem" 标志位。
  3. 默认上传300毫秒,下载150毫秒。
  4. 更改后,继续Rules --- Performances --- Simulate ModemSpeeds 选择速度。

十一、Fiddler模拟mock测试

  • mock测试就是在测试过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试的测试方法,创建假数据。
  • 比如:我现在有个登录下单支付的一个流程要测试,现在开发没写完登录的接口,我没法进行后面的测试,我就可以用mock去进行测试。
  • 使用fiddier模拟登录成功的接口:
  1. 选择一个请求,点击AutoResponder勾选enable rules,点击Add Rule。
  2. 创建一个文本写入你需要的数据数据。
  3. 然后在选择一个接口,添加你的数据
  4. save保存。

十二、Fiddler篡改数据

  1. 打开fiddler之后。
  2. 对获取的请求进行挑选,选择对自己想要的那一条。
  3. 添加断点:在fiddler下方的命令窗口,输入 "bpu URL" 回车,添加证该请求前断点成功。
  4. 点击工具栏中Replay,点击下方出现的请求(还未返回),对WebForms中的值进行修改。
相关推荐
小明记账簿2 小时前
前端文件流下载方法封装
前端
IT_陈寒2 小时前
Vite 5大优化技巧:让你的构建速度飙升50%,开发者都在偷偷用!
前端·人工智能·后端
CodeCraft Studio2 小时前
Vaadin 25 正式发布:回归标准Java Web,让企业级开发更简单、更高效
java·开发语言·前端·vaadin·java web 框架·纯java前端框架·企业级java ui框架
Shirley~~2 小时前
PPTist 幻灯片工具栏Toolbar部分
开发语言·前端·javascript
|晴 天|2 小时前
Promise 与 async/await 错误处理最佳实践指南
开发语言·前端·javascript
vx_bisheyuange2 小时前
基于SpringBoot的便利店信息管理系统
前端·javascript·vue.js·毕业设计
晚烛2 小时前
智启工厂脉搏:基于 OpenHarmony + Flutter 的信创工业边缘智能平台构建实践
前端·javascript·flutter
Zsnoin能2 小时前
都快2026了,还有人不会国际化和暗黑主题适配吗,一篇文章彻底解决
前端·javascript
两个西柚呀2 小时前
es6和commonjs模块化规范的深入理解
前端·javascript·es6