為什麼80%的碼農都做不了架構師？>>>
前端本地開發的場景中，我們需要頻繁的改動**，並需要實時看到效果，並且在一些開發場景中，我們需要將特定的請求**到特定的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 //不設定埠預設使用8899啟動完成後在chorme下開啟 127.0.0.1:8899 可以看到這麼乙個頁面：
但是現在還無法抓包，需要為瀏覽器設定**。
以上2款chorme外掛程式二選一，我使用的是switchyomega , 將瀏覽器**到8899埠
!配置完成後再看whistle的控制台，此時已經能抓到請求了：
我們最常使用的就是network 和 rules 功能了, 其中network是檢視抓包，而rules是設定**，下面我以乙個移動端活動為例，介紹一下whistle的使用：
a.建立並啟用乙個**選項：
b. 啟用多個**選項
更多介面功能詳見：介面列表
a. 基本匹配:
# 匹配網域名稱www.qq.com下的所有請求
www.qq.com operatoruri
# 匹配網域名稱www.qq.com下的所有http請求
operatoruri
# 匹配網域名稱www.qq.com下的所有https請求
operatoruri
# 限定網域名稱的埠號
www.qq.com:8888 operatoruri # 8888埠
#限定具體路徑
/*** operatoruri
# 精確匹配 ， 以$符號開頭
$/*** operatoruri
/http:\/\/(.*)/ log://# 萬用字元匹配，以 ^ 開頭(如果需要限制結束位置可以用 $)，* 為萬用字元
# 通配網域名稱匹配：
# 匹配二級網域名稱以 .com 結尾的所有url，如: test.com, abc.com，但不包含 *.***.com
*.com operatoruri
//*.com operatoruri
# 通配路徑匹配：
# 對所有網域名稱對應的路徑 protocol:都生效
*/ operatoruri
*/*** operatoruri
a. file：
/pgg_act/ d:\dev\b. host ：
10.241.11.111 www.qq.comc. 抓取 https ：
whistle支援抓取https 請求，具體配置方法參見：https攔截
d. 請求替換：
在php介面開發中，我們需要將jsonp請求**到自己的開發機，使用請求替換可以達到目的（類似fillder的extention）：
1. 真機除錯：
搭配小公尺wifi ，配置**後便可抓取真機的包，在右上角online 按鈕可查詢到對應的**伺服器和埠：
2. 使用 log 功能列印日誌：
在移動端真機除錯中，我們無法像瀏覽器控制台那樣，檢視輸出的日誌和資料，以往的替代方案是在頁面上使用vconsole外掛程式，而有了whistle後，我們可以這樣做：
// log://3. 使用 values + js 功能往頁面注入 vconsole.js ：
我們在values功能欄下新建乙個vconsole.js , 並把vconsole的原始碼放進去，並初始化乙個vconsole物件,此時在rules 下配置：
js://4. 使用whistle內建的weinre除錯移動端頁面：
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配置 手動 ...
whistle 前端工具之抓包利器
前端本地開發的場景中，我們需要頻繁的改動 並需要實時看到效果，並且在一些開發場景中，我們需要將特定的請求 到特定的ip 本地檔案等，所以使用fiddler或whistle等本地 真機抓包除錯工具是非常必要的。在歷史的長河中，我們是使用fiddler willow再搭配小公尺wifi 進行本地和真機抓...
前端除錯利器 Charles
docs 開發之 charles 配置指南 2.啟用 使用公司正版license 啟用 安裝證書 點選證書並選擇 始終信任 證書不被信任可能會導致 開發時部分資源檔案無法載入。設定 將你需要 https的 新增進去 本地除錯 如果你想 bear test 到本地，你需要 點選map remote 新...