Fiddler 高级用法：Fiddler Script 与 HTTP 断点调试

一、Fiddler Script

1.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 提供了语法高亮，以及智能提示的功能， 方便编辑。

1.2 Fiddler Script用法

1.2.1 修改session样式

• 修改session的显示样式（颜色等）

?

1 2	// 修改session中的显示样式   oSession[ "ui-color" ] =  "orange" ;

• 修改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请求内容做修改：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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

?

1 2 3 4 5

var  location = oSession.oResponse.headers[ "Location" ];   if (oSession.PathAndQuery.indexOf( "initQueryUserInfo" ) != -1)    {            oSession.oResponse.headers[ "Location" ] =  "http://p.21kunpeng.com" ;   }

1.2.2 修改URI

将请求URI中http协议替换成https协议，例如：

oSession.fullUrl = "https" + oSession.fullUrl.Substring(oSession.fullUrl.IndexOf(':'));

1.2.3 定制菜单

• 定制rule菜单的子菜单

例如在rule菜单下定义一个修改http头部中的Q-UA字段的子菜单：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

/ 定义名为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;    }

• 定制tool菜单的子菜单
  

?

1 2 3 4 5

// tool menu   public  static  ToolsAction( "tool menu" )   function DoManualYules(){       FiddlerObject.alert( "tool menu" );  // 根据须要定制   }

• 定制右键子菜单

?

1 2 3 4 5

// tool menu   public  static  ContextAction( "context menu" )   function DoOpenInIE(oSessions: Fiddler.Session[]){       FiddlerObject.alert( "context menu" );  // 根据须要定制   }

1.3 Fiddler Script限速

限速对于web前端研发是很是重要的，因为开发者的机器通常配置都很高，而且都是把相关文件代理到本地来调试程序，因此很难模拟到用户的真实使用状况，如正在下载js,css等静态资源的时候，页面的一个渲染状况。当网速很慢的时候，咱们更但愿看到的是先渲染出用户界面，而不是让用户看到一片空白。那么这个时候，网络限速就能很方便在localhost针对相似的状况来作性能调试与优化。

咱们能够经过fiddler来模拟限速，由于fiddler原本就是个代理，它提供了客户端请求前和服务器响应前的回调接口，咱们能够在这些接口里面自定义一些逻辑。Fiddler的模拟限速正是在客户端请求前来自定义限速的逻辑，此逻辑是经过延迟发送数据或接收的数据的时间来限制网络的下载速度和上传速度，从而达到限速的效果。

fiddler提供了一个功能，让咱们模拟低速网路环境。启用方法以下：Rules → Performances → Simulate Modem Speeds。勾选以后，你会发现你的网路瞬间慢下来了不少。至于慢下来后网络速度是多少，则由CustomRules.js 中以下程序控制的：

?

1 2 3 4 5 6 7 8 9 10

...   var  m_SimulateModem: boolean =  true ;   ...   if  (m_SimulateModem) {      // Delay sends by 500ms per KB uploaded.       oSession[ "request-trickle-delay" ] =  "500" ;        // 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 勾选，同时须要注意必定要禁用浏览器代理插件，以及修改完成后重启浏览器才能生效。

二、Fiddler AutoResponder：请求、响应应答与替换

AutoResponder 是 Fiddler 比较重要且比较强大的功能之一。可用于拦截某一请求，并重定向到本地的资源，或者使用Fiddler的内置响应。可用于调试服务器端代码而无需修改服务器端的代码和配置，由于拦截和重定向后，实际上访问的是本地的文件或者获得的是Fiddler的内置响应。

2.1 线上档案替换为本机端档案

方法是点下Fiddler 右上的AutoResponder ，勾选Enable automatic responses 和Unmatched requests passthrough ，按下右边的Add ；再将下方的Rule Editor 第一行修改成线上档案位址（线上档案位址也可使用Regular Expression ，开头加上regex: 便可。）；按下Rule Editor 第二行右边的箭头，选择Find a file ... ；选择要替换成的本机端档案，按下右边的SAVE ，大功告成！

将线上档案替换成另外一个线上档案，步骤几乎如出一辙，差异仅在Rule Editor 第二行填入的是另外一线上档案位址：

更多AutoResponder的说明请参考Fiddler官方文件- AutoResponder Reference 。

2.2 Fiddler替换HTTP Request Host

这边指的替换HTTP Request Host是，全部原先发到a.com的HTTP Request ， Fiddler都帮你转发到b.com ，而在浏览器中毫无感受。 测试debug过程当中常有这种需求，例如用www. dev.demo.com替换 www.demo.com 。

替换的方法有两种，一种是暂时的，一种是永久的。 暂时的方法是在Fiddler 左下角输入：

?

1	urlreplace www.demo.com www.dev.demo.com

按下Enter ，全部原先发到www.demo.com 的HTTP Request 就转发到www.dev.demo.com 了。

要清除转发，请在同一位置输入：

?

1	urlreplace

按Enter 就能够了。

更详细的说明请参考Fiddler官方说明文件- QuickExec Reference 。 能够发现urlreplace 作的是整个网址字串的取代，因此能够动手脚的地方不仅于此。

永久的方法是修改Fiddler的CustomRules.js ，注意是.js ！ 点下Fiddler 上方的Rules ，再点Customize Rules ：

若是有安装FiddlerScript Editor ，会用FiddlerScript Editor开启CustomRules.js ，不然会用笔记本开启。 或者也能够到「个人文件 Fiddler2 Scripts 」直接编辑CustomRules.js 。

?

1 2 3 4 5 6 7 8 9

请先在CustomRules.js 找到：      static  function OnBeforeRequest ( oSession : Session ) {     // ...   } 在函式OnBeforeRequest 中加入：      if  ( oSession . HostnameIs (  'www.demo.com'  ) )     oSession . hostname =  'www.dev.demo.com'  ;

将CustomRules.js 存档， Fiddler 会自动从新载入CustomRules.js ，原先发到www.demo.com 的HTTP Request 就会自动转发到www.dev.demo.com 。

更详细的说明请参考Fiddler官方说明文件- Script Samples 。

三、实战 HTTP 请求、响应的断点调试

断点命令介绍：

• bpu在请求开始时中断,

• bpafter在响应到达时中断,

• bps在特定http状态码时中断,

• bpv/bpm在特定请求method时中断。

提示：命令输入区域输入help，回车执行会打开一页面详细介绍fiddler的全部命令。

也能够在菜单栏设置断点，是针对全部的会话请求，不大实用，建议用命令。

以bpu为例演示断点功能：

（1）以淘宝无线H5为例，在浏览器打开m.taobao.com首页。

（2）在Fiddler命令行输入区输入“bpu”回车执行清掉原有的断点，而后输入“bpu m.taobao.com/search.htm”回车执行，接下来就会中断URL中包含此地址的请求。

（3）在浏览器淘宝首页顶端搜索框输入“充气娃娃”后点击搜索，此时请求被中断，在Fiddler会话列表面板看到以红色小图标开头被中断的会话

（4）点击会话列表中被中断的会话，依次进入Inspectors-->WebForms。此时请求并未发出，q参数即为查询关键字，咱们修改成“nike”，而后点击“Break on Response”按钮。注：在这里实现修改了请求数据，其它的post数据，甚至是headers里的cookie、referer、user-agent等均可以修改。

（5）右边面板Response区有响应内容了，这时Fiddler再次中断了response，响应已到达Fiddler代理，但还没返回给浏览器。点击Inspectorsg下Response区的“response is encoded and may need to decoded before inspection.Click here to transform”后，便可在TextView tab看到返回的html内容。在这里修改response中的title部分，而后点击“Run to Completino"把修改后的response返回给浏览器。

（6）回到浏览器，搜索出关键字为“nike”的结果，而不是“充气娃娃”，标题也被修改成“搜索充气娃娃”。

其余：

• 命令行输入 go 会断续执行全部中断，再次输入 bpu 会清除全部的断点。

• 如上第四点图所示，这里有不少的操做选择，就是选择输出内容，选择以后，实际的响应数据就会这些替代，特别是最后一个find 操做a file：这个咱们能够中断一个图片，而后这里选择本地的一张图片，这样咱们就能够替换页面的图片。比较强大的场景就是例如现网js出了问题，可是通常现网的js是压缩过的，在firebug中根本没法调试，这样咱们能够把它映射到本地的一个原始版本，这样firebug就会拿到一份原始的js，就能够方便的调试了。

四、Fiddler 远程捕获 Android/iPhone 请求

Android 或者 iPhone 上 APP 的请求对用户来讲是不可见的，不像 PC 上用浏览器 F12 能够很方便的调试，咱们有没有办法去调试呢？

答案必然是有的，那就是 Fiddler 的代理能够支持 APP 远程链接与抓包调试。过程以下：

（1）Start Fiddler then open the Fiddler Options... window

（2）and in the General tab, ensure Allow remote computers to connect is checked.

（3）In the Connections tab, check Act as system proxy on startup and verify what port is set (eg. 8888).

        Once you've saved those settings you need to stop and re-start Fiddler.

（4）Once Fiddler has re-started, verify that the Capture Traffic menuitem is ticked.

（5）You need to know your computer's wireless-network IP address to configure the iPhone. This screenshots shows the Command Prompt > ipconfig output:

（6）With the computer IP address and Fiddler port, go to your iPhone/Android's Wifi Settings and scroll down to the HTTP Proxy, choose Manual and input the Fiddler proxy info:

Note：if you change  iPhone/Android's Wifi Proxy Settings，you must re-connect your wifi to effect.

（7）If everything has been setup right, anything you do in Safari or other internet applications (like, say Microsoft Tag Reader) will be logged in the Fiddler window. 

It's extremely useful for testing/debugging - have fun!

五、Refer：

[1] Fiddler的高级用法-Fiddler Script

http://cube.qq.com/?p=973

[2] 用Fiddler模拟低速网络环境

http://caibaojian.com/fiddler.html

[3] Fiddler (二) Script 用法

http://www.cnblogs.com/tankxiao/archive/2012/04/25/2349049.html

[4] 抓包工具：Fiddler 2-强大功能之一 断点

http://chessman-126-com.iteye.com/blog/2001288

[5] 【HTTP】Fiddler（三）- Fiddler命令行和HTTP断点调试

http://blog.csdn.net/ohmygirl/article/details/17855031

[6] 【HTTP】Fiddler（二） - 使用Fiddler作抓包分析

http://blog.csdn.net/ohmygirl/article/details/17849983

[7] 【HTTP】Fiddler（一） - Fiddler简介

http://blog.csdn.net/ohmygirl/article/details/17846199

[8] Using QuickExec

http://docs.telerik.com/fiddler/knowledgebase/quickexec

[9] Add Rules to Fiddler

http://docs.telerik.com/fiddler/extend-fiddler/addrules

[10] 关于 WEB/HTTP 调试利器 Fiddler 的一些技巧分享

http://my.oschina.net/leejun2005/blog/151103

[11] Monitoring iPhone web traffic (with Fiddler)

http://conceptdev.blogspot.com/2009/01/monitoring-iphone-web-traffic-with.html

[12] How to change proxy settings in Android (especially in Chrome)

http://stackoverflow.com/questions/21068905/how-to-change-proxy-settings-in-android-especially-in-chrome