使用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 是很强大的工具，这里我们只是用了它的一个小功能，其他功能有机会我们再说。

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