1. 程式人生 > >深入淺出新一代跨平臺抓包&調式利器Fiddler Everywhere

深入淺出新一代跨平臺抓包&調式利器Fiddler Everywhere

## 什麼是Fiddler Everywhere? ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307153629189-2090961560.png) > Fiddler Everywhere is a web debugging proxy for macOS, Windows, and Linux. Capture, inspect, monitor all HTTP(S) traffic between your computer and the Internet, mock requests, and diagnose network issues. Fiddler Everywhere can be used for any browser, application, process. > Fiddler Everywhere是可以執行在任何瀏覽器,任何系統、跨平臺(Windows、Mac、Linux)的一款Web除錯代理工具。它記錄了計算機和Internet之間的所有HTTP(S)通訊,可以檢查和編輯通訊,並Mock請求以及修改響應返回的能力。 也就是說,Fiddler Everywhere實際上是Telerik出品的一款全新的且跨平臺的網路抓包、檢視、模擬的工具。 Fiddler是我們在Windows上非常熟悉的一款抓包工具,而基於Angular和.NET Core的Fiddler Everywhere,除了Windows,它為Mac和Linux使用者提供了與Windows使用者相同的體驗和生產力。 ## 下載 官方下載源:[https://downloads.getfiddler.com/win/Fiddler%20Everywhere%201.5.1.exe](https://downloads.getfiddler.com/win/Fiddler%20Everywhere%201.5.1.exe) 其他系統或者下載備份:[https://www.telerik.com/download/fiddler-everywhere](https://www.telerik.com/download/fiddler-everywhere) ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307153810090-1315635652.png) ## 安裝 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307153829671-44372427.png) ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307153838785-599487518.png) ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307154012553-1180489858.png) 開啟後,預設會要求登入Telerik家的賬號,如果沒有,還是建議註冊一個,這個賬號的一個主要作用,是能同步你的資料,後面會發揮作用,建議不要拒絕。 如果已經有賬號了,直接點選`Sign In`即可。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307154242566-2061266894.png) ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307154251643-1412353221.png) ## 使用 進入主介面之後,我們會看到三個主要區域。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307154541658-1619291658.png) - 1: 側邊欄,主要用於是存放session、request的區域。(類似於postman) - 2: 攔截請求以及傳送請求的區域。 - 3: 用於顯示請求和響應以及自動處理請求的區域。 ## 配置 ### 開啟HTTPS抓包 預設是不開啟HTTPS抓包的,因為HTTPS抓包需要信任一個中間證書才行。 前往右上角的設定圖示,進入設定頁面 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307154745057-77510559.png) ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307154811201-990884492.png) 點選`Trust Root certficate`(信任根證書),會彈出一個安裝根證書的提示頁面,我們點選`是`。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307154939755-1922008916.png) 同時我們勾選`Capture HTTPS traffic`(捕獲HTTPS流量)、`Ignore server certficate errors(unsafe)`(忽略伺服器證書錯誤) 兩個複選框,點選`Save`即可。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307155208450-1274787256.png) ### 自定義代理埠 前往右上角的設定圖示,進入設定頁面,找到選單`Connections`,可以看到這裡可以自定義代理埠,如果預設埠和其他服務發生衝突的時候,我們可以自定義埠來避免衝突。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307155427250-603107583.png) 修改之後,點選`Save`即可。 ### 支援其他裝置代理到本機服務 前往右上角的設定圖示,進入設定頁面,找到選單`Connection`,可以看到一個叫`Allow remote computers to connect`(允許遠端計算裝置來連線)的複選框,如果勾選它,並且點選`Save`之後,意味著,像手機或者另外一臺計算機可以通過代理到這臺裝置Ip+Port的方式進行抓包。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307155716406-989607507.png) 這個在測試安卓、IOS、或者特殊場景下的第三方裝置抓包是非常管用。 需要注意的是,一般來說,還需要先通過第三方裝置瀏覽器訪問:`http://ip+port`的安裝下證書,有時候才能實現抓HTTPS包信任。 ## 使用 ### 基礎抓包功能(HTTP/HTTPS) 這個其實不用多說,預設會抓取系統中的HTTP流量,如果開啟了上文中的HTTPS流量,還能抓取HTTPS流量。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307160532838-1265838084.png) 值得注意的是,有時候我們瀏覽器可能用了一些代理外掛,代理外掛代理的時候是抓不到包的,因為這個抓包是依賴系統的代理,Fiddler Everywhere執行的時候,其實自動建立了一個系統代理,通過這個系統代理來實現抓包。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307160319875-393379762.png) 如果你的瀏覽器,使用了其他代理外掛,需要切換到系統代理,才可以恢復正常的抓包。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307160442044-1305585567.png) ### 一鍵抓包轉可編輯重發 Fiddler Everywhere的絕招來了,我們經常遇到一個場景,Fiddler抓完包了,是不是還想著去PostMan複製貼上一遍引數來進行除錯呢? ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307161415102-830722626.png) 有了它,你再也不用那麼低效了,比如開發後端介面的時候,我們只需要抓到請求包,然後在該請求上右鍵,點選`Edit In Composer`,即可一鍵把抓包內容轉成類似PostMan功能的重發工作區。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307161510846-1315558182.png) - 1: 頂部欄,主要用於是存放method、host、protocol的區域。 - 2: 展示請求引數的區域。 - 3: 用於顯示響應引數的區域。 點選區域1中`EXECUTE`按鈕代表觸發執行/重發 當前請求。點選`Save`按鈕,我們可以把當前請求儲存起來,以便下次使用。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307162007204-436610806.png) 點選區域2中`Headers`標籤,這裡可以自定義請求頭資訊,如新建一個自定義Header,只需要填寫Key、Value,然後點選同一行右側的儲存圖示按鈕即可。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307161830690-293942546.png) 點選區域2中`Body`標籤,我們可以自定義多種型別的請求體內容。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307162305569-1249757517.png) 這裡需要注意的一點是,有時候我們在Body裡面看到的資料精度可能丟失了,這個還是要以RAW裡面的為準,因為Fiddler Everywhere是前端技術構建的原因,JS本身就有精度丟失的問題。 點選區域3中`RAW`標籤,我們可以看到響應資料的完整內容,點選`Preview`標準可以以多種格式展示響應內容。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307162208944-133117151.png) ### 一鍵抓包轉自動攔截響應 抓包或者開發調式時,我們有時候需要模擬或者攔截某些請求的,這時候我們需要根據請求特徵自定義響應動作或者引數。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307162833918-184591209.png) 找到需要攔截響應的請求,在其上右鍵,點選`Add New Rule`,即可一鍵把當前請求新增到攔截響應的清單中。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307162855114-295761938.png) 雙擊該Rule,然後我們會進入Edit Rule的介面,這裡我們可以自定義攔截規則和響應動作及內容。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307163017594-1587277371.png) 如上圖所示,就是設定遇到`https://www.baidu.com/`這個地址時,就延時100ms的意思。 同時,Rule新建之後,需要開啟`Auto Responder`按鈕的開關才可以生效。 ![](https://img2020.cnblogs.com/blog/375390/202103/375390-20210307163253035-1905880