接觸過前后端開發的同學應該都了解網絡請求代理工具fiddler(mac下面常用的是Charles)，可以用來攔截分析請求、包裝請求、本地調試和移動端代理開發調試等。多多少少，fiddler和Charles使用起來還是有些區別，不過還好都是可視化的界面使用配置起來也都比較方便。
先說下使用體驗。對於一個追求高效的開發者來說，總是覺得要經常切換兩個工具的使用比較麻煩，但是配置規則不通用，fiddler+willow組合的使用很不錯，但也總是讓電腦比較慢，而且規則配置需要點擊輸入顯得不那么高效；Charles是mac上一款不錯的網絡代理工具，不過是收費的，價格不便宜（當然你可以找破解），但是路徑替換功能使用起來比較麻煩，這點體驗很不好。在兩個平台上都折騰過，而且要經常切來切去（自己的電腦是windows），后來決定嘗試入坑whistle（由avenwu@tencent開發），發現非常高效易用，解決了困擾多年的問題。這里總結梳理下常用的功能和使用方式。
whistle文檔入口在這里，安裝入門使用和原理介紹略過，執行下面命令，然后打開 http://127.0.0.1:8899 就可以了。
npm i -g whistle #需要配代理的自己配 w2 start 一看就懂，當然文檔是比較基礎的，內容全，但也比較多，不適合快速入門，所以這里為大家梳理下實際開發中常用的一些規則配置，快速入門，大家可以對應fiddler或Charles的使用對號入座。
使用一鍵代理切換
安裝啟動whistle后，通常瀏覽器需要設置代理指向whistle Server地址127.0.0.1:8899，為了方便切換，chrome下推薦安裝使用proxyOmega插件來提高切換效率，這樣就可以一鍵切換代理。 
打開界面我們主要關注Rules菜單項，點擊create就可以在規則集合里面書寫規則了。
1. host映射和特定子路徑的host映射，whistle不僅支持傳統的host配置，還支持子路徑和端口的host轉發配置
10.125.36.59 ke.qq.com # 直接的host配置
127.0.0.1:8086 ke.qq.com www.qq.com # 對全部域名路徑替換host
10.125.36.59 ke.qq.com/ads # 對特定的路徑替換host
2. 本地文件或文件路徑替換，協議頭可以加也可以不加，不加表示匹配所有協議，否則只對某個協議生效。類似willow的路徑替換。
ctc.i.gtimg.cn/qzone/biz/gdt/atlas/mod/message.html C:\Users\ouvenzhang\Desktop\edit.html # 單個文件的本地替換
ctc.i.gtimg.cn/qzone/biz/ C:\Users\ouvenzhang\Desktop\biz\build\ # 文件路徑的替換，一般用這條就可以了
http://ctc.i.gtimg.cn/qzone/biz/ C:\Users\ouvenzhang\Desktop\biz\build\ #只針對http請求的文件路徑替換
3，請求轉發，將指定域名請求轉發到另一個域名
www.qq.com ke.qq.com # 指定域名轉發生效
**.qq.com ke.qq.com # 所有qq.com子域名轉發生效
4，腳本注入，可以將一段腳本（可以使html、js、CSS片段）注入到dom頁面中進行調試
ke.qq.com html://E:\xx\test\test.html ke.qq.com js://C:\Users\ouvenzhang\Desktop\gdt\console.js ke.qq.com css://E:\xx\test\test.css 5, 匹配模式，可以根據正則式匹配路徑
#/keyword/i #關鍵字匹配 /ke\.qq\.com\/atlas\/(\d+)\/order\/edit/i C:\Users\ouvenzhang\Desktop\gdt\edit.html # 正則匹配 ke.qq.com/atlas/25610/order/edit C:\Users\ouvenzhang\Desktop\gdt\edit.html # 直接匹配 6，忽略特性的請求內容
/qq.com/ filter://rule|hide # 忽略包含qq域名下的請求並不在network中顯示 /spa\-monitor\.min\.js/i filter://rule # 忽略匹配包含spa-monitor.min.js，但在network中顯示，相當於文件白名單 7，請求改寫與接口mock
ke.qq.com ua://{test_ua} #注意這里的改寫是whistle抓包請求的改寫，瀏覽器調試看到的內容仍然是原來的 ke.qq.com/ec/api.php?mod=utilities&act=estimate tpl://{mock-price} test_ua和mock-price是values里面的設置，那么對應請求會直接返回values對應的內容，很方便： 
8, 遠程調試，把手機的請求代理到whistle，ip為whistle所在機器的ip，端口號為whistle的監聽的端口號(默認為：8899) 配置要注入的請求(系統會自動判斷是否為html，如果不是則不會自動注入)
# xxx為對應的weinre id，主要用於頁面分類，默認為anonymous www.example.com weinre://xxx 9, 設置https代理
https的內容文檔寫的比較清楚，設置也很簡單，這里就不重復了https://avwo.github.io/whistle/webui/https.html
小結：除此之外，whistle還有更多復雜強大的功能，不過目前我們常用的就上面這些，了解這些就基本滿足我們的開發配置了，需要了解更多內容，大家可以進一步查閱具體文檔了解。whistle文檔