美文网首页HTML5Web前端之路让前端飞
前端调试利器之Fiddler+Stave

前端调试利器之Fiddler+Stave

作者: 56a02a36178e | 来源:发表于2017-06-30 11:50 被阅读284次

    背景

    前面写了一篇关于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。手机和电脑要在同一个局域网内)

    添加规则

    相关文章

      网友评论

        本文标题:前端调试利器之Fiddler+Stave

        本文链接:https://www.haomeiwen.com/subject/kvsucxtx.html