前端调试利器之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。手机和电脑要在同一个局域网内)

添加规则
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简介 Fiddler(中文名称:小提琴)是一个HTTP的调试代理,以代理服务器的方式,监听系统的Http网络数据流...
    daoyidao阅读 144,027评论 15 169
  • Fiddler_官方网站Fiddler_官方文档Fiddler_官方视频Fiddler_官方插件1、Filddle...
    52Alice阅读 7,781评论 0 10
  • 你好!我是猿教授。 今天为你介绍另一款神级工具……对,「Web调试利器Fiddler」! 官方下载地址:https...
    大苍狗阅读 3,539评论 0 7
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,209评论 25 708
  • 我们刚开始学习数数的时候其实是使用加法。从1到2,从2到3,以至无穷。但是学会了乘法和除法后发现数字中有些是真的,...
    封捷阅读 510评论 0 2