24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-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”關鍵字,來獲取下載此插件安裝包的方式吧!如下圖所示:

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

文章插圖
2.雙擊安裝包后 , 出現安裝完成的,如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
3.重啟Fiddler后,在右邊的選項卡中沒有看到這個插件,宏哥然后點擊上圖中的“Show detail”后,查看插件的安裝目錄,如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
4.根據安裝目錄找到安裝的插件文件,如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
5.將Stave.dll文件拷貝到安裝Fiddler的插件目錄下,如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
6.重啟Fiddler,可以在Fiddler的選項卡中看到這個Stave插件,一個音樂符號的圖標,如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
從上圖我們不難看出:本身stave插件的實列如上2個,第一個是替換單個文件的,第二個是替換目錄的 。接下來跟隨宏哥一起來看看它們的如何配置的,具體步驟如下:
1.選中一個實例 , 右鍵-->編輯,如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
2.點擊“編輯”后,打開編輯界面 , 如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
可以看到如上配置,我們回歸今天文章的主題先來實踐下吧!例如:還是要將百度首頁的切換成博客園首頁,具體操作步驟如下:
1.首先點擊右側,右鍵 --> 添加,如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
2.彈出添加規則頁面,添加規則,點擊“確定”,如下圖所示:
24 《吐血整理》高級系列教程-吃透Fiddler抓包教程-Fiddler如何優雅地在正式和測試環境之間來回切換-中篇

文章插圖
3.瀏覽器訪問百度,發現網址是www.baidu.com,但是瀏覽器訪問的卻是博客園首頁,如下圖所示:

推薦閱讀