前端调试利器之Fiddler+Stave

背景

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

介绍

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

前端调试利器之Fiddler+Stave_第1张图片
图片来自官网截图

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

安装

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

前端调试利器之Fiddler+Stave_第2张图片
Stave

使用

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

前端调试利器之Fiddler+Stave_第3张图片
添加规则

你可能感兴趣的:(前端调试利器之Fiddler+Stave)