Fiddler (二) : Script 的 用法
?
Fiddler (二) Script 用法(轉):http://www.cnblogs.com/mrzhoushare/articles/4953592.html
Fiddler 高級用法:Fiddler Script 與 HTTP 斷點調試:http://www.cnblogs.com/hushaojun/p/5644645.html
?
通過前一篇博客 【Fiddler教程】,我們了解了Fiddler的基本用法,? 現(xiàn)在我們來看看Fiddler的高級用法. Fiddler Script。 ?
Fiddler 中的 script 可以讓我們自動修改 Http request 和 Response 的內容。? 而不用手動地去下"斷點"來修改 http Request 或Response 中的值。
?
Fiddler的作者
Fiddler 的作者是 Eric Lawrence 是個大師級的人物, 目前在微軟總部西雅圖工作。 他的博客是:?http://www.ericlawrence.com/Eric/
博客中能看到他的簡歷,以及一些生活照.
?
?
遇到問題如何向Fiddler的作者請教
?
Eric Lawrence?在Google 論壇中建了一個Fiddler 的討論組, 地址是:https://groups.google.com/forum/?fromgroups#!forum/httpfiddler
在這里Fiddler的使用者如果遇到任何問題,都可以這論壇里直接問Eric Law. Eric Law一般都會很快答復你。? 在問問題之前,請搜索下。因為你的問題很可能別人早就問過了。
?
?
關于Fiddler Script
?
Fiddler 包含了一個腳本文件可以自動修改Http Request 和Response.這樣我們就不需要手動地下"斷點"去修改了,
實際上它是一個腳本文件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
?
?
Fiddler Script 是用 JScript.NET 語言寫的
?
我從來沒聽說過 JScript.NET 語言,可能是 JScript的 升級版吧。? 寫起來有點類似C#
?
?
Fiddler Script Editor
?
FiddlerScriptEditor 已經(jīng)包含在最新版的?Fiddler 里面,不需要單獨下載(老版本需要單獨下載)
FiddlerScriptEditor is included in latest version of Telerik Fiddler and is not available as a separate download.
Fiddler Script Editor 提供了語法高亮,以及智能提示的功能, 如下圖:
?
?
CustomRules.js中的主要方法
?
? ? ? ? // 在這個方法中修改Request的內容, 我們用得最多,
? ? ? ? static function OnBeforeRequest(oSession: Session)
? ? ? ??
? ? ? ? // 在這個方法中修改Response的內容,
? ? ? ? static function OnBeforeResponse(oSession: Session)
? ? ? ??
? ? ? ? // 在個方法中包含F(xiàn)iddler 命令。??在Fiddler界面中左下方的QuickExec Box
? ? ? ? static function OnExecAction(sParams: String[])
?
?
給Fiddler添加菜單
?
Fiddler可以模擬各種瀏覽器,你可以通過點擊菜單 Rules->User-Agents
不過好像沒有 Iphone 4S safari 的, 我們現(xiàn)在添加一個。? 先查詢在網(wǎng)上Iphone 4S safari 的user-Agents, 然后添加如下代碼代碼就可以了
RulesStringValue(23, "Iphone 4S safari", "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7")編輯 腳本:
?保存腳本, 重啟Fiddler就可以看到菜單中多了個Iphone 4s
你可以把你常用的操作,都定義成一個menu,
?
?
修改Session在Fiddler的顯示樣式
?
我們可以控制Session在Fiddler中顯示的樣式, 具體文檔是:?http://www.fiddler2.com/Fiddler/dev/SessionFlags.asp
把這段腳本放在OnBeforeRequest(oSession: Session) 方法下,并且點擊"Save script", 這樣所有的cnblogs的會話都會顯示紅色.
if (oSession.HostnameIs("www.cnblogs.com")) {oSession["ui-color"] = "red";}運行效果如
?
?
如何在Fiddler Script中修改Cookie
?
cookie其實就是 request 中的一個 header.
? ? ? ? // 刪除所有的cookie
? ? ? ? oSession.oRequest.headers.Remove("Cookie");
? ? ? ??
? ? ? ? // 新建cookie
? ? ? ? oSession.oRequest.headers.Add("Cookie", "username=testname;testpassword=P@ssword1");
注意:?Fiddler script 不能直接刪除或者編輯單獨的一個cookie, 你需要用 replace 方法 或者 正則表達式的方法去操作 cookie 的string
static function OnBeforeRequest(oSession: Session) { if (oSession.HostnameIs('www.example.com') && oSession.uriContains('pagewithCookie') && oSession.oRequest.headers.Contains("Cookie")) { var sCookie = oSession.oRequest["Cookie"]; // 用replace方法或者正則表達式的方法去操作cookie的stringsCookie = sCookie.Replace("cookieName=", "ignoreme="); oSession.oRequest["Cookie"] = sCookie; }?
?
如何在Fiddler Script中修改Request 中的body
?
方法一:
static function OnBeforeRequest(oSession: Session) { if(oSession.uriContains("http://www.cnblogs.com/TankXiao/")){// 獲取Request 中的body字符串var strBody=oSession.GetRequestBodyAsString();// 用正則表達式或者replace方法去修改stringstrBody=strBody.replace("1111","2222");// 彈個對話框檢查下修改后的body FiddlerObject.alert(strBody);// 將修改后的body,重新寫回Request中oSession.utilSetRequestBody(strBody);} }方法二:? 提供了一個非常簡單的方法,可以直接替換body中的數(shù)據(jù)
? ? ? ???oSession.utilReplaceInRequest("1111", "2222");
?
?
?
Fiddler 高級用法:Fiddler Script 與 HTTP 斷點調試
?
之前在《關于 WEB/HTTP 調試利器 Fiddler 的一些技巧分享》中系統(tǒng)的介紹過 Fiddler 的原理與一些常見技巧,但那篇文章只是入門科普,并不深入,今天要介紹到的內容相對更加高級與深入,擴展性更好,功能更加強大。
?
1、Fiddler Script
?
1.1 Fiddler Script 簡介
在web前端開發(fā)的過程中,fiddler是最常使用的一款調試工具。在大多數(shù)情況下,通過fiddler默認菜單的功能就可以基本滿足開發(fā)者的調試需求,然而如果需要滿足更復雜的調試場景時,單純通過fiddler菜單已無法達到開發(fā)者的調試要求。
如果用戶需要修改 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的優(yōu)點就體現(xiàn)出來了,Fiddler Script的本質其實是用JScript.NET語言寫的一個腳本文件CustomRules.js,語法類似于C#, 通過修改CustomRules.js可以很容易的修改http的請求和應答,不用中斷程序,還可以針對不同的URI做特殊的處理,除此之外還可以根據(jù)開發(fā)者的需要去定制菜單。
? ? ? ? 腳本文件 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。
?
?
1.2 Fiddler Script 用法
?
1.2.1 修改 session 樣式
?
- 修改 session 的顯示樣式(顏色等)
?
- 修改http請求和應答
在如下函數(shù)中修改http請求頭:
? ? ? ? static function OnBeforeRequest(oSession: Session)
在如下函數(shù)中修改http應答:
? ? ? ? static function OnBeforeResponse(oSession: Session)
在如下函數(shù)中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";// 修改hostoSession.host = "kyfw.12306.cn"; // 修改Origin字段oSession.oRequest["Origin"] = "https://kyfw.12306.cn";// 刪除所有的cookieoSession.oRequest.headers.Remove("Cookie");// 新建cookieoSession.oRequest.headers.Add("Cookie", "username=yulesyu;");// 修改Referer字段oSession.oRequest["Referer"] = "https://kyfw.12306.cn/otsweb/loginAction.do";// 獲取Request中的body字符串var strBody=oSession.GetRequestBodyAsString();// 用正則表達式或者replace方法去修改stringstrBody=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"; }?
1.2.2 修改 URI
? ? ? ? 將請求 URI 中 http 協(xié)議 替換成 https 協(xié)議,例如:
? ? ? ? oSession.fullUrl = "https" + oSession.fullUrl.Substring(oSession.fullUrl.IndexOf(':'));
?
1.2.3 定制菜單
?
- 定制 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函數(shù)中加入: // Q-UA Overrides if (null != sQUA) {oSession.oRequest["Q-UA"] = sQUA; }?
- 定制 tool 菜單的子菜單
?
- 定制右鍵子菜單
?
1.3 Fiddler Script 限速
限速對于web前端研發(fā)是非常重要的,由于開發(fā)者的機器一般配置都很高,并且都是把相關文件代理到本地來調試程序,所以很難模擬到用戶的真實使用情況,如正在下載js,css等靜態(tài)資源的時候,頁面的一個渲染情況。當網(wǎng)速很慢的時候,我們更希望看到的是先渲染出用戶界面,而不是讓用戶看到一片空白。那么這個時候,網(wǎng)絡限速就能很方便在localhost針對類似的情況來做性能調試與優(yōu)化。
我們可以通過fiddler來模擬限速,因為fiddler本來就是個代理,它提供了客戶端請求前和服務器響應前的回調接口,我們可以在這些接口里面自定義一些邏輯。Fiddler的模擬限速正是在客戶端請求前來自定義限速的邏輯,此邏輯是通過延遲發(fā)送數(shù)據(jù)或接收的數(shù)據(jù)的時間來限制網(wǎng)絡的下載速度和上傳速度,從而達到限速的效果。
fiddler提供了一個功能,讓我們模擬低速網(wǎng)路環(huán)境。啟用方法如下:Rules → Performances → Simulate Modem Speeds。勾選之后,你會發(fā)現(xiàn)你的網(wǎng)路瞬間慢下來了很多。至于慢下來后網(wǎng)絡速度是多少,則由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的時間(毫秒),比如50kB/s 需要delay20毫秒來接收數(shù)據(jù),所以根據(jù)你需要的網(wǎng)絡速度來修改上述值。
【注】:存檔之后,原本已經(jīng)勾選的Simulate Modem Speeds 會被取消勾選,需要再到Rules → Performances → Simulate Modem Speeds 勾選,同時需要注意一定要禁用瀏覽器代理插件,以及修改完成后重啟瀏覽器才能生效。
?
?
2、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 意思是:所有原先發(fā)到 a.com 的 HTTP Request , Fiddler 都幫你轉發(fā)到 b.com ,而在瀏覽器中毫無感覺。 測試 debug 過程中常有這種需求,例如用 www. dev.demo.com 替換 www.demo.com 。
替換的方法有兩種,一種是暫時的,一種是永久的。
- 暫時的方法是在 Fiddler 左下角輸入:urlreplace www.demo.com www.dev.demo.com。按下Enter ,所有原先發(fā)到www.demo.com 的HTTP Request 就轉發(fā)到www.dev.demo.com 了。要清除轉發(fā),請在同一位置輸入:?urlreplace,然后按Enter 就可以了。更詳細的說明請參考Fiddler官方說明文件 - QuickExec Reference 。 可以發(fā)現(xiàn) urlreplace 做的是整個網(wǎng)址字串的取代,所以可以動手腳的地方不只于此。
- 永久的方法是修改 Fiddler的CustomRules.js ,注意是 .js ! 點下 Fiddler 上方的 Rules ,再點 Customize Rules :如果有安裝 FiddlerScript Editor ,會用 FiddlerScript Editor 開啟 CustomRules.js ,否則會用記事本開啟。 或者也可以到「我的文件 Fiddler2 Scripts 」直接編輯CustomRules.js 。
將CustomRules.js 存檔, Fiddler 會自動重新載入CustomRules.js ,原先發(fā)到www.demo.com 的HTTP Request 就會自動轉發(fā)到www.dev.demo.com 。
更詳細的說明請參考Fiddler官方說明文件- Script Samples 。
?
?
3、實戰(zhàn) HTTP 請求、響應的斷點調試
?
斷點命令介紹:
-
bpu 在 請求 開始時 中斷,
-
bpafter 在 響應 到達時 中斷,
-
bps 在特定 http狀態(tài)碼時 中斷,
-
bpv/bpm 在特定請求 method時 中斷。
提示:命令輸入?yún)^(qū)域輸入help,回車執(zhí)行會打開一頁面詳細介紹fiddler的所有命令。
也可以在菜單欄設置斷點,是針對所有的會話請求,不大實用,建議用命令。
?
以 bpu 為例演示斷點功能:
- (1)以淘寶無線H5為例,在瀏覽器打開m.taobao.com首頁。
- (2)在Fiddler命令行輸入?yún)^(qū)輸入“bpu”回車執(zhí)行清掉原有的斷點,然后輸入“bpu m.taobao.com/search.htm”回車執(zhí)行,接下來就會中斷URL中包含此地址的請求。
- (3)在瀏覽器淘寶首頁頂端搜索框輸入“充氣娃娃”后點擊搜索,此時請求被中斷,在Fiddler會話列表面板看到以紅色小圖標開頭被中斷的會話
- (4)點擊會話列表中被中斷的會話,依次進入Inspectors-->WebForms。此時請求并未發(fā)出,q參數(shù)即為查詢關鍵字,我們修改為“nike”,然后點擊“Break on Response”按鈕。注:在這里實現(xiàn)修改了請求數(shù)據(jù),其它的post數(shù)據(jù),甚至是headers里的cookie、referer、user-agent等都可以修改。
- (5)右邊面板Response區(qū)有響應內容了,這時Fiddler再次中斷了response,響應已到達Fiddler代理,但還沒返回給瀏覽器。點擊Inspectorsg下Response區(qū)的“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 會斷續(xù)執(zhí)行所有中斷,再次輸入 bpu 會清除所有的斷點。
-
如上第四點圖所示,這里有很多的操作選擇,就是選擇輸出內容,選擇之后,實際的響應數(shù)據(jù)就會這些替代,特別是最后一個find 操作a file:這個我們可以中斷一個圖片,然后這里選擇本地的一張圖片,這樣我們就可以替換頁面的圖片。比較強大的場景就是例如現(xiàn)網(wǎng)js出了問題,但是一般現(xiàn)網(wǎng)的js是壓縮過的,在firebug中根本無法調試,這樣我們可以把它映射到本地的一個原始版本,這樣firebug就會拿到一份原始的js,就可以方便的調試了。
?
?
4、Fiddler 遠程捕獲 Android / iPhone 請求
?
Android 或者 iPhone?上 APP 的請求對用戶來說是不可見的,不像 PC 上用瀏覽器 F12 可以很方便的調試,我們有沒有辦法去調試呢?
答案必然是有的,那就是 Fiddler 的代理可以支持 APP 遠程連接與抓包調試。過程如下:
(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 Microsoft Tag Reader) will be logged in the Fiddler window.?
It's extremely useful for testing/debugging - have fun!
?
?
5、Refer:
?
[1]?Fiddler的高級用法-Fiddler Script
http://cube.qq.com/?p=973
[2]?用Fiddler模擬低速網(wǎng)絡環(huán)境
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
?
?
?
?
總結
以上是生活随笔為你收集整理的Fiddler (二) : Script 的 用法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SpringBoot 自带工具类~Obj
- 下一篇: 模拟实现string其中的一些知识点