一、業務場景
前端本地開發的場景中，我們需要頻繁的改動代碼，並需要實時看到效果，並且在一些開發場景中，我們需要將特定的請求代理到特定的IP、本地文件等，所以使用fiddler或whistle等本地、真機抓包調試工具是非常必要的。
二、爲什麼使用whistle
在歷史的長河中，我們是使用fiddler+willow再搭配小米wifi 進行本地和真機抓包調試的，無可厚非，fiddler的抓包和代理的功能十分強大，但在使用的過程中，有個很蛋疼的缺點就是內存泄漏！！fiddler掛一整天，內存就被吃完了，然後電腦變得巨卡無比，即使加了個內存條也是治標不治本，這時候只能使用重啓fiddler大法來解決，但是，長期的折磨使我萌生了有沒有工具可以替代fillder的想法。於是乎，我發現了whistle。試用了一段時間後，發現它能替代fiddler完成我們日常的開發工作，並且在某些方面whistle做的更好，下面就分享一下whistle的使用實踐。
三、安裝啓動
1. 安裝
npm install -g whistle //也可以使用tnpm
w2 -h //幫助信息2. 啓動
w2 start -p 8899 //不設置端口默認使用8899更多命令：安裝啓動
啓動完成後在chorme下打開 127.0.0.1:8899 可以看到這麼一個頁面：
但是現在還無法抓包，需要爲瀏覽器設置代理。
3. 爲瀏覽器配置代理
以上2款chorme插件二選一，我使用的是SwitchyOmega , 將瀏覽器代理到8899端口
!
配置完成後再看whistle的控制檯，此時已經能抓到請求了：
四、基礎功能
我們最常使用的就是NetWork 和 Rules 功能了, 其中NetWork是查看抓包，而Rules是設置代理，下面我以一個移動端活動爲例，介紹一下whistle的使用：
1、界面功能：
a.創建並啓用一個代理選項：
b. 啓用多個代理選項
更多界面功能詳見：界面列表
2、 匹配模式：
a. 基本匹配:
# 匹配域名www.qq.com下的所有請求
www.qq.com operatorURI
# 匹配域名www.qq.com下的所有http請求
http://www.qq.com operatorURI
# 匹配域名www.qq.com下的所有https請求
https://www.qq.com operatorURI
# 限定域名的端口號
www.qq.com:8888 operatorURI # 8888端口
#限定具體路徑
http://www.qq.com/xxx operatorURI
# 精確匹配 ， 以$符號開頭
$http://www.qq.com/xxx operatorURIb. 正則匹配：
/http:\/\/(.*)/ log://
c. 通配符匹配
# 通配符匹配，以 ^ 開頭(如果需要限制結束位置可以用 $)，* 爲通配符
^www.example.com/test/*** operatorURI
# 通配域名匹配：
# 匹配二級域名以 .com 結尾的所有url，如: test.com, abc.com，但不包含 *.xxx.com
*.com operatorURI
//*.com operatorURI
# 通配路徑匹配：
# 對所有域名對應的路徑 protocol://a.b.c/xxx[/yyy]都生效
*/ operatorURI
*/xxx operatorURI更多匹配模式詳見：匹配模式
3、代理協議：
a. file：
http://www.qq.com/pgg_act/ D:\dev\ 將此路徑的請求都代理到本地D:dev 目錄下。
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）：
http://www.qq.com http://www.baidu.com 以上幾個協議基本能瞞足日常的開發，當然這只是強大的whistle的冰山一角，更多代理功能參見：協議列表
五、進階
1. 真機調試：
搭配小米wifi ，配置代理後便可抓取真機的包，在右上角online 按鈕可查詢到對應的代理服務器和端口：
2. 使用 log 功能打印日誌：
在移動端真機調試中，我們無法像瀏覽器控制檯那樣，查看輸出的日誌和數據，以往的替代方案是在頁面上使用vconsole插件，而有了whistle後，我們可以這樣做：
/http://www.baidu.com/ log://這時候不管是PC還是真機，只要是訪問 www.baidu.com 匹配方式下的頁面，都可以在whistle的log選項下看到控制檯輸出的信息：
3. 使用 values + js 功能往頁面注入 vconsole.js ：
我們在values功能欄下新建一個vConsole.js , 並把vconsole的源碼放進去，並初始化一個vconsole對象,此時在rules 下配置：
http://www.baidu.com js://{vConsole.js}此時，我們刷新頁面可以看到：
4. 使用whistle內置的Weinre調試移動端頁面：
weinre相信大家都很熟悉，而whistle內置了weinre，使用方法如下：在rules配置：
http://www.qq.com weinre://test.js這時候，就能在http://127.0.0.1:8899/weinre/client/#test 看到調試界面了：
ps: 這東西不是很好用~
5. 一個小技巧：
由於whistle是web的控制檯，這時候我們在chorme 下面將 127.0.0.1：8899 添加到桌面。就能像軟件一下使用這個控制檯拉~
六、不止於此
whistle還有許多實用的功能，盜個官網的圖：
其中，重點介紹介紹一下：
- mock數據： 利用whistle mock數據
- 自定義插件 ： 插件開發
七、使用體會
whistle 基於Node實現的跨平臺（包括不限於:windows、mac）web調試代理工具，相較於fiddler ， 從使用體驗來說，前者對於前端開發者更友好，但畢竟是web端的操作頁面，較fiddler來說沒有那麼穩定。但whistle的安裝簡便，配置簡單，比起fiddler那繁瑣的配置過程真的是完爆。從功能上說，fiddler有的whistle都支持，並且對於真機調試更爲方便，待挖掘的功能也更多。
附上github地址：github.com/avwo/whistl…
八、參考文章：
官方文檔： whistle.gitbooks.io/h...