Fiddler

Fiddler是一款免费的http抓包调试工具,它是系统全局的,其本质是一台架设在本地的proxy,启动它之后所有的http请求都走fiddler通道,这样fiddler就可以对这些信息进行抓包和断点、替换内容等处理,非常方便web开发调试。从官网下载fiddler并安装,可能需要先安装.NET环境。

1.基本功能

HTTP抓包

启动fiddler之后就可以随便打开一个网页,可以看到fiddler已经抓下这个网页的所有http包,包括文本、图片、ajax请求等等。点击左侧栏目可以在右侧看到该http包的请求request、应答response的详细内容,各种查看方式。

建议把工具栏的Decode按钮打开,这样可以自动解码应答包。Fiddler支持只对IE的请求抓包,或者对系统全局的软件抓包,可以停止抓包,查找、过滤抓包内容等。

重新发送请求

在左侧已经获取到的请求列表中,随便选中一个,点击右键,选择“Replay”→“Reissue Requests”,可以看到fiddler马上向服务器发出该条请求。最方便的是,可以选择“Reissue And Edit”,编辑当前这条请求的参数,可以修改cookie、get、post等任何参数,然后发送请求,非常方便。

重新发送请求的快捷键是R,选中左边请求之后按键盘R即可重複发送该请求。

代理本地文件,实现nginx正向代理功能

代理本地文件可以让fiddler对于指定的url返回你想返回的内容。点击右侧的AutoResponder标签,勾选上Enable automatic responsesUnmatched requests passthrough。然后将左边的请求url拖到右侧的AutoResponder规则中,点击该规则,在右侧最下方的选择框中可以选择Find a file…指定到本地文件。更多的匹配规则详见

fiddler可以完整地代理一个域名或其子url到本地的文件夹,从而使fiddler像一台静态web服务器(如nginx)一样。例如将http://www.abc.com/m/的所有链接代理到本地的D:\code\web\m\目录下,那么AutoResponder的配置rule为(更多参考):

正则表达式:

regex:^http://www\.abc\.com/m/(?'fname'[^?]*).*
D:\code\web\m\${fname}

精确匹配:

EXACT:http://m.abc.com/
D:\code\web\m\index.html

这些规则有先后优先级,越靠前越先。

断点

断点是一个非常好用的特性,在浏览器发送请求request之前或者收到应答response之后,都可以用fiddler修改请求包或应答包的内容。点击菜单栏RulesAutomatic breakpoints,选择在request之前或response之后设置断点。比如是response之后,那麽每次HTTP请求返回数据包的时候,fiddler就会停止在这个包上,这时浏览器表现为等待数据,而fiddler可以对这个包进行修改,可以修改内容或替换成另外一个文件,然后继续断点,就可以在浏览器看到被修改后的数据,浏览器对此一无所知。

显示服务器IP

在菜单栏RulesCustomize Rules打开的自定义脚本中,在Main函数里面加上:

FiddlerObject.UI.lvSessions.AddBoundColumn("Server IP", 120, "X-HostIP");

然后重启一下Fiddler就可以在最后一列看到IP。

参考:Fiddler介绍

HTTPS抓包和解码

打开settings的Https标签,勾选Capture HTTPS ConnectsDecrypt HTTPS traffic,会提示安装证书,同意安装。

手机端wifi配置http代理到fiddler,需要安装https证书。使用手机浏览器访问fiddler所在机器的8888端口,例如http://192.168.0.5:8888/,然后点击You can download the FiddlerRoot certificate下载并安装证书,如果手机浏览器提示输入个名称,随便输入一个即可,例如fiddler。对于微信浏览器,它和QQ浏览器是共同的,要用QQ浏览器访问页面下载安装https证书。每台机器的fiddler证书是不同的,如果发现证书失效了,就重新安装。

禁止掉缓存,特别合适于开发

菜单Rules-Performance-Disable Caching

模拟低速网络

菜单Rules-Performance-Simulate Moderm Speeds

在数据返回之前修改数据

fiddler可以在数据返回给浏览器之前,修改数据再发给浏览器,浏览器对数据修改无感知。【特别注意】不要选中工具类的Stream模式,否则修改无法生效。

2.进阶功能

实现nginx正向代理功能

假设现在要手动指定域名abc.domain.com到ip地址1.2.3.4端口8787的映射,则在自定义脚本中的OnBeforeRequest函数中增加如下代码:

if (oSession.host=="abc.domain.com:8877") {
    oSession.bypassGateway = true; // Prevent this request from going through an upstream proxy
    oSession["x-overrideHost"] = "1.2.3.4:8787";  // DNS name or IP address of target server
}

保存即可生效,不必重启Fiddler。这个功能也可以解决webstorm没有监听在0.0.0.0上面的问题,可以这样重定向webstorm的请求:

        if(oSession.host.Equals("192.168.0.106:63342")) { // 这个ip是本机的局域网ip,手机可以访问这个页面来访问webstorm
            oSession.bypassGateway = true;
            oSession["x-overrideHost"] = "127.0.0.1:63342";
        }

常用的还是根据url的前缀来proxy pass:

if (oSession.url.StartsWith("abc.domain.com:8877/aaa/")) {
    oSession.bypassGateway = true; // Prevent this request from going through an upstream proxy
    oSession["x-overrideHost"] = "1.2.3.4:8787";  // DNS name or IP address of target server
}

更详细的配置可以看这里

关于写脚本的调试,可以将内容写到本地文件,也可以从本地文件读取内容,从而感知脚本的执行情况。

这个方法的缺点是没有办法将访问直接转向到本地文件上。

自定义菜单

自定义菜单很实用,要加在脚本的Handlers类成员变量里:

这个是子菜单,多个选一个(radio)的方式:

    public static RulesOption("Local", "环境", true) 
    var m_hosts_local: boolean = false; 
    public static RulesOption("Dev", "环境", true) 
    var m_hosts_dev: boolean = false; 
    public static RulesOption("Test", "环境", true) 
    var m_hosts_test: boolean = false; 
    public static RulesOption("IDC", "环境", true) 
    var m_hosts_idc: boolean = false;

这个是checkbox,单独开关:

    public static RulesOption("自定义菜单")
    var m_菜单变量: boolean = false;

3. 使用插件扩展功能

Fiddle Script编辑器

Fiddle Script编辑器下载地址。安装完之后,点击Rules > Customize Rules可以打开编辑器。

willow插件

willow插件可以很方便地把指定的URL替换成本地的文件。非常适合纯前端开发,但是没有nginx proxy pass的功能,太可惜了。

这篇文章关于willow的使用,写得不错。

URL重写插件

可以设定当访问http://www.abc.com/1234时,修改爲访问http://www.ccc.com/1234这样的类似功能,支持正则表达式,基本上和nginx的重写URL功能一样。

下载地址,下载后解压出UrlReplace.dll文件并放置到Fiddler安装路径\Scripts目录下,重啓fiddler即可。

安装后会在右侧看到一个叫Url Replace的Tab,里面有几个demo,一看就会了。

4. 结合weinre调试手机页面(包括https页面)

安装weinre

npm -g install weinre  # 或用cnpm也可以

运行weinre

weinre --httpPort 8899 --boundHost -all- # 默认是8080端口,一般和tomcat冲突

使用

浏览器打开http://<本机ip>:8899/可以看到weinre的主页,在http://<本机ip>:8899/client/#anonymous进入PC的调试页面,然后在手机端html页面最后面加上<script src="http://<本机ip>:8899/target/target-script-min.js#anonymous"></script>,然后手机访问页面,接口在PC端看到Remotes页面变绿色了,就可以像chrome一样调试了。

让fiddler自动加上这段javascript

编辑fiddler的脚本的OnBeforeResponse函数,加上:

        if (oSession.oResponse.headers.ExistsAndContains("Content-Type","text/html")){
            oSession.utilDecodeResponse();
            var body = oSession.GetResponseBodyAsString();
            if(body.Trim().EndsWith("</html>")) {
                body = body + "<script src='http://<本机ip>:8899/target/target-script-min.js#anonymous'></script>";
                oSession.utilSetResponseBody(body);
            }
        }

5. 其它类似的软件

这里有个看起来不错的工具:https://github.com/wuchangming/spy-debugger 是用nodejs做的,非windows操作系统推荐。

我已经使用了fiddler+weiren完全实现了spy-debugger这个功能,而且可控性更好。

文档更新时间: 2018-11-10 23:04   作者:nick