fiddler+willow使用和配合真機測試調試

本文最先發佈於csdn

背景介紹：

Fiddler是一個http協議調試代理工具，它可以記錄並檢查全部你的電腦和互聯網之間的http通信，設置斷點，查看全部的「進出」Fiddler的數據（指cookie,html,js,css等文件，這些均可以讓你胡亂修改的意思）。 Fiddler 要比其餘的網絡調試器要更加簡單，由於它不只僅暴露http通信還提供了一個用戶友好的格式。Fiddler是用C#寫出來的,它包含一個簡單卻功能強大的基於JScript.NET事件腳本子系統，它的靈活性很是棒，能夠支持衆多的http調試任務，而且可以使用.net框架語言進行擴展。

注：Fiddler由於設置代理的緣由，在使用中可能會出現網絡問題，直接關閉或者點擊關掉左下角的capture就行了

Fiddler及Willow插件的安裝

Fiddler有兩個版本，下載地址 http://www.telerik.com/download/fiddler ，針對Fiddler2和Fiddler4，對應的Willow插件版本也是不同的。本文使用和針對的主要是Fiddler4

官網介紹的主要功能以下：

• Web調試，調試PC、Mac或Linux系統和移動設備的通訊。確保適當的cookies,headers和緩存指令是客戶端和服務器之間傳輸。支持任何框架,包括.NET,Java,Ruby等等。

• 性能測試，Fiddler讓你一眼就看到加載頁面權重-請求的數量和傳輸的字節，http緩存和壓縮技術。也能夠用Fiddler的自定義規則來關注潛在的性能問題.好比,你能夠標記全部大於25KB的響應(Fiddler4要安裝Fiddeler script)

• HTTP/HTTPS流量監控，Fiddler是一個免費的web調試代理，記錄了全部在你的電腦和互聯網之間的HTTP(s)的流量，能夠用它來調試幾乎任何支持代理的應用程序好比IE，Chrome，Safari等

• Web會話操做，容易操做和編輯web會話。你所須要作的就是設置一個暫停正在處理的會話和容許變動的請求/響應的斷點。你也能夠在Fiddler中編寫本身的HTTP請求(也就是僞造請求)

• 安全性測試，使用Fiddler對你的web應用程序進行安全性測試——解密HTTPS流量，用man-in-the-middler解密技顯示和修改請求。能夠配置Fiddler解碼全部流量或者特定會話的流量

• 定製Fiddler，受益於豐富的擴展模型,從簡單的FiddlerScript到強大的擴展,可使用任何.net語言來擴展，點擊查看已有的擴展。

Fiddler原理：

在本機開啓一個http的代理服務器，而後它會轉發全部的http請求和響應到最終的服務器,如圖所示

打開Fiddler後，Fiddler會自動篡改代理，打開ie的internet選項->鏈接->局域網設置->高級能夠看到下圖

經過更改瀏覽器的代理服務地址，Fiddler就能夠截獲全部發出的請求

Fiddler兩種代理模式

流模式：（streaming） 實時傳送給客戶端（更接近於瀏覽器自己真實的行爲）
緩衝模式： （buffering） 等http請求全部東西都準備好後才返回給應用程序（可控制最後的服務器響應）
在Fiddler的工具欄的Stream能夠進行兩種模式的切換，默認是緩衝模式

Fiddler使用場景

• 開發環境host配置，Tools->Hosts

• 先後端接口調試

• 線上bugfix，將線上項目代理到本地進行修改調試(AutoResponder,Willow)

• 性能分析和優化

工具欄經常使用功能介紹

• Replay，回放會話，選中會話並按R鍵便可回放會話（可多條）

• 清空監控面板，快捷鍵ctrl+x

• go 斷點調試

• stream切換代理模式

• Decode 解壓請求

• keep all session選項可選保存會話的數量，默認的保存全部，保存的會話越多，fiddler佔用的內存越大，能夠設置下，並且調試也不但願看到太多會話，能夠根據須要清空監控面板或過濾請求

• All Process，能夠用來控制如只捕獲chrome瀏覽器的請求

• Find 能夠查找會話並選擇顏色高亮標明

• TextWizard 解碼/編碼功能，可選選項不少，避免去網上找解碼工具
  

狀態欄

狀態欄功能較少，但也很重要

Capture用來控制Fiddler是否工做，點擊便可切換狀態
All Process控制請求來源
旁邊的數字表明當前會話數量

命令行

• select命令。選擇全部相應類型（指content-type）爲指定類型的HTTP請求，如選擇圖片，使用命令select image.而select css則能夠選擇全部相應類型爲css的請求，select html則選擇全部響應爲HTML的請求，選中的部分會高亮顯示，如圖執行select image
  

• allbut命令。
  allbut命令用於選擇給定類型的HTTP請求(刪除其餘類型請求)，該命令還有一個別名keeponly.

  Eg:只保留image會話：allbut image

• ?text命令
  選擇全部 URL 匹配問號後的字符的所有 session

  Eg:?qq.com

• 小於/大於size命令
  選擇響應大小大於某個大小或者小於某個大小的全部HTTP請求

  Eg:選擇響應大小小於10k的請求：<10k

• =status命令
  選擇響應狀態等於給定狀態的全部HTTP請求。

  Eg:選擇全部狀態爲200的HTTP請求：=200

• @host命令
  選擇包含指定 HOST 的所有 HTTP請求。

  Eg：選擇全部host包含csdn.net的請求：@csdn.net

• Bpafter， Bps, bpv, bpm, bpu

  這幾個命令主要用於批量設置斷點
  
  Bpafter xxx: 中斷 URL 包含指定字符的所有 session 響應
  
  Bps xxx: 中斷 HTTP 響應狀態爲指定字符的所有 session 響應。
  
  Bpv xxx: 中斷指定請求方式的所有 session 響應
  
  Bpm xxx: 中斷指定請求方式的所有 session 響應。等同於bpv xxx
  
  Bpu xxx:與bpafter相似。
  
  當這些命令沒有加參數時，會清空全部設置了斷點的HTTP請求。

• help
  輸入help會彈出這個頁面 http://docs.telerik.com/fiddler/knowledgebase/quickexec，是fiddler的官方命令行文檔

會話圖標類型（此圖爲Fiddler2）

右側窗口功能

• Stastics：統計選中的一個或多個請求相關數據，大小、耗時
  

  最下方會有一個不太容易發現的功能show charts，點擊會對請求進行可視化處理，如圖

  

• Inspectors：多種方式查看Request或者Response的詳細消息,如圖：
  

• AutoResponder： 設置一些規則將符合規則的請求重定向到本地。
  

• Composer：建立發送HTTP請求/先後端接口聯調
  

• Filters：設置會話過濾規則
  

• Log：日誌

• Timeline：性能優化和分析

• Willow的使用：請求重定向（模擬響應）

  右鍵添加項目，規則，host

  

  注意：Match中的URL必須以"/"結尾，Action中的URL必須以"\"結尾
  其餘使用：

  

Fiddeler+Willow+全民wifi 配合真機調試

1. 確保fiddler相關選項勾選以下，tools->fiddler options ->connections
   

這裏默認的只會抓取HTTP請求包，若是也要抓取HTTPS包，則在HTTPS標籤欄裏設置，把Capture HTTPS CONNECTs選項    勾上。

2.確保capture開啓，個人fiddler有時候會出現這種狀況

此時capture會關閉，須要點擊黃色區域才能從新開啓capture，否則沒法抓到請求

3.手機和電腦鏈接在同一個局域網中，全民wifi插入電腦USB口（我用過360隨身wifi等其餘設備，由於公司網絡設置的緣由都不行）。若是是第一次使用全民wifi，會有提示下載驅動，成功安裝驅動後會在電腦右下角提示安裝成功和開始體驗。電腦右下角出現全民wifi圖標，能夠經過手機掃描二維碼或者在手機端wifi設置裏面直接輸入賬號密碼來鏈接共享pc網絡，接着配置代理，通常fiddler默認的端口是8888，若有不一樣能夠在connection中查看，配置主機名，兩種方法：

方法一：windows下是win+r  運行cmd  接着運行ipconfig
![](http://7xteia.com1.z0.glb.clouddn.com/4.png)
方法二：鼠標移上fiddler右上角的online會出現提示以下：
![](http://7xteia.com1.z0.glb.clouddn.com/5.png)

4.建立重定向規則，若是文件較少，能夠用fiddler自帶的AutoResponsder,若是是文件夾，就用willow添加，由於手q使用了離線包機制嗎，因此willow要配置host禁用離線包並在手機端清除qq緩存，右鍵會出現添加項目規則host等的工具欄

配置host如圖

5.開始抓包，打開項目對應的區域，抓到的請求在fiddler裏面會是橙色區域如圖

即表明抓包成功，有時候會出現404或者代碼報錯，因此通常要先在瀏覽器端測試觀察控制檯有沒有報錯
若是發現404，多是由於使用了不一樣的域名，也要進行添加規則和匹配

6.瀏覽器端的調試以下：
複製抓到的請求地址，在瀏覽器端打開便可，若是要調試一個項目下另外的業務，更改url結構便可

我遇到過由於須要看外網的狀況關閉了手機的代理後再開結果沒法抓包的問題，重啓手機就行了，有時候請求不少有不少不想看的請求須要觀察當前的業務時，能夠設置filter

過濾掉請求後點擊action選擇run filterset now便可生效

7.清空面板方法以下：
方法一：在命令窗口裏輸入clear便可
方法二：上方有移除請求的選項
點擊會有不少選項，能夠移除全部請求，移除img請求和移除請求碼爲非200的等等，根據實際須要選擇不一樣選項
方法三：清除全部記錄的快捷鍵：ctrl+x

通常調試的時候都要禁用緩存
在fiddler2裏是Tools->Performance->Disable Caching,在fiddler4裏是Rules->Performance->Disable Caching

Fiddler的高級使用

網速限速

咱們爲何要限速。限速對於web前端研發是很是重要的，因爲開發者的機器通常配置都很高，而且是在localhost下來調試程序，因此很難模擬到用戶的真實使用情 況，如正在下載JS,css等靜態資源的時候，頁面的一個渲染狀況。當網速很慢的時候，咱們更但願看到的是先渲染出用戶界面，而不是讓用戶看到一片空白。那麼這個時候，網絡限速就能很方便在localhost針對相似的狀況來作性能調試與優化。

方法一：Fiddler script（自定義延時）
須要的插件：Fiddler script，下載地址：http://www.telerik.com/download/fiddler/fiddlerscript-editor
下載完直接安裝就好了，安裝以前必須關閉fiddler，再打開fiddler就會在右側tab看到fiddler script選項
fiddler script原理：把請求徹底代碼化
Eg：模擬延時3s發送請求：
選中會話，在fiddler-script——>Go to->OnBeforeRequest添加代碼以下：
oSession["request-trickle-delay"] = "3000"

點擊save script保存，再replay會話就會發現會話延遲了三秒才發送
延時響應同理

方法二：
Rules → Performances → Simulate Modem Speeds

Fiddler替換HTTP Request Host
替換的方法有兩種，一種是暫時的，一種是永久的，暫時的方法是在Fiddler 左下角輸入：

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

要清除轉發，請在同一位置輸入：

urlreplace

按Enter 就能夠了。

更詳細的說明請參考Fiddler官方說明文件- QuickExec Reference 。 能夠發現urlreplace 作的是整個網址字串的取代，因此能夠動手腳的地方不僅於此。

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

若是有安裝FiddlerScript Editor ，會用FiddlerScript Editor開啓CustomRules.js ，不然會用筆記本開啓。 或者也能夠到「個人文件 Fiddler2 Scripts 」直接編輯CustomRules.js 。

//請先在CustomRules.js 找到：
  static function OnBeforeRequest ( oSession : Session ) {
   // ...
   //在函式中加入：
  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 。

Fiddler斷點調試

設置斷點有兩種方法
第一種：打開Fiddler 點擊Rules-> Automatic Breakpoint ->Before Requests(這種方法會中斷全部的會話)
如何消除命令呢？ 點擊Rules-> Automatic Breakpoint ->Disabled

第二種: 在命令行中輸入命令: bpu www.baidu.com (這種方法只會中斷www.baidu.com)

如何消除命令呢？ 在命令行中輸入命令 bpu

看個實例，模擬QQ郵箱的登陸，輸入錯誤的用戶名和密碼，用Fiddler中斷會話，修改爲正確的用戶名密碼。這樣就能成功登陸

1. 登陸qq郵箱，輸入錯誤的密碼

2. 打開Fiddler, 在命令行中輸入bpu

3. 輸入錯誤的用戶名和密碼 點擊登陸

4. Fiddler 能中斷此次會話，選擇被中斷的會話，點擊Inspectors tab下的WebForms tab 修改用戶名密碼，而後點擊Run to Completion。

5. 結果是正確地登陸了qq郵箱

禁用緩存

兩種方法，一種暫時的，一種永久的（經過fiddler script）
暫時的方法：
Tools->Performance->Disable Caching

永久的方法：
在fiddler script裏查找
> var m_DisableCaching: boolean = false;

把值改爲true並保存就能夠了

擴展Fiddler script的一些用法

實例 讓全部qq的會話都顯示紅色。

把這段腳本放在OnBeforeRequest(oSession: Session) 方法下，而且點擊"Save script"

if (oSession.HostnameIs("www.cnblogs.com")) {
            oSession["ui-color"] = "red";
    }

效果如圖

這樣全部的cnblogs的會話都會顯示紅色

如何在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的string
     sCookie = sCookie.Replace("cookieName=", "ignoreme="); 

     oSession.oRequest["Cookie"] = sCookie; 
    }

一點小的tips：

• 我在使用Fiddler的過程當中碰到過沒法抓包的狀況，緣由是以前由於測試配置了autoresponder或者filter等沒有改回去，若是碰到這個狀況請確保Fiddler的選項都配置正確

• chrome和firefox瀏覽器沒法被監聽
  fiddler安裝以後，默認會在IE瀏覽器中安裝一個fiddler的插件，因此它對IE及國內基於IE內核的各種瀏覽器都能實現監聽，但其餘內核的瀏覽器沒法被監聽。

  解決辦法：禁用chrome和firefox中具備代理功能的插件，好比chrome若是安裝了switchSharp，禁用它或選擇「使用系統代理設置」，或在switchSharp中新配置一個代理項（好比名爲fiddler，用於指向代理127.0.0.1，端口8888，以下圖），便可實現監聽。