《吐血整理》高階系列教學-吃透Fiddler抓包教學(24)-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

1.簡介

在開發或者測試的過程中，由於專案環境比較多，往往需要來來回回地反覆切換，那麼如何優雅地切換呢？宏哥今天介紹幾種方法供小夥伴或者童鞋們進行參考。

2.實際工作場景

2.1問題場景

（1）已釋出線上APP出現介面錯誤，如何測試線上APP存取本地請求？

（2）已釋出線上H5頁面，靜態資源或js偵錯，如何對映本地js？

2.2一般解決方案

猜測（一般明顯問題）、找到原發布包，修改請求資源url重新打包測試。需要前後端協調配合，耗時費力。

2.3聰明人解決方案

fiddler對映響應：

通過fidder攔截，將需要載入的資源對映到本地開發環境，而無需切換測試版APP

例如線上資源：http://online.com/api/page

對映載入本地資源：http://127.0.0.1/api/page

3.切換實戰

3.1外掛（Stave外掛）

Stave是一個Fiddler擴充套件外掛，讓Fiddler能將URL對映到本地目錄，實現批次檔案自動響應。

Fiddler自帶的AutoResponder每條自動響應規則只能對應一個本地檔案， 在檔案數目較多的時候，使用起來很不方便，往往需要部署到本地web服務，有了Stave外掛(擴充套件)，一個URL匹配可以對應一個本地目錄，URL規則也支援萬用字元，前端偵錯方便多了。

除支援URL對映到目錄之外，還支援URL到URL的替換。

Stave擴充套件並不影響原本的AutoResponder功能，兩者可以共同起作用。具體操作步驟如下：

1.下載Stave外掛，這個可費了大勁了，首先宏哥得FQ存取這個外掛的官網，可以存取官網了，結果一下載，才發現已經不維護了，下載連結已經失效了，然後在csdn上找到了一個，結果還要積分，充值後用價格不菲的積分下載了，完全不能用，後來才發現後邊有評論已經說了不好用，怪我咯沒有看請就著急地下載了，果然是心急吃不了熱豆腐，後來輾轉查資料各種找，終於下載了一款可以用的。如果你也發現下載特別費勁，那就關注宏哥的公眾號「北京宏哥」後，傳送「stave」關鍵字，來獲取下載此外掛安裝包的方式吧！如下圖所示：

2.雙擊安裝包後，出現安裝完成的，如下圖所示：

3.重啟Fiddler後，在右邊的索引標籤中沒有看到這個外掛，宏哥然後點選上圖中的「Show detail」後，檢視外掛的安裝目錄，如下圖所示：

4.根據安裝目錄找到安裝的外掛檔案，如下圖所示：

5.將Stave.dll檔案拷貝到安裝Fiddler的外掛目錄下，如下圖所示：

6.重啟Fiddler，可以在Fiddler的索引標籤中看到這個Stave外掛，一個音樂符號的圖示，如下圖所示：

從上圖我們不難看出：本身stave外掛的實列如上2個，第一個是替換單個檔案的，第二個是替換目錄的。接下來跟隨宏哥一起來看看它們的如何設定的，具體步驟如下：

1.選中一個範例，右鍵-->編輯，如下圖所示：

2.點選「編輯」後，開啟編輯介面，如下圖所示：

可以看到如上設定，我們迴歸今天文章的主題先來實踐下吧！例如：還是要將百度首頁的切換成部落格園首頁，具體操作步驟如下：

1.首先點選右側,右鍵 --> 新增,如下圖所示：

2.彈出新增規則頁面，新增規則，點選「確定」，如下圖所示：

3.瀏覽器存取百度，發現網址是www.baidu.com,但是瀏覽器存取的卻是部落格園首頁，如下圖所示：

3.2外掛（Willow）

我們可以把Willow外掛當作是AutoResponder工具和Tools —> HOSTS...功能的加強版。但是Willow外掛對於Windows系統中的hosts檔案的管理更加的豐富，可以根據不同的環境，比如測試環境，開發環境等，採用不同的主機規則。同理Willow外掛對於AutoResponder工具也是一樣的，Willow外掛可以用工程的方式，來區分不同環境所需要的主機規則和自動響應規則，這個功能就非常的實用。

這款外掛宏哥在講解和介紹Fiddler的精選外掛部分就已經重點介紹過了，這裡就不做贅述了，宏哥這裡直接演示如何使用，具體操作步驟如下：

1.在Willow外掛中，右鍵Add Project(Ctrl+P)。如下圖所示：

2.填寫專案的名稱為：demo，如下圖所示：

3.選中專案，右鍵Add Rule(Ctrl+U)，如下圖所示：

4.填寫Match(原始對談)和Action(替換動作)，如下圖所示：

5.再次重新整理百度首頁後，發現網址是www.baidu.com,但是瀏覽器存取的卻是部落格園首頁，這是因為在存取百度首頁網址的時候，Fiddler自動地將其替換成部落格園的首頁網址。如下圖所示：

6.這款外掛會把重定向的對談標識上顏色，如下圖所示：

4.小結

 Willow外掛比Stave外掛強大很多，而且Stave的功能，Willow外掛都可以做到，這樣Willow可以完全替代Stave外掛，可能是因為這個原因官網不維護了，也可能是由於資金等其他原因。好了，今天時間也不早了，宏哥就講解和分享到這裡，感謝你耐心地閱讀！！！