使用Fiddler将线上文件映射到本地调试

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

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

打开 Fiddler 软件，会看到左右两个窗口，左侧窗口如下：

抓取到的每一条记录都会在上面列出来，每一条都有请求状态、使用的传输协议（HTTP、HTTPS）、域名、具体的URL、文件大小、缓存期限、文件类型、使用的浏览器等信息。

要想将文件映射到本地，在左侧窗口列出的记录中选中你要映射的文件，然后看下图：（右侧窗口）

第一步：在右侧窗口的顶部菜单找到AutoResponder，前面有个闪电的图标。

第二步：点击Add Rule按钮，选中的文件就会出现在下面紫色框中。

第三步：点击Local file to return or *Action to execute的下拉框。

第四步：选择下拉框的最后一项Find a file...

第五步：点击Save保存规则。

第四步会弹出文件选择窗口，选择要映射的本地文件即可，选择后就会出现在选择框中。

文件选择窗口：

选择文件后：

经过这一翻设置，看到下图这样的就表示生效了（有一条绿色的提示和闪电图标变成绿色），你就可以安心的改BUG啦，改完再传到线上。

如果不生效，检查下紫色框中的两项是否勾上，Enable automatic responses和Unmatched requests passthrough。

HTTPS：

如果网站用的协议是HTTPS，那要额外设置一下。

第一步：点击工具栏上的Tools菜单，弹出下拉列表

第二步：选择Fiddler Options...选项，弹出界面

第三步：选择HTTPS选项卡

第四步：勾上Capture HTTPS CONNECTs和Decrypt HTTPS traffic，勾上第二个的时候下面禁用的信息会变成可用。

设置完后点 OK 确定。

使用的时候会弹出一些证书可信的窗口，你确定就好。

批量映射文件：

要是要映射的文件很多，有没有批量设置呢，当然是有的，这要借助一个 Fiddler 的插件 Stave。

下载地址：Stave v1.0.1

下载一键安装后，Stave 就会出现在 Fiddler 的右侧选项卡上。

点击空白处，右键，添加..，弹出下图：

按要求输入相关的规则就可以了。

除了用上面的插件，其实在AutoResponder上用正则更方便，如下：

服务器上的资源：REGEX:http://cdn.mingsixue.com/(.*)

本地的资源：http://blog.me/resources/$1

需要注意的是，两者的目录结构是要对应起来的。

小结：Fiddler 是很强大的工具，这里我们只是用了它的一个小功能，其他功能有机会我们再说。

注意：要是开启了翻墙等的代理工具，记得先关掉哦，要不抓不到包的。