Fiddler抓包工具使用

闲聊：

最近换了博客，从csdn转到博客园，作为前端开发，自我感觉抓包工具的使用非常重要，所以又拿出来再整理一下。作为抓包工具，除了可以抓取请求响应定位问题之外，它还可以模拟接口返回数据，将线上资源转为本地资源展示修改的效果等等。。。

一、移动端抓包

从实习到现在一直在负责hybrid app开发，深刻体会到移动端调试问题的困难度。通过fiddler抓包我们可以查看接口请求问题，结合vconsole调试神器轻松检测移动端页面报错问题。

下面打开fiddler跟着操作

1.点击tools选择options

 

 2.查看本机IP（ipconfig命令）

 

3.手机连接wifi（wifi需和电脑在同一个局域网）并选择手动代理，此时就可以抓取移动端请求了

 

 二、Fiddler Script

上面说到结合vconsole检查页面报错，那么线上资源如何转到本地进行测试定位问题呢？使用fiddler Script输入以下代码，可以将静态资源转到本地（以下module和static开头资源为静态资源，portal开头为接口），反之也可以将本地请求接口请求转发到测试或生成环境。

if (oSession.url.indexOf("m.jf.10086.cn")> -1) {
    if (oSession.url.indexOf("/module")> -1) {
        oSession.url = oSession.url.Replace("m.jf.10086.cn","localhost:8080");
    }
    if (oSession.url.indexOf("/static")> -1) {
        oSession.url = oSession.url.Replace("m.jf.10086.cn","localhost:8080");
    }
    // if (oSession.url.indexOf("/portal")> -1) {
    //     oSession.url = oSession.url.Replace("m.jf.10086.cn","localhost:8080");
    // }
}        

三、AutoResponder

使用AutoResponder可以将接口响应数据转到本地资源。当然，在定位线上问题时你也可以使用这个功能将线上环境请求的js文件转到本地做出修改，可以实时看到效果。

1.点击fiddler AutoResponder Tab页面，勾选Enable automatic responses，Unmatched requests passthrough。

2.把左侧请求拖拽到AutoResponder 列表中。(或点“Add”创建规则)

3.第一个文本框是当前选择的url。在第二个文本框中选择Find a file...,选择本地保存后的文件。两者就建立了一一对应关系。