1. 初識fiddler
作用:截獲HTTP/HTTPS請求,查看截獲的請求內容,偽造客戶端請求和服務器響應,測試網站性能,解密https的web會話,提供插件。
工作環境:支持所有操作系統和所有瀏覽器,對win有更好的支持。
當打開fiddler后,瀏覽器中工具>internet選項>連接>局域網設置高級>代理設置中,代理服務器地址被fiddler修改。
2.fiddler兩種代理模式:流模式(streaming)緩沖模式(buffering)
流模式:fiddler會實時把服務器返回給客戶端的數據返回給我們。流模式更接近于瀏覽器真實的行為。
緩沖模式:fiddler會等待http請求所有的數據都準備好之后才會返回給應用程序。
3.使用場景:
1:開發環境host配置——通常情況下,配置host需改系統文件很不方便;在多個開發環境下切換很低效。fiddler提供了相對高效地host配置方法。
2:前后端接口調試——通常情況下,調試前后端接口需真實的環境、一大堆假數據、寫js代碼。Fiddler只需一個UI界面進行配置即可。
3:線上bugfix——Fiddler可將發布文件代理到本地,快速定位線上bug。
4:性能分析和優化。
4. 工具條常用功能
1.消息圖示:給Fiddler捕捉到的會話增加一個備注
2.Replay:回放按鈕, 通常來講,捕捉,再回放。按快捷鍵R,就對一個請求做回放了.
3.X:清空監控面板,remove all 完全清空.
4.Go:調試Debug,在請求了斷點的時候,讓斷點繼續往下走,需要結合狀態欄里的功能來使用
5.stream:模式切換按鈕 ,流模式和緩沖模式,默認是緩沖模式
6.Decode:幫助我們把http里面的請求解壓出來.
7.any process:過濾請求
5. 狀態欄
黑色條:控制臺,可以在此輸入一些命令行。輸入help,獲得指令
左一capturing:控制Fiddler是否工作
Web Browsers:過濾會話來源
左三:截斷
左四,數字:記錄當前展示的會話數量
6. 監控面板
如何顯示ServerIP:
在CustomRules文件中運用Ctrl+F查詢 static function Main()
添加一行代碼,如下。重啟fiddler,然后就能在最后一行看到ServerIP了。
FiddlerObject.UI.lvSession.AddBoundColumn("Server IP",120,"X-HostIP");
Statistics:一個會話的統計信息 可以為優化提供依據
Inspectors: 對請求進行解包 可以查看相應的請求、響應信息
AutoResponder:文件代理 可以把請求的資源用本地文件代理掉 方便調試線上文件。
Composer:前后端接口連調,可以用來偽造請求
Log:記錄日志
Timeline:網站性能分析
7. fiddler文件,文件代理,host配置
Host配置:tools--hosts--選中enable...激活,再進行域名配置
請求IP會改變:
host
用Fiddler來配置Host:Tools -> HOST -> 打勾->添加規則->生效;去掉勾,保存,失效,或者直接關閉Fiddler也行。
作用:是把一個網站域名下所有的文件都映射到一臺指定的服務器或者一個IP下。
文件替換
拖拽到AutoResponder,EXACT精準匹配(也可以用正則表達式進行模糊匹配),進行save后,可以直接將匹配的文件進行加載。 只映射一個文件,也可以替換響應,延遲等。
8.fiddler請求模擬,前后端聯調
請求的偽造:可以偽造Cookie
前后端連調:Composer ->選擇請求方式 GET -> copy 地址 ?參數-> excuete
400回復代表客戶端請求錯誤
POST參數一般要放到RequestBody中
前端頁面沒有完成的情況下,后端可以用fiddler模擬http請求,聯調接口
9.fiddler網絡限速
網絡限速,功能需要基于fiddler的插件。
點擊fiddlerScript在代碼里找到onBeforeRequest
FiddlerScript -> static function OnBeforeRequest ->
oSession["request-trickle-delay"]="3000";//請求階段延遲
osession["response-trickle-delay"] = "3000";//請求立刻發出,回應延遲三秒
Save Script(保存腳本),發送請求
10. fiddler插件
插件很多,具體下載地址:https://www.telerik.com/fiddler/add-ons
JavaScript Formatter:代碼格式化插件
Fiddler Add-ons插件:javaScript ?formatter -> js文件右擊 -> 選擇 make javascript pretty -> textview / syntaxview ?代碼全部高亮顯示
traffic differ(對比兩個不同的對話): 直接拖進兩個不同的請求,會顯示完整的對比數據 ?-> 可以用來對比優化前后網站之間的不同
11. fiddler第三方插件
第三方插件:willow ?->快速管理host列表 ?完全可視化 ??http代理插件
可視化限速
因為沒有開源,可以到http://pan.baidu.com/s/1mgocpBi進行下載體驗