之前在《關(guān)于 WEB/HTTP 調(diào)試?yán)?Fiddler 的一些技巧分享》中系統(tǒng)的介紹過 Fiddler 的原理與一些常見技巧,但那篇文章只是入門科普,并不深入,今天要介紹到的內(nèi)容相對(duì)更加高級(jí)與深入,擴(kuò)展性更好,功能更加強(qiáng)大。
1、Fiddler Script
1.1 Fiddler Script簡(jiǎn)介
在web前端開發(fā)的過程中,fiddler是最常使用的一款調(diào)試工具。在大多數(shù)情況下,通過fiddler默認(rèn)菜單的功能就可以基本滿足開發(fā)者的調(diào)試需求,然而如果需要滿足更復(fù)雜的調(diào)試場(chǎng)景時(shí),單純通過fiddler菜單已無法達(dá)到開發(fā)者的調(diào)試要求。
如果用戶需要修改http請(qǐng)求的頭部或者修改http請(qǐng)求的應(yīng)答頭部,只能通過設(shè)置斷點(diǎn)的方式,設(shè)置斷點(diǎn)有兩種方法:
第一種:打開Fiddler 點(diǎn)擊Rules-> Automatic Breakpoint ->Before Requests(這種方法會(huì)中斷所有的會(huì)話),消除斷點(diǎn)的方法,點(diǎn)擊Rules-> Automatic Breakpoint
->Disabled。
第二種: 在命令行中輸入命令: bpu http://www.qq.com,這種方法只會(huì)中斷http://www.qq.com,消除斷點(diǎn)的方法就是在命令行中輸入命令 bpu。
但是這兩種方法當(dāng)程序運(yùn)行到斷點(diǎn)處的時(shí)候都會(huì)停止,需要手動(dòng)點(diǎn)擊“Run to Completion”重新啟動(dòng),非常不方便。而且通過fiddler的菜單功能,無法修改http請(qǐng)求的URI。此時(shí)Fiddler
Script的優(yōu)點(diǎn)就體現(xiàn)出來了,F(xiàn)iddler Script的本質(zhì)其實(shí)是用JScript.NET語言寫的一個(gè)腳本文件CustomRules.js,語法類似于C#, 通過修改CustomRules.js可以很容易的修改http的請(qǐng)求和應(yīng)答,不用中斷程序,還可以針對(duì)不同的URI做特殊的處理,除此之外還可以根據(jù)開發(fā)者的需要去定制菜單。
腳本文件CustomRules.js位于C:\Documents and Settings\[your user]\My
Documents\Fiddler2\Scripts\CustomRules.js 下,你也可以在Fiddler中打開CustomRules.js 文件, 啟動(dòng)Fiddler,點(diǎn)擊菜單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樣式
[if !supportLists]·????????[endif]修改session的顯示樣式(顏色等)
?//?修改session中的顯示樣式
?oSession["ui-color"]?=?"orange";
[if !supportLists]·????????[endif]修改http請(qǐng)求和應(yīng)答
在如下函數(shù)中修改http請(qǐng)求頭:
static function
OnBeforeRequest(oSession: Session)
在如下函數(shù)中修改http應(yīng)答:
static function
OnBeforeResponse(oSession: Session)
在如下函數(shù)中fiddler命令(右下角的命令行):
static function OnExecAction(sParams:
String[])
例如http請(qǐng)求中,對(duì)域名為p.21kunpeng.com的URI的http請(qǐng)求內(nèi)容作修改:
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字符串
?varstrBody=oSession.GetRequestBodyAsString();
?//?用正則表達(dá)式或者replace方法去修改string
?strBody=strBody.replace("1111","2222");
?//?彈個(gè)對(duì)話框檢查下修改后的body???????????????
FiddlerObject.alert(strBody);
?//?將修改后的body,重新寫回Request中
oSession.utilSetRequestBody(strBody);
}
例如http應(yīng)答中,如果含有l(wèi)ocation并且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";
?}
1.2.2 修改URI
將請(qǐng)求URI中http協(xié)議替換成https協(xié)議,例如:
oSession.fullUrl = "https"
+ oSession.fullUrl.Substring(oSession.fullUrl.IndexOf(':'));
1.2.3 定制菜單
[if !supportLists]·????????[endif]定制rule菜單的子菜單
例如在rule菜單下定義一個(gè)修改http頭部中的Q-UA字段的子菜單:
/?定義名為Q-UA的子菜單
RulesString("&Q-UA",?true);
//?生成Q-UA子菜單的radio選項(xiàng)
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函數(shù)中加入:
?//?Q-UA?Overrides
?if?(null!=?sQUA)?{
?????oSession.oRequest["Q-UA"]?=?sQUA;
?}
[if !supportLists]·????????[endif]定制tool菜單的子菜單
[if !supportLineBreakNewLine]
[endif]
//?tool?menu
?public?static?ToolsAction("tool?menu")
?function?DoManualYules(){
?????FiddlerObject.alert("tool?menu");?//?根據(jù)需要定制
?}
[if !supportLists]·????????[endif]定制右鍵子菜單
?//?tool?menu
?public?static?ContextAction("context?menu")
?function?DoOpenInIE(oSessions:?Fiddler.Session[]){
?????FiddlerObject.alert("context?menu");?//?根據(jù)需要定制
?}
1.3 Fiddler Script限速
限速對(duì)于web前端研發(fā)是非常重要的,由于開發(fā)者的機(jī)器一般配置都很高,并且都是把相關(guān)文件代理到本地來調(diào)試程序,所以很難模擬到用戶的真實(shí)使用情況,如正在下載js,css等靜態(tài)資源的時(shí)候,頁面的一個(gè)渲染情況。當(dāng)網(wǎng)速很慢的時(shí)候,我們更希望看到的是先渲染出用戶界面,而不是讓用戶看到一片空白。那么這個(gè)時(shí)候,網(wǎng)絡(luò)限速就能很方便在localhost針對(duì)類似的情況來做性能調(diào)試與優(yōu)化。
我們可以通過fiddler來模擬限速,因?yàn)閒iddler本來就是個(gè)代理,它提供了客戶端請(qǐng)求前和服務(wù)器響應(yīng)前的回調(diào)接口,我們可以在這些接口里面自定義一些邏輯。Fiddler的模擬限速正是在客戶端請(qǐng)求前來自定義限速的邏輯,此邏輯是通過延遲發(fā)送數(shù)據(jù)或接收的數(shù)據(jù)的時(shí)間來限制網(wǎng)絡(luò)的下載速度和上傳速度,從而達(dá)到限速的效果。
fiddler提供了一個(gè)功能,讓我們模擬低速網(wǎng)路環(huán)境。啟用方法如下:Rules → Performances → Simulate Modem Speeds。勾選之后,你會(huì)發(fā)現(xiàn)你的網(wǎng)路瞬間慢下來了很多。至于慢下來后網(wǎng)絡(luò)速度是多少,則由CustomRules.js 中如下程序控制的:
...
?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的時(shí)間(毫秒),比如50kB/s 需要delay20毫秒來接收數(shù)據(jù),所以根據(jù)你需要的網(wǎng)絡(luò)速度來修改上述值。
【注】:存檔之后,原本已經(jīng)勾選的Simulate
Modem Speeds 會(huì)被取消勾選,需要再到Rules →Performances → Simulate Modem Speeds 勾選,同時(shí)需要注意一定要禁用瀏覽器代理插件,以及修改完成后重啟瀏覽器才能生效。
2、Fiddler?AutoResponder:請(qǐng)求、響應(yīng)應(yīng)答與替換
AutoResponder 是?Fiddler 比較重要且比較強(qiáng)大的功能之一。可用于攔截某一請(qǐng)求,并重定向到本地的資源,或者使用Fiddler的內(nèi)置響應(yīng)。可用于調(diào)試服務(wù)器端代碼而無需修改服務(wù)器端的代碼和配置,因?yàn)閿r截和重定向后,實(shí)際上訪問的是本地的文件或者得到的是Fiddler的內(nèi)置響應(yīng)。
2.1 線上檔案替換為本機(jī)端檔案
方法是點(diǎn)下Fiddler 右上的AutoResponder ,勾選Enable automatic responses 和Unmatched requests passthrough ,按下右邊的Add ;再將下方的Rule Editor 第一行修改為線上檔案位址(線上檔案位址也可以使用Regular
Expression ,開頭加上regex: 即可。);按下Rule
Editor 第二行右邊的箭頭,選擇Find a file ... ;選擇要替換成的本機(jī)端檔案,按下右邊的SAVE ,大功告成!
將線上檔案替換成另一個(gè)線上檔案,步驟幾乎一模一樣,差別僅在Rule Editor 第二行填入的是另一線上檔案位址:
更多AutoResponder的說明請(qǐng)參考Fiddler官方文件- AutoResponder Reference 。
2.2 Fiddler替換HTTP Request Host
這邊指的替換HTTP Request
Host是,所有原先發(fā)到a.com的HTTP Request , Fiddler都幫你轉(zhuǎn)發(fā)到b.com ,而在瀏覽器中毫無感覺。 測(cè)試debug過程中常有這種需求,例如用www. dev.demo.com替換 www.demo.com 。
替換的方法有兩種,一種是暫時(shí)的,一種是永久的。 暫時(shí)的方法是在Fiddler 左下角輸入:
urlreplace?www.demo.com?www.dev.demo.com
[if !supportLineBreakNewLine]
[endif]
按下Enter ,所有原先發(fā)到www.demo.com 的HTTP Request 就轉(zhuǎn)發(fā)到www.dev.demo.com 了。
要清除轉(zhuǎn)發(fā),請(qǐng)?jiān)谕晃恢幂斎耄?/p>
urlreplace
按Enter 就可以了。
更詳細(xì)的說明請(qǐng)參考Fiddler官方說明文件- QuickExec Reference 。 可以發(fā)現(xiàn)urlreplace 做的是整個(gè)網(wǎng)址字串的取代,所以可以動(dòng)手腳的地方不只于此。
永久的方法是修改Fiddler的CustomRules.js ,注意是.js ! 點(diǎn)下Fiddler 上方的Rules ,再點(diǎn)Customize
Rules :
如果有安裝FiddlerScript
Editor ,會(huì)用FiddlerScript Editor開啟CustomRules.js ,否則會(huì)用筆記本開啟。 或者也可以到「我的文件Fiddler2 Scripts 」直接編輯CustomRules.js 。
請(qǐng)先在CustomRules.js?找到:
??static?function?OnBeforeRequest(?oSession?:?Session?)?{
???//?...
}
在函式OnBeforeRequest?中加入:
??if?(?oSession?.?HostnameIs?(?'www.demo.com')?)
???oSession?.?hostname?=?'www.dev.demo.com'?;
將CustomRules.js 存檔, Fiddler 會(huì)自動(dòng)重新載入CustomRules.js ,原先發(fā)到www.demo.com 的HTTP Request 就會(huì)自動(dòng)轉(zhuǎn)發(fā)到www.dev.demo.com 。
更詳細(xì)的說明請(qǐng)參考Fiddler官方說明文件- Script Samples 。
3、實(shí)戰(zhàn) HTTP 請(qǐng)求、響應(yīng)的斷點(diǎn)調(diào)試
斷點(diǎn)命令介紹:
[if !supportLists]·????????[endif]bpu在請(qǐng)求開始時(shí)中斷,
[if !supportLists]·????????[endif]bpafter在響應(yīng)到達(dá)時(shí)中斷,
[if !supportLists]·????????[endif]bps在特定http狀態(tài)碼時(shí)中斷,
[if !supportLists]·????????[endif]bpv/bpm在特定請(qǐng)求method時(shí)中斷。
提示:命令輸入?yún)^(qū)域輸入help,回車執(zhí)行會(huì)打開一頁面詳細(xì)介紹fiddler的所有命令。
也可以在菜單欄設(shè)置斷點(diǎn),是針對(duì)所有的會(huì)話請(qǐng)求,不大實(shí)用,建議用命令。
以bpu為例演示斷點(diǎn)功能:
(1)以淘寶無線H5為例,在瀏覽器打開m.taobao.com首頁。
(2)在Fiddler命令行輸入?yún)^(qū)輸入“bpu”回車執(zhí)行清掉原有的斷點(diǎn),然后輸入“bpu m.taobao.com/search.htm”回車執(zhí)行,接下來就會(huì)中斷URL中包含此地址的請(qǐng)求。
(3)在瀏覽器淘寶首頁頂端搜索框輸入“充氣娃娃”后點(diǎn)擊搜索,此時(shí)請(qǐng)求被中斷,在Fiddler會(huì)話列表面板看到以紅色小圖標(biāo)開頭被中斷的會(huì)話
[if !supportLineBreakNewLine]
[endif]
(4)點(diǎn)擊會(huì)話列表中被中斷的會(huì)話,依次進(jìn)入Inspectors-->WebForms。此時(shí)請(qǐng)求并未發(fā)出,q參數(shù)即為查詢關(guān)鍵字,我們修改為“nike”,然后點(diǎn)擊“Break on Response”按鈕。注:在這里實(shí)現(xiàn)修改了請(qǐng)求數(shù)據(jù),其它的post數(shù)據(jù),甚至是headers里的cookie、referer、user-agent等都可以修改。
(5)右邊面板Response區(qū)有響應(yīng)內(nèi)容了,這時(shí)Fiddler再次中斷了response,響應(yīng)已到達(dá)Fiddler代理,但還沒返回給瀏覽器。點(diǎn)擊Inspectorsg下Response區(qū)的“response is encoded and may need to decoded before inspection.Click
here to transform”后,即可在TextView tab看到返回的html內(nèi)容。在這里修改response中的title部分,然后點(diǎn)擊“Run to Completino"把修改后的response返回給瀏覽器。
(6)回到瀏覽器,搜索出關(guān)鍵字為“nike”的結(jié)果,而不是“充氣娃娃”,標(biāo)題也被修改為“搜索充氣娃娃”。
其他:
[if !supportLists]·????????[endif]命令行輸入 go 會(huì)斷續(xù)執(zhí)行所有中斷,再次輸入 bpu 會(huì)清除所有的斷點(diǎn)。
[if !supportLists]·????????[endif]如上第四點(diǎn)圖所示,這里有很多的操作選擇,就是選擇輸出內(nèi)容,選擇之后,實(shí)際的響應(yīng)數(shù)據(jù)就會(huì)這些替代,特別是最后一個(gè)find 操作a file:這個(gè)我們可以中斷一個(gè)圖片,然后這里選擇本地的一張圖片,這樣我們就可以替換頁面的圖片。比較強(qiáng)大的場(chǎng)景就是例如現(xiàn)網(wǎng)js出了問題,但是一般現(xiàn)網(wǎng)的js是壓縮過的,在firebug中根本無法調(diào)試,這樣我們可以把它映射到本地的一個(gè)原始版本,這樣firebug就會(huì)拿到一份原始的js,就可以方便的調(diào)試了。
4、Fiddler 遠(yuǎn)程捕獲 Android/iPhone 請(qǐng)求
Android 或者 iPhone?上 APP 的請(qǐng)求對(duì)用戶來說是不可見的,不像 PC 上用瀏覽器 F12 可以很方便的調(diào)試,我們有沒有辦法去調(diào)試呢?
答案必然是有的,那就是 Fiddler 的代理可以支持 APP 遠(yuǎn)程連接與抓包調(diào)試。過程如下:
(1)Start Fiddler then open the?Fiddler Options?window
(2)and in the?Connections?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 MicrosoftTag Reader) will be logged in the Fiddler window.
It's extremely useful fortesting/debugging - have fun!
5、Refer:
[1]?Fiddler的高級(jí)用法-Fiddler Script
[if !supportLineBreakNewLine]
[endif]
[2]?用Fiddler模擬低速網(wǎng)絡(luò)環(huán)境
http://caibaojian.com/fiddler.html
[if !supportLineBreakNewLine]
[endif]
[3]?Fiddler (二) Script 用法
http://www.cnblogs.com/tankxiao/archive/2012/04/25/2349049.html
[if !supportLineBreakNewLine]
[endif]
[4]?抓包工具:Fiddler 2-強(qiáng)大功能之一斷點(diǎn)
http://chessman-126-com.iteye.com/blog/2001288
[if !supportLineBreakNewLine]
[endif]
[5]?【HTTP】Fiddler(三)- Fiddler命令行和HTTP斷點(diǎn)調(diào)試
http://blog.csdn.net/ohmygirl/article/details/17855031
[6]?【HTTP】Fiddler(二) - 使用Fiddler做抓包分析
http://blog.csdn.net/ohmygirl/article/details/17849983
[7]?【HTTP】Fiddler(一) - Fiddler簡(jiǎn)介
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]?關(guān)于 WEB/HTTP 調(diào)試?yán)?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 settingsin Android (especially in Chrome)