一、Fiddler在线调试功能和表白神器介绍

​

在以往的工作中，线上有bug，就需要把文件弄到本地来改，但经常会碰见本地环境又和线上不一样，导致调试困难，闭着眼睛改好之后传到线上去看对不对，不对的话又要改，循环往复，要多麻烦就有多麻烦啊。

今天给大家介绍一款前端神器，Fiddler ，它有个功能就是把线上文件映射到本地，通过拦截的方式，你在本地修改的内容实时的反映到线上，线上的环境，本地的文件，这非常方便我们调试，而且也不会给线上带来严重的错误，因为这些操作只对你本机有效果。

它还是对女神表白的神器哦！就冲这句话给个赞哦！就冲这句话给个赞哦！就冲这句话给个赞哦！

二、Fiddler实现在线调试原理

首先还是得看Fiddler工作原理图，如下：

​
在Fiddler的AutoResponder页签设置匹配规则，服务器返回的数据先返回到Fiddler上，返回的数据如果和设置的匹配规则匹配成功，则自动根据设置的后续动作进行返回到客户端（浏览器上）

三、重定向功能操作步骤

以篡改百度首页图片LOGO为例：百度默认LOGO图片如下：

    ​

1.打开Fiddler，百度首页，抓取到如下图片资料

​

2.选中Fiddler的AutoResponser页签并选中Enable rules（启用规则）和Unmatched requests passthrough （允许未匹配到的请求正常响应！）

​

3.选中左侧编号为12的图片资源拖至右侧AutoResponder页签

​

4.点开Rule Editor下的第二个下拉框并点击Find a file，选择任意的一张本地图片​

5.选中图片后点击一下Save保存按钮，如下图

​

6.再次在浏览器里面打开百度：并且按Shift+F5（去缓存刷新）看看效果！

​

在你的女神电脑上设置完成后，只要打开Fiddler抓包工具，那么这就是女神专属的百度首页了！

四、其他常用匹配规则和常用处理方式介绍

1.常用匹配规则设置介绍

(1) 无前缀表示基本搜索，表示搜索到字符串就匹配

(2)前缀为“EXACT:”表示完全匹配（大小写敏感）

(3) 前缀为“NOT:”表示发现就不匹配

(4) 前缀为“REGEX:”表示使用正则表达式匹配

(5) 前缀为“REGEX:(?insx)”表示匹配方式

2.常用处理方式介绍

(1) 设置返回状态码

(2) 自动断点：bpu、bpafter

(3) 超时返回：*delay:100

(4) 颜色标记：*flag:ui-backcolor=#FFD700

(5) 设置头部信息：*header:HeaderName=NewValue

(6) 重定向网址：*redir:http://www.example.com