1.Fiddler Script简介
在web前端开发的过程中,fiddler是最常使用的一款调试工具。在大多数情况下,通过fiddler默认菜单的功能就可以基本满足开发者的调试需求,然而如果需要满足更复杂的调试场景时,单纯通过fiddler菜单已无法达到开发者的调试要求。
如果用户需要修改http请求的头部或者修改http请求的应答头部,只能通过设置断点的方式,设置断点有两种方法:
第一种:打开Fiddler 点击Rules-> Automatic Breakpoint ->Before Requests(这种方法会中断所有的会话),消除断点的方法,点击Rules-> Automatic Breakpoint ->Disabled。
第二种: 在命令行中输入命令: bpu http://www.qq.com,这种方法只会中断http://www.qq.com,消除断点的方法就是在命令行中输入命令 bpu。
但是这两种方法当程序运行到断点处的时候都会停止,需要手动点击“Run to Completion”重新启动,非常不方便。而且通过fiddler的菜单功能,无法修改http请求的URI。此时Fiddler Script的优点就体现出来了,Fiddler Script的本质其实是用JScript.NET语言写的一个脚本文件CustomRules.js,语法类似于C#, 通过修改CustomRules.js可以很容易的修改http的请求和应答,不用中断程序,还可以针对不同的URI做特殊的处理,除此之外还可以根据开发者的需要去定制菜单。
脚本文件CustomRules.js位于C:\Documents and Settings\[your user]\My Documents\Fiddler2\Scripts\CustomRules.js 下,你也可以在Fiddler 中打开CustomRules.js 文件, 启动Fiddler, 点击菜单Rules->Customize Rules。Fiddler Script 的官方帮助文档的地址是:http://www.fiddler2.com/Fiddler/dev/ScriptSamples.asp。
可以直接编辑CustomRules.js文件,也可以下载 Fiddler Script Editor来编辑,下载的地址是http://www.fiddler2.com/fiddler/fse.asp。Fiddler Script Editor 提供了语法高亮,以及智能提示的功能, 方便编辑。
2.Fiddler Script的用法
2.1 修改session样式
修改session的显示样式(颜色等)
// 修改session中的显示样式 oSession["ui-color"] = "orange";
2.2 修改http请求和应答
在如下函数中修改http请求头:
static function OnBeforeRequest(oSession: Session) 在如下函数中修改http应答: static function OnBeforeResponse(oSession: Session) 在如下函数中fiddler命令(右下角的命令行): static function OnExecAction(sParams: String[]) 例如http请求中,对域名为p.21kunpeng.com的URI的http请求内容作修改: if (oSession.host.indexOf("p.21kunpeng.com") > -1) { // 修改session中的显示样式 oSession["ui-color"] = "orange"; // 移除http头部中的MQB-X5-Referer字段 oSession.oRequest.headers.Remove("MQB-X5-Referer"); // 修改http头部中的Cache-Control字段 oSession.oRequest["Cache-Control"] = "no-cache"; // 修改host oSession.host = "kyfw.12306.cn"; // 修改Origin字段 oSession.oRequest["Origin"] = "https://kyfw.12306.cn"; // 删除所有的cookie oSession.oRequest.headers.Remove("Cookie"); // 新建cookie oSession.oRequest.headers.Add("Cookie", "username=yulesyu;"); // 修改Referer字段 oSession.oRequest["Referer"] = "https://kyfw.12306.cn/otsweb/loginAction.do"; // 获取Request中的body字符串 var strBody=oSession.GetRequestBodyAsString(); // 用正则表达式或者replace方法去修改string strBody=strBody.replace("1111","2222"); // 弹个对话框检查下修改后的body FiddlerObject.alert(strBody); // 将修改后的body,重新写回Request中 oSession.utilSetRequestBody(strBody); }
例如http应答中,如果含有location并且location中含有字段initQueryUserInfo,则修改为http://p.21kunpeng.com:
var location = oSession.oResponse.headers["Location"]; if(oSession.PathAndQuery.indexOf("initQueryUserInfo") != -1) { oSession.oResponse.headers["Location"] = "http://p.21kunpeng.com"; }
2.3 修改URI
将请求URI中http协议替换成https协议,例如:
oSession.fullUrl = "https" + oSession.fullUrl.Substring(oSession.fullUrl.IndexOf(':'));
2.4 定制菜单
1. 定制rule菜单的子菜单
例如在rule菜单下定义一个修改http头部中的Q-UA字段的子菜单:
// 定义名为Q-UA的子菜单 RulesString("&Q-UA", true); // 生成Q-UA子菜单的radio选项 RulesStringValue(0,"x5_4.3", "ADRQBX43_GA/420411&X5MTT_3/024200&ADR&346014& U9200 &0&9065&Android4.0.3 &V3") RulesStringValue(1,"x5_5.0", "ADRQBX50_B1/500620&X5MTT_3/025001&ADR&346014& U9200 &21013&9255&Android4.2.2 &V3") RulesStringValue(2,"ios4.1", "IQB41_GA/370015&IMTT_3/370015&IPH&406040&iPodTouch4G&50003&8917&V3") RulesStringValue(3,"ios5.0", "IQB50_GA/500028&IMTT_3/500028&IPH&406040&iPhone4&50001&9219&iOS7.0.4&V3") RulesStringValue(4,"&Custom...", "%CUSTOM%") public static var sQUA: String = null;
还需要在OnBeforeRequest函数中加入:
// Q-UA Overrides if (null != sQUA) { oSession.oRequest["Q-UA"] = sQUA; }
2. 定制tool菜单的子菜单
// tool menu public static ToolsAction("tool menu") function DoManualYules(){ FiddlerObject.alert("tool menu"); // 根据需要定制 }
3. 定制右键子菜单
// tool menu public static ContextAction("context menu") function DoOpenInIE(oSessions: Fiddler.Session[]){ FiddlerObject.alert("context menu"); // 根据需要定制 }
3.Fiddler Script限速
限速对于web前端研发是非常重要的,由于开发者的机器一般配置都很高,并且都是把相关文件代理到本地来调试程序,所以很难模拟到用户的真实使用情况,如正在下载js,css等静态资源的时候,页面的一个渲染情况。当网速很慢的时候,我们更希望看到的是先渲染出用户界面,而不是让用户看到一片空白。那么这个时候,网络限速就能很方便在localhost针对类似的情况来做性能调试与优化。
我们可以通过fiddler来模拟限速,因为fiddler本来就是个代理,它提供了客户端请求前和服务器响应前的回调接口,我们可以在这些接口里面自定义一些逻辑。Fiddler的模拟限速正是在客户端请求前来自定义限速的逻辑,此逻辑是通过延迟发送数据或接收的数据的时间来限制网络的下载速度和上传速度,从而达到限速的效果。
fiddler提供了一个功能,让我们模拟低速网路环境。启用方法如下:Rules → Performances → Simulate Modem Speeds。勾选之后,你会发现你的网路瞬间慢下来了很多。至于慢下来后网络速度是多少,则由CustomRules.js 中如下程序控制的:
if (m_SimulateModem) { // Delay sends by 300ms per KB uploaded. oSession["request-trickle-delay"] = "300"; // Delay receives by 150ms per KB downloaded. oSession["response-trickle-delay"] = "150"; }
算法就是 1000/下载速度 = 需要delay的时间(毫秒),比如50kB/s 需要delay20毫秒来接收数据,所以根据你需要的网络速度来修改上述值。
【注】:存档之后,原本已经勾选的Simulate Modem Speeds 会被取消勾选,需要再到Rules → Performances → Simulate Modem Speeds 勾选。
4.参考文档
http://www.fiddler2.com/redir/?id=fiddlerscriptcookbook
http://docs.telerik.com/fiddler/knowledgebase/fiddlerscript/modifyrequestorresponse/
http://caibaojian.com/fiddler.html
http://www.cnblogs.com/tankxiao/archive/2012/04/25/2349049.html