前端本地開發的場景中，我們需要頻繁的改動**，並需要實時看到效果，並且在一些開發場景中，我們需要將特定的請求**到特定的ip、本地檔案等，所以使用fiddler或whistle等本地、真機抓包除錯工具是非常必要的。
在歷史的長河中，我們是使用fiddler+willow再搭配小公尺wifi 進行本地和真機抓包除錯的，無可厚非，fiddler的抓包和**的功能十分強大，但在使用的過程中，有個很蛋疼的缺點就是記憶體洩漏！！fiddler掛一整天，記憶體就被吃完了，然後電腦變得巨卡無比，即使加了個記憶體條也是治標不治本，這時候只能使用重啟fiddler**來解決，但是，長期的折磨使我萌生了有沒有工具可以替代fillder的想法。於是乎，我發現了whistle。試用了一段時間後，發現它能替代fiddler完成我們日常的開發工作，並且在某些方面whistle做的更好，下面就分享一下whistle的使用實踐。
npm install -g whistle //也可以使用tnpm
w2 -h //
幫助資訊
w2 start -p 8899 //啟動完成後在chorme下開啟 127.0.0.1:8899 可以看到這麼乙個頁面：不設定埠預設使用8899
但是現在還無法抓包，需要為瀏覽器設定**。
以上2款chorme外掛程式二選一，我使用的是switchyomega , 將瀏覽器**到8899埠
配置完成後再看whistle的控制台，此時已經能抓到請求了：
我們最常使用的就是network 和 rules 功能了, 其中network是檢視抓包，而rules是設定**，下面我以乙個移動端活動為例，介紹一下whistle的使用：
a.建立並啟用乙個**選項：
b. 啟用多個**選項
a. 基本匹配:
# 匹配網域名稱www.qq.com下的所有請求b. 正則匹配：www.qq.com operatoruri
# 匹配網域名稱www.qq.com下的所有http請求
# 匹配網域名稱www.qq.com下的所有https請求
# 限定網域名稱的埠號
www.qq.com:8888operatoruri # 8888埠
#限定具體路徑
# 精確匹配 ， 以$符號開頭
/http:\/\/(.*)/ log://c. 萬用字元匹配
# 萬用字元匹配，以 ^ 開頭(如果需要限制結束位置可以用 $)，*為萬用字元將此路徑的請求都**到本地d:dev 目錄下。# 通配網域名稱匹配：
# 匹配二級網域名稱以 .com 結尾的所有url，如: test.com, abc.com，但不包含 *.***.com
*.com operatoruri
//*.com operatoruri
# 通配路徑匹配：
# 對所有網域名稱對應的路徑 protocol:
都生效*/operatoruri
b. host ：
10.241.11.111 www.qq.com將www.qq.com的請求都**到10.241.11.111 ip上，實現在本地環境發測試環境的請求，
c. 抓取 https ：
whistle支援抓取https 請求，具體配置方法參見：https攔截
d. 請求替換：
在php介面開發中，我們需要將jsonp請求**到自己的開發機，使用請求替換可以達到目的（類似fillder的extention）：
以上幾個協議基本能瞞足日常的開發，當然這只是強大的whistle的冰山一角，更多**功能參見：協議列表
1. 真機除錯：
搭配小公尺wifi ，配置**後便可抓取真機的包，在右上角online 按鈕可查詢到對應的**伺服器和埠：
2. 使用 log 功能列印日誌：
在移動端真機除錯中，我們無法像瀏覽器控制台那樣，檢視輸出的日誌和資料，以往的替代方案是在頁面上使用vconsole外掛程式，而有了whistle後，我們可以這樣做：
// log://這時候不管是pc還是真機，只要是訪問 匹配方式下的頁面，都可以在whistle的log選項下看到控制台輸出的資訊：
3. 使用 values + js 功能往頁面注入 vconsole.js ：
我們在values功能欄下新建乙個vconsole.js , 並把vconsole的原始碼放進去，並初始化乙個vconsole物件,此時在rules 下配置：
此時，我們重新整理頁面可以看到：
4. 使用whistle內建的weinre除錯移動端頁面：
這時候，就能在 看到除錯介面了：
ps: 這東西不是很好用~
5. 乙個小技巧：
由於whistle是web的控制台，這時候我們在chorme 下面將 127.0.0.1：8899 新增到桌面。就能像軟體一下使用這個控制台拉~
whistle還有許多實用的功能，盜個官網的圖：
其中，重點介紹介紹一下：
whistle 前端除錯工具
基於node實現的跨平台web除錯 工具 可以用來攔截分析請求 包裝請求 本地除錯和移動端 開發除錯等。node安裝成功後，執行如下npm命令安裝whistle npm install g whistle啟動whistle w2 start瀏覽器開啟位址 移動端配置 無線網 點進http配置 手動 ...
Fiddler工具抓包
又接觸乙個新工具 fiddler。配置fiddler，預設下，fiddler不會捕獲https會話，需要自己手動設定下，開啟fiddler tool fiddler options https tab，勾選capture https connects decrypt https traffic ig...
應用抓包之Fiddler抓包
tcpdump抓包 應用抓包之tcpdump命令抓包 原料fiddler fiddler是位於客戶端和伺服器端的http 也是目前最常用的http抓包工具之一 它能夠記錄客戶端和伺服器之間的所有 http請求，可以針對特定的http請求，分析請求資料 設定斷點 除錯web應用 修改請求的資料，甚至可...