前面已经做了 Fiddler 原理和页面功能的介绍，而在实际工作中会用到 Fiddler 的很多功能，大部分功能需要设置。因此介绍一些常用功能的设置方法

捕获 HTTPS 请求

Options 位置：Tools -> Options
在 connections 设置监听的端口号，勾选允许远程计算机连接
图片1.jpg
在 HTTPS 勾选 decrypt HTPPS traffic，再勾选 ingore servers certificate errors(unsafe)，对弹出的对话框选择确定。并且安装证书
图片2.jpg

Fiddler 代理移动端上的请求

Android 设备

  • 长按 wifi 修改网络 -> 高级选项，代理，手动 –> 输入服务器主机名（IP）和服务器端口（8888）
  • 手机浏览器访问 IP：端口号来安装证书。如：192.168.1.1:8888
  • 证书安装好后，在手机访问页面，就可以在 Fidller 上抓到对应的请求了

图片3.png

iOS 设备

  • 点击 wifi 蓝色感叹号 -> 点击底部配置代理 -> 点击手动 -> 输入服务器（IP）和端口（8888）
  • 浏览器输入网址，提示是否允许显示描述文件，允许 -> 安装描述文件
  • 打开设置 -> 通用 –> 关于本机 -> 证书信任设置

  • 证书安装好后，在手机访问页面，就可以在 Fidller 上抓到对应的请求了

    命令行的使用

    图片4.jpg

    基础命令

  • <4k：筛选响应大小小于4kb大小的会话

  • <4000：筛选响应大小小于4000字节大小的会话
  • >4k：筛选响应大小大于4kb大小的会话
  • >4000：筛选响应大小大于4000字节大小的会话
  • ?searchtext：筛选包含searchtext 内容的请求
  • =status：筛选响应状态=状态的会话
  • =method：筛选请求方法=方法的会话
  • @host：筛选包含host的会话
  • g、go：恢复所有断点会话
  • cls、clear：清除会话列表
  • start：开始监听会话
  • stop：停止监听会话

  • quit：退出fiddler

    Fiddler 断点

    自动打断点

    Before Requests：向服务器发起请求前打中断
    After Responses：在服务器返回数据后中断
    修改后点击 Run to Completion 向客户端返回数据
    图片5.jpg

    通过命令设置断点

    Fiddler 提供了一个命令行接口，这里我们只关注断点相关的几个常用命令，其他的内容可以通过 help 查询

  • bpu str：给包含 str 的 url 设置一个请求断点，只拦截请求，不拦截响应

  • bpu：清除请求断点
  • bpafter str：给包含 str 的 url 设置一个响应断点，只拦截响应，不拦截请求
  • bpafter：清除响应断点
  • bps 404：给状态码是 404 的请求设置一个断点
  • bps：清除状态码断点
  • bpm post：给请求方法为 post 的请求设置一个断点
  • bpm：清除请求方法断点
  • bold str：给包含 str 的 url 加粗

  • bold：清除加粗

    Filters 过滤器

    过滤器功能介绍

    勾选 User Filters，则表示开启过滤功能，否则关闭
    图片6.jpg
    Action：

  • Run Filterset now：运行过滤器

  • Load Filterset：导入过滤规则
  • Save Filterset：保存过滤器到本地

图片7.jpg
文本框内输入需要标记或过滤的域名，多个域名使用“;”分号分割

实际使用

根据域名过滤时，在 Hosts 框中输入需要过滤的域名。如果要过滤/只显示域名下返回的 css、js、img 等，则需要在 Request Headers 中的 Hide if URL contains / Show only if URL contains 中输入匹配的正则表达式
如要隐藏文件资源，则正则表达式为：

  1. REGEX:(?insx)/[^\?/]*\.(css|ico|jpg|png|gif|bmp|wav|js)(\?.*)?$

图片8.jpg

Fiddler 改包

AutoResponder 请求重定向

为什么要用 AutoResponder？

  • 主要是进行会话的拦截，然后替换原始的资源
  • 允许从本地返回文件，代替服务器响应，而不用将文件发布到服务器
  • AutoResponder 类似于 Charles 的 MapLocal 功能，但是更强大，因为可以用正则去匹配
  • 平时我们可能需要观察某个请求返回特定的响应数据，但是该请求可能每次都会带有唯一的请求参数（如：时间戳），那就可以通过 AutoResponder 的正则去匹配该请求，无需 url 里关心唯一的请求参数，而且也可以根据 Heade 的属性去匹配 url
  • Fiddler 还提供了多种 response，不一定要自定义一个 response

图片9.jpg
红色圈：执行匹配规则，就是用来启动 AutoResponder
绿色圈：不匹配请求失败的 url
蓝色圈：添加匹配规则
橘色圈：因为正则较为复杂，可以用 Test 去测试自己写的正则能否匹配上对应 url

AutoResponder 的使用

图片10.jpg

  1. 需要勾选 enable rules、unmatched requests passthrough 选项
  2. 将左侧监控面板中截获到的请求，拖到 Autoresponder 面板中
  3. 选中该请求-右键-Edit response-textview，可修改服务端返回的内容（建议格式化之后再做修改，返回的内容结构会更清晰）
  4. 点击【save】按钮，并勾选该请求前方的复选框——客户端重新发起该请求的时候，就会返回修改的内容

正则表达式输入框：默认精准匹配，完全相同的请求地址才会被拦截，该编辑框支持正则表达式进行模糊匹配，如 REGEX:+.msDataController. 表示匹配所有包含 msDataController 字段的 url
*规则下拉框：可选择服务器返回不同的 code 值或返回一个本地文件；
Fiddler支持的拦截重定向的方式：
图片11.jpg

AutoResponder 中 regex 正则表达式匹配

.+ 一个或多个
.* 零个或多个
（？insx）不区分大小写
\ 转义

  1. 匹配规则：regex:(?inx)^https://.+\.gif$
  2. 简单理解：https开头，.gif结尾的url

AutoResponder 的实际运用

返回不同状态码可用于校验客户端是否正确处理错误码的展示效果
返回200/404给客户端（Fiddler 有自带的200/404响应可选择）
图片12.jpg
返回自定义response
图片13.jpg

Fiddler 请求构造器 Composer

Fiddler Composer 的功能就是用来创建 HTTP Request 然后发送。你可以自定义一个 Request,，也可以手写一个 Request，你甚至可以在 Web 会话列表中拖拽一个已有的 Request，来创建一个新的 HTTP Request
简单来说，Composer 可以用来接口测试，支持前后端接口连调，支持多种类型的请求，如 GET、POST。其中，POST 请求的参数写在 request body 中、一般协议选择 HTTP1.1
图片14.jpg

Composer 的使用

  1. 将左侧监控面板中截获到的请求，拖到 composer 面板中
  2. 修改 parsed 框 Request Body（post 请求需要修改，get 请求不需要修改）中的值
  3. 点击右上角【Execute】按钮，即可按照修改后的请求头和参数值重新发起一次请求，重新发起的请求在左侧监控面板中可查看，修改后的请求内容在右侧 history 中有记录

图片15.jpg

Fiddler Composer 的优势

  • 能从 Web 会话列表中，拖拽一个先前捕获到的 Request，可以进行篡改数据
  • 发送 Request 后，可以设置断点，继续修改 Request
  • 支持在 Request 中上传文件

  • 支持重复发送多次 Request

    timeline 网站性能分析

    选中多个请求，进行网站性能分析：

  • Y轴：发送的请求列表

  • 进度条为多线条型，则为缓冲模式；进度条为平滑的柱状，则为流模式
  • 绿色圆圈：连接被重用；红色圆圈：新创建的连接
  • 顶部圆圈：客户端连接到 fiddler，下部圆圈：fiddler 连接到目标服务器
  • 灰色箭头图标/红色！图标/绿色闪电图标：服务器返回一个错误代码（3XX，4XX，5XX）
  • 结尾处的红色X:意味着服务器发送了一个连接，连接被关闭或为private类型

图片16.jpg