[TOC]

对于前端开发,Fiddler应该是比较常用的网络请求监听工具了,之前为了跨平台还想使用wireshark,但是发现相比起来不太友好,折腾过后才发现原来Fiddler也有linux和mac版本(多亏了.net开源,需要安装mono,后面会有链接,当然体验会差点),本文就介绍几个有用却被用得比较少的技巧(本文基于Fiddler V4.6);

Fiddler在客户端和服务器之间假设了一个代理,我们可以通过它对请求和响应进行各种操作,

原理

1. 下载安装

win
mac/linux
linux中需要安装mono:

sudo apt-get install mono-complete
mono Fiddler.exe 

另外,也可以在mac中开启虚拟机运行windows系统然后运行Fiddler,具体可以参考 这篇文章 , 主要就是设置虚拟机网卡为 '桥接模式' 并记录下ip,然后在mac中设置网络proxies为虚拟机即可,若要抓取手机包,则将手机代理也设置为虚拟机的ip即可;

主界面

2. 插件安装

Fiddler也可以安装插件,由于安装的时候碰到点坑,这里也记录一下: 到 这里 下载插件,我下载了一个 Traffic Differ , 是个 exe 文件,双击安装并重启Fiddler( File-exit ,然后重新启动)后,选择了任意两个请求, 右键-compare(ctrl+w) ,提示我找不到 WinDiff.exe ,使用 EveryThing 搜索后发现生成的 WinDiff.exe 在 C:\Program Files (x86)\Microsoft WebMatrix 中,这个目录不再我系统 path 环境变量下,导致找不到,添加下即可;
P.S. 插件运行后除了生成 WinDiff.exe外,还在 Fiddler2/Scripts 目录下生成了 Differ.dll,可以查看下,另外,插件是否安装也可以在 tools – Telerik Fildder Options – Extensions 面板中查看;

3. 开启代理,实现请求中转

1. 设置Fiddler端口,允许远程连接

单击菜单栏: tools – Telerik Fildder Options – Connections,进行如下设置,其中端口号可以自定义,不冲突即可,并允许远程连接;

options

2. 手机端设置Wifi代理

当然,Fiddler安装的主机要跟手机在同一个无线网络中,在手机中设置wifi代理参数,其中端口号就是Fiddler中设定的,而路由ip地址是Fiddler所在主机的网址:

手机wifi代理设置

至此我们就成功使用Fiddler作为手机的代理了;

3. Filters过滤器设置

主要设定好后,要单击 Actions - Run Filterset Now 来使过滤条件生效

Filter

4. Composer模拟请求

可以直接拖拽会话列表中的已有请求到本页面,修改数据后,execute执行,但是我们有另一个利器 postman,就不需要这里了吧;

5. 模拟弱网络情况

直接上图

菜单开启弱网络模拟

代码修改网速

6. 重定向资源/模拟数据

开发时候,通常客户端和服务器是两拨人马在做,经常是接口文档已出,但接口并未实现或者无数据或数据不完整,导致客户端测试时候很痛苦,需要在程序中各种判断各种假数据,使用Fiddler可以使用本地资源替换服务端的response即可;

另外,Fiddler支持多种url匹配的方式(可以从 url pattern 下拉列表中查看):

• 字符匹配
  如输入 csdn,可以匹配 http://www.csdn.net/ 或者 http://blog.csdn.net/ 等
• 精确匹配
  以 EXACT 开头表示完全匹配，如上边的例子
  EXACT:http://blog.csdn.net
• 正则表达式匹配
  以 regex: 开头，如 regex:(?insx).*.(css)$ 表示匹配所有以css结尾的请求url ;

如下图,可以指定某个请求url后,指定其要返回的数据,比如某个根据接口文档信息生成的json文件,虽然同样都是造假数据,但是一来不影响程序逻辑,不增加代码,多人协同开发时,还方便复用和重现;
P.S. 即可要勾选 Unmatched requests passthrough, 不然所有请求的返回都会被拦截的;

AutoResponder

7. 其他方式修改reqeust/response

常碰到需要测试某个数据的时候,服务端又没有要求的数据,等着后台生成数据或者使用上面的方法模拟全部数据都比较麻烦,我们其实可以直接修改response内容,然后再返回给客户端的,这就是断点功能(这里以断response为例);

P.S. 修改request的话可以如下图

before request

1. 菜单栏启用断点After responses

这种方式会对所有请求都进行断点

automatic_breakpoints

response被断点后,可以在 Inspectors - Response TextView 面板中直接修改返回的数据,也可通过 Choose Response 下拉菜单中选择预定义的模板或者 通过 find a file 来指定本地文件作为resposne,类似上面说过的重定向资源:

直接修改数据

2. 命令行临时断点

菜单栏开启断点会对所有请求都做断点操作,不太方便,我们其实也可以临时对符合指定条件的请求做断点:
命令行中支持的几个断点方式如下:

// 当这些命令没有加参数时，会清空所有设置了断点的Http请求:
bpafter xxx: 中断 URL 中包含指定字符的全部 session 响应
bps xxx: 中断 HTTP 响应状态为指定字符的全部 session 响应
bpv xxx: 中断指定请求方式的全部 session 响应
bpm xxx: 中断指定请求方式的全部 session 响应,等同于bpv xxx
bpu xxx:与bpafter类似

比如输入: bpafter csdn,就会对所有请求url中含有 csdn 请求,在返回时进行断点操作;
P.S. 其他比较有用的命令行:

?text 选择所有 URL 匹配问号后的字符的全部 session
=status 选择响应状态等于给定状态的所有HTTP请求
=method 选择请求方式为指定method的请求会话,如 =get
>size 或者 <size 选择响应大小大于/小于size(单位b)的请求,如 >1k
@host  选择包含指定 host 的全部 HTTP请求
bold xxx 加粗满足指定条件的会话名,如 bold  csdn,则包含 `csdn` 的请求会被加粗显示
cls 或者 clear  清空会话列表,不过我习惯用快捷键ctrl+a ctrl+x来删除
select xxx 选择Content-Type头中包含指定字符串的响应，可用于选择文件格式,如 select image
go  跳过当前断点,跟常用工具栏上的 `go` 按钮功能一样
urlreplace www.demo.com  www.dev.demo.com  将host为 'www.demo.com'的请求替换为'www.dev.demo.com'

3. 脚本配置修改

官方文档
其实跟从菜单栏启动断点功能差不多,只不过更灵活, 通过 Rules - Customize Rules(Ctrl+R) 开启编辑器,初次运行可能会提示安装编辑器:
单击编辑器菜单 go - before OnBeforeResponse 会定位到 OnBeforeResponse 函数,在response返回给客户端前会先进入该方法,我们可以在里面进行某些设置:

if(oSession.uriContains("http://fepapi.debug.web.nd/v1/master_infos/2080998854")){
    oSession["ui-color"]="#0000ff";//设置颜色
    oSession.oResponse["newResponseHead"]="hello";//添加一个请求头
    oSession.oResponse.headers.Remove("Date");//删除请求头,测试大小写不敏感,request的类似
}

我们可以修改 OnBeforeRequest 函数,对请求头进行处理:

// 修改查询路径和条件 
if(oSession.PathAndQuery==”/v1/master_infos/2080998854”){//除主机名后面的完整部分 
    oSession[“ui-color”]=”red”;// 满足条件时显示颜色 
    oSession.PathAndQuery=”/v1/master_infos/2079941150”//修改查询路径 
}

//修改请求主机名 
if (oSession.HostnameIs(“fepapi.debug.web.nd”)) { 
    oSession.hostname=”www.baidu.com”; 
}

扩展几个小技巧:

1. 在会话列表中隐藏指定status的会话

可以参考 Rules - Hide 304s,隐藏304请求的写法,我们在 Fiddler ScriptEditor中搜索 304s,发现

// 在菜单栏中增加一个选项,也可以不用的
public static RulesOption("Hide 304s")
BindPref("fiddlerscript.rules.Hide304s")
var m_Hide304s: boolean = false;

//搜索布尔值 `m_Hide304s`
static function OnBeforeResponse(oSession: Session) {           
    if (m_Hide304s && oSession.responseCode == 304) {
        oSession["ui-hide"] = "true";
    }
}

8. 其他

部分快捷键

定位到命令行 : alt+q
快速改变会话行颜色 : ctrl+N (N为数字,0表示取消颜色,1为红色 ... 可通过 右键-mark 查看)
删除选中的会话 : ctrl+x
反选会话 : ctrl+i (这个配合命令行过滤以及ctrl+x可以让会话列表变得清爽清晰很多)

9. 参考资料

1. 官方文档
2. Fiddler Script 与 HTTP 断点调试
3. 调试之Fiddler修改返回结果Response
4. Fiddler(一)-Fiddler简介
5. Fiddler(二)-使用Fiddler做抓包分析
6. Fiddler(三)-Fiddler命令行和HTTP断点调试
7. 用Fiddler模拟低速网络环境
8. Fiddler常用命令
9. Mac/linux下使用Fiddler-虚拟机

相关文章推荐: Charles的使用