Home / Blog / debug

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

Author: Vic.Wang 2015/07/31 Tags:fiddler映射本地文件redirectdebug调试

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

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

fiddler界面

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

fiddler主界面

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

fiddler文件选择

要想将文件映射到本地,在左侧窗口列出的记录中选中你要映射的文件,然后看下图:(右侧窗口)

fiddler添加规则

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

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

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

fiddler选择本地文件

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

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

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

文件选择窗口:

文件选择窗口

选择文件后:

选择文件后

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

设置成功

如果不生效,检查下紫色框中的两项是否勾上,Enable automatic responsesUnmatched requests passthrough

HTTPS:

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

HTTPS设置
HTTPS设置2

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

第二步:选择Fiddler Options...选项,弹出界面

第三步:选择HTTPS选项卡

第四步:勾上Capture HTTPS CONNECTsDecrypt HTTPS traffic,勾上第二个的时候下面禁用的信息会变成可用。

设置完后点 OK 确定。

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

批量映射文件:

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

下载地址:Stave v1.0.1

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

stave界面

点击空白处,右键添加..,弹出下图:

stave添加

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

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

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

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

正则替换

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

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

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