前端调试利器之Fiddler+Stave

背景

前面写了一篇关于Browsersync的文章，但是Browsersync只能调试本地代码，如果要是调试已经上线或者已经发布到测试服务器的代码就不行了。想必做前端的小伙伴都会遇到这个问题吧。下面就给大家介绍一个工具fiddler以及它的一个插件Stave。

介绍

先介绍一下fiddler是干啥的，用官网的一句话说就是任何浏览器，系统或平台的免费网络调试代理。支持任何浏览器，任何系统，任何平台。主要特征有：
Web调试
解密HTTPS流量和解压缩Web会话；分析会话数据；调试流量
性能测试
HTTP/HTTPS流量记录
Web会话操作
可以对会话设置断点，也可以修改HTTP请求。可以将把文件请求映射到本地文件。
安全测试

图片来自官网截图

Stave是Fiddler的一个扩展插件，能够让Fiddler把文件请求映射到本地目录。之前调试单个文件的时候一般使用Fiddler自带的AutoResponder功能，不过AutoResponder每条自动响应规则只能对应一个本地文件， 在文件数目较多的时候，使用起来很不方便。

安装

Fiddler下载地址
Stave下载地址
先安装Fiddler再安装Stave,安装很简单，在这里就不写了。
ps:如果重启之后没有看到Stave，可能是stave安装后的路径不对。请在C盘下找到Stave.dll，然后放到fiddler安装路径的Scripts文件下。然后重启Fiddler就可以了。
Stave安装好之后重启一下Fiddler,就可以在Fiddler的有侧看到Stave的tab页，点开之后如下图：

Stave

使用

在Stave空白区域右键-添加，然后填写规则。第一行填写的是你要调试的服务器路径，第二行是你本地对应的文件目录。剩下的其他选项可以默认就行。点击确定之后就可以愉快的使用了。如果你要是在手机上访问的话，记得给手机设置代理就行（服务器地址就是你电脑的Ip地址，端口8888。手机和电脑要在同一个局域网内）

添加规则