🔥《吐血整理》進階系列教程 - 拿捏 Fiddler 抓包教程 (13)-Fiddler 請求和響應斷點除錯

1.簡介

Fiddler 有個強大的功能，可以修改傳送到伺服器的資料包，但是修改前需要攔截，即設定斷點。設定斷點後，開始攔截接下來所有網頁，直到取消斷點。這個功能可以在資料包傳送之前，修改請求引數；在收到應答包，在 js 解析和瀏覽器渲染之前，修改返回結果。有了這個功能，開發者就可以修改不同引數測試 server，同時也可以修改返回包測試自己的 js 函式，或測試頁面渲染。使用者功能要用到 fiddler 的命令列。因為這個選單裡面是中斷所有的請求

2.為什麼要打斷點呢？

2.1 開發人員

對於一些大廠的程式猿，他們的分工是非常明確的。前端程式設計師和伺服器程式設計師是分工合作的。前端程式設計師想要除錯 Ajax 請求的功能，這樣便不必等待伺服器端程式設計師開發好所有介面之後再開始開發前端的 ajax 請求功能，因為透過 “模擬” 真實的伺服器端的響應，便可以保證功能的正確性，而伺服器端開發程式設計師，只要保證最終的響應是符合規定的即可。這大大簡化了程式開發的效率，當然也降低了不同業務執行緒序員聯調的難度。

2.2 測試人員

構造資料，設定斷點可篡改請求和返回的資料包。根據測試的不同場景，有時需要在測試過程中更改請求、或者更改響應內容，從而達到最終的測試目標。這樣就不用到處求人修改限制，給別人增加額外工作量。

比如：一個年齡的輸入框，輸入框前端做了限制 1-200，那麼我們測試的時候，需要測試小於 1 的情況下。很顯然前端只能輸入大於 1 的。這是我們可以先抓到介面，修改請求引數，繞過前端，傳一個小於 1 的數，檢查服務端的功能是否 OK。類似的還有金額輸入框、分數輸入框等等。

3.什麼是斷點？

斷點，偵錯程式的功能之一，可以讓程式中斷在需要的地方，從而方便其分析。也可以在一次除錯中設定斷點，下一次只需讓程式自動執行到設定斷點位置，便可在上次設定斷點的位置中斷下來，極大的方便了操作，同時節省了時間。

而在 Fiddler 這裡所謂斷點功能就是將你的請求或者響應截獲下來，但是不傳送也不返回，都放到 Fiddler 這裡, 這個時候你可以做很多事情，比如說，把請求報文改了，或 響應報文改了，再傳送給伺服器 或 客戶端.

4.斷點時間點（位置）

Fiddler 為 Web 請求提供了類似的，基於斷點的除錯功能。會話在執行過程中有兩個可能中斷的時間點：

（1）從客戶端讀到請求後，在請求被髮送到伺服器之前。

（2）在伺服器發貨響應後，在響應返回給客戶端之前。

以上兩種斷點就是打斷點的兩種方式：分別是請求斷點（request breakpoint）和響應斷點（response breakpoint）。

請求斷點：對請求的資料進行修改，在請求還沒到伺服器的時候，我們可以在 fiddler 中把引數改了，然後再把請求發過去。當程式在請求中斷點停止執行時，你可以任意修改該請求，包括 URL、headers 或 body。你還可以選擇不傳送該請求給伺服器，自定義響應返回給客戶端。大多數情況下，客戶端應用不知道 Fiddler 修改了它的請求。

響應斷點：對響應的資料進行修改，是伺服器已經處理完請求了，準備給前端返回資料了，但是 fiddler 把這裡攔下來了，想對響應資料做一些修改。比如前端需要展示今日登入次數，我想看前端展示登入 1000000000000000000000 次的效果，我不可能真的點這麼多次，也不想去資料庫跑指令碼差這麼多沒用的資料，那麼我就直接改這個介面的返回值就好了。當程式在響應斷點停止執行時，你可以任意修改響應的內容，包括 headers 或 body。你還可以自己生成新的響應，取代服務端接收到的響應。在響應斷點，你也可以修改任意客戶端傳送的請求，但是由於該請求已經傳送給伺服器了，這些修改只在 Fiddler 中生效 - 伺服器永遠都看不到你做的這些修改。

5.斷點的位置

斷點的位置有兩種，如下圖所示：

1.Before response：這個是打在 request 請求的時候，未到達伺服器之前。

2.After response：也就是伺服器響應之後，在 Fiddler 將響應傳回給客戶端之前。

6.設定斷點的方式

設定斷點有兩種方式：

（1）全域性斷點：一種用工具欄中的按鈕來設定斷點，特點是會攔截所有的請求。

（2）單個斷點：一種用命令列的形式來設定斷點，特點是攔截某個請求。

（3）Filters：透過 Filters 裡面的斷點設定來設定斷點

6.1Breakpoint Bar（斷點欄）

當會話停止執行時，在 Request Inspectors 和 Response Inspectors 之間會出現一個紅色 Breakpoint Bar。它由兩個按鈕和一個下拉框組成，如下圖所示：

只有當程式在請求的斷點處停止時，黃色的 Break on Response 按鈕會處於可點選狀態。當點選該按鈕，它會為當前的會話設定響應斷點，然後使程式恢復執行，向伺服器傳送（可能修改過的）請求。點選綠色的 Run to Completion 按鈕後，程式會繼續執行直至程式結束，不會在接收到響應時中斷。

在 Breakpoint Bar 右側的下拉框中，可以選擇特定的響應模板或者檔案作為該請求的響應，如下圖所示：

從下拉框中選中某個檔案後，它會馬上被載入到想要的 Inspectors（觀察視窗中），以便在返回客戶端之前進一步修改響應的具體內容（但不許要修改磁碟檔案）。如果你在請求斷點處使用下拉框中選中的內容作為響應，該請求就不會繼續傳送給服務端，因為 Fiddler 會返回響應。

6.2 全域性斷點

全域性斷點就是中斷 fiddler 捕獲的所有請求，設定有兩種方法。

6.2.1 方法一

1.選擇 Fiddler 選單中 Rules->Automatic Breakpoints->Before Requests（請求前斷點）/After Responses（響應後斷點）/Disabled（禁止斷點），設定斷點，也可以使用快捷鍵 F11。如下圖所示：

2.點選 “Before Request” 選完後左下方會有一個紅底藍字的大 T。如下圖所示：

3.點選 “After Response” 選完後左下方會有一個紅底綠字的大 T。如下圖所示：

6.2.2 方法二

快捷點選指定位置：就是直接可以在狀態列的這個位置直接點出來（前邊介紹狀態列的時候提到過）。點一次，紅底藍字：對請求斷點；點兩次，紅底綠字，對響應斷點；點三次，取消。如下圖所示：

6.3 單個斷點

區域性斷點設定在底部命令列處進行，與全域性斷點不同之處是滿足我們設定的條件進行斷點。透過命令列輸入命令方法，可對部分請求進行攔截。例如：

bpu www.baidu.com --代表只中斷www.baidu.com的請求，其他請求不處理
bpafter www.baidu.com --代表只中斷www.baidu.com的響應，其他返回不處理
bps xxx 中斷響應為指定字元的所有session響應
bpv/bpm xxx 中斷指定請求方式的session響應

具體操作步驟如下：

在進行斷點除錯時，想必之前已經知道了 web 網站或者介面請求的 URL 地址，這時候只需要針對這一條請求打斷點除錯，在命令列中輸入指令就可以了。

1.請求前斷點（before response)： bpu

要打斷點的 web 網站或者介面：https://xxxx/xxxxx

命令列輸入：bpu https://xxxx/xxxxx 回車

請求 web 網站或者介面的時候，就會只攔截這個 web 網站或者介面了，此時可以修改任意請求引數

取消斷點，在命令列輸入： bpu 回車就可以了。如下圖所示：

2.響應後斷點（after requests）： bpafter

要打斷點的 web 網站或者介面：https://xxxx/xxxxx

在命令列輸入：bpafter https://xxxx/xxxxx 回車

呼叫 web 網站或者介面，會發現已經攔截到呼叫介面後伺服器返回的資料了，此時可以修改任意返回資料。如下圖所示：

取消斷點，在命令列輸入： bpafter 回車就可以了。如下圖所示：

6.3.1 命令列其它相關指令

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 請求。

更多的其他命令可以參考 Fiddler 官網手冊。那麼一些常見的斷點命令如下表:

命令	描述	案例	解除斷點
bpafter	bpafter後邊跟一個字串，表示中斷所有包含該字串的請求	bpafter baidu	輸入bpafter解除斷點
bpu	跟bpafter功能差不多，	bpu baidu	輸入bpu解除斷點
bpv	只中斷HTTP方法的命令，HTTP 方法如POST、GET	bpv get	輸入bpv解除斷點
bpm	只中斷HTTP方法的命令，HTTP 方法如 POST、GET	bpm get	輸入bpm解除斷點
go	放行中斷下來的請求，相當於工具欄上的go按鈕	go

6.4Filters 設定斷點

透過 Filters 裡面的斷點設定來設定斷點，例如：透過 Filters 設定 post 請求斷點，然後在瀏覽器提交 post 請求，會話列表就能看到對應請求被標識為斷點，然後選擇該會話切換到 Inspectors 標籤則可以修改請求引數資訊和響應結果資訊等。如下圖所示；

7.小結

宏哥這裡總共介紹了三種設定斷點的方式，一般工作中，我們經常會用到的是前兩種方法，第三種方法宏哥一般不建議使用設定斷點（特殊情況例外）。好了，今天時間也不早了，講解和分享就到這裡！感謝您耐心的閱讀~~