Whistle，web 抓包與 debug 利器

什么是 whistle

whistle 是一個跨平台的抓包與 web debug 工具，使用 whistle，你可以配置代理服務器，模擬接口數據，捕獲請求重定向到指定 url，修改請求頭響應頭，修改 GET 請求的參數，往匹配的頁面中注入 js、css

whistle 提供了和 fiddler 類似的功能，也提供了一些 fiddler 沒有的功能，使用體驗比 fiddler 好很多，一開始公司組內只有我一個人用，經過安利，大部分開發、測試都換成了 whistle。而且 whistle 可以在 windows、mac、linux 上運行，目前還在不斷迭代更新，維護者對社區的各種問題都能及時響應，是一個很優秀的工具。

這篇文章接下來會介紹 whistle 的安裝及常見的使用方法，如果你要上手使用 whistle，建議通篇看完后嘗試安裝，遇到問題可以看文末的參考資料或自行 google。

whistle 的安裝

1. 安裝 node.js，點擊鏈接，選擇 LTS 版安裝
2. 在命令行運行 npm install -g whistle（如果提示沒有權限，要以 admin 或 sudo 的方式運行）

whistle 的啟動

1. 在命令行運行 whistle start，(推薦 w2 restart，當你需要重啟時，按上箭頭，回車即可)
2. 在瀏覽器訪問 http://127.0.0.1:8899/，如果能看到一個抓包的界面，那么安裝、啟動成功了

whistle 的代理

在 whistle 啟動完成后，我們需要將瀏覽器的請求代理到 whistle，這樣 whistle 才能處理瀏覽器發出的請求。為此，我們需要安裝一個 SwitchyOmega chrome 擴展程序。

SwitchyOmega 安裝與配置

1. 訪問這個鏈接，點擊“添加至 CHROME”，點擊彈框“添加擴展程序”，如果被牆了訪問不了，可以 點這里 選擇 SwitchyOmega_Chromium.crx 下載，下載后在瀏覽器地址欄輸入 chrome://extensions/，回車打開頁面，將下載的文件拖動到 extensions 那個頁面，點擊安裝擴展即可。
2. 頁面會自動跳轉到 SwitchyOmega 的配置頁，點擊“跳過教程”
3. 點擊左側“新建情景模式…”，彈框提示“情景模式名稱”，你可以輸入“whistle”
4. 點“創建”按鈕
5. 代理服務器 -> 代理協議，這個下拉選擇框選擇 HTTP，將 example.com 改為 127.0.0.1，將 80 改為 8899
6. “不代理的地址列表” 的輸入框里的所有文本都刪掉，因為里面的 host 在本地開發很大概率會用到
7. 點擊左側“應用選項”
8. 點擊 chrome 右上角的圓圈圖標，切換成 whistle
9. 瀏覽器輸入 local.whistlejs.com，回車，能打開 whistle 的界面，說明 SwitchyOmega 的配置 ok

whistle 的常用配置

配 host

我們可以為某個域名或具體的 url 指定 ip，繞過 dns 解析，讓請求直接到達指定的 ip。通常在工作中，開發、測試和預發布境的切換都通過切換 host 來實現，這樣訪問不同的環境不需要改變代碼，或根據環境配置文件訪問不同的 url。

whistle 的 host 在 rules 下配置:

以下是常用的配 host 方法:

將 qq.com 映射到 127.0.0.1，你訪問 http://www.qq.com/ 時，請求的是本地的 127.0.0.1

127.0.0.1 qq.com

你也可以把端口帶上

127.0.0.1:3000 qq.com

你甚至可以將指定的路徑映射到某個 ip 和端口

127.0.0.1:3000 https://www.qq.com/a/b/c

當然，把規則反過來寫也是生效的

https://www.qq.com/a/b/c 127.0.0.1:3000

除了配 host，whistle 還有其它強大的功能，我們繼續往下看

重定向

將 baidu.com 重定向到 qq.com

https://www.baidu.com/ redirect://https://www.qq.com/

此規則在移動端調試時有個場景特別有用：比如想在某個 APP 里打開一個的網頁，但是該 APP 沒有一個 url 輸入框，我們可以隨機地點擊這個 app 的信息流，如果捕獲到有頁面請求，重定向為我們的 url 即可。

修改返回體

該功能在后端接口掛了或者沒有開發好的時候，可以模擬返回假數據，讓前端調試可以不依賴后端

http://example.com/api/getUserList file://D:/path/to/your/file/userList.json

將 getUserList 這個請求的返回替換成本地的 userList.json 文件，如果覺得文件放在磁盤里寫路徑麻煩，可以放在 whistle 自帶的 Values 里，那么上面的規則就更簡潔了：

http://example.com/api/getUserList file://{userList.json}

Values 是個很有用的功能，位置如下:

創建的文件盡量帶文件后綴，有語法高亮，另外如果不是 .json 結尾，whistle 不會在 Response Headers 里自動添加 content-type: application/json; charset=utf-8，那么一些請求庫就拿不到正確的返回。

替換線上文件

如果有正式環境 bug，可以將 js 替換成本地文件或文件夾，提高調試效率。

http://example.com/cdn/example.js file://D:/path/to/your/file/example.js

替換請求 url

http://qq.com/a/b?c=d http://qq.com/v/w?x=y&z=z

注意：這個規則的修改在瀏覽器的 network 里體現不出來，因為請求已經發出去，到 whistle 層才被修改的，我們可以在 whistle 的 Network 右側里看到 Real Url

修改返回碼

通過修改返回碼，可以模擬接口出錯

https://www.qq.com statusCode://500

修改請求、響應的 header

Web 開發有時會遇到請求 header 設置不對帶來的一些問題，如果問題出現在正式環境，我們可以通過修改請求 header （比如修改 Cookie、user-agent、Content-Type 等）來模擬修復，等確認問題后，再修改代碼，提高效率。

https://www.qq.com reqHeaders://{loginCookie}

同樣，我們可以通過 resHeaders 來修改響應頭，上文提到我們可以通過 file://{userList.json} 來模擬假數據，但這么做可能導致一些跨域的 header 丟失，對此，我們可以通過 resHeaders 加上跨域相關 header

https://www.qq.com/some/ajax resHeaders://{CORSHeaders}

Values 中的 CORSHeaders 值為

Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, token
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
content-type: application/json
status: 200

插入 js

我們可以在不修改頁面代碼的情況下，通過 whistle 往頁面插入 js，比如我們插入一個使頁面刷新的 js:

https://www.google.com jsPrepend://{reload.js}

更有用的，是往頁面中插入調試相關的 js，比如 vConsole.js，我們當然可以到 github 上將 vConsole.min.js 下載到本地，或放在 Values 中，然后把初始化代碼也加上，最后將 vConsole.js 注入到頁面來 debug。不過，whistle 提供了更方便的插件:

npm i -g whistle.inspect

https://www.google.com whistle.inspect://

reqScript

考慮一種場景：我們要測一個視頻上傳接口返回 500 的情況，看是否走到了正常的提示邏輯，通常我們模擬狀態碼就可以解決，但如果接口跨域了，會先發起一個路徑一致的 options 請求，我們希望這個 options 請求依然返回 200，只處理 post 請求，這時我們可以這么做：

http://qq.com/media/video reqScript://{onlyPostRule}

Values 中的 onlyPostRule:

if (method === 'POST') {
  	rules.push('http://qq.com/media/video statusCode://500');
}

https

抓取 https 請求需要安裝證書，官網文檔 已經很詳細了，這里就不再贅述，不過有兩點要補充說明:

1. 安裝了某台電腦的 whistle 證書，換另一台，還需要繼續安裝另一台電腦的 whistle 證書
2. rootCA.crt 之所以能下載，是 whistle 做了代理，所以移動端安裝證書時要先連上 whistle 的代理才能安裝

手機代理到 whistle

我們可以將電腦、手機連在同一個局域網下 (一般連同一個 wifi 就可以，公司有網絡策略限制得再想辦法)，然后點擊 whistle 界面右上角的 Online

手機上進入 wifi 設置，代理設為手動，主機名填圈出來的 ipv4 ip，端口填 whistle 默認的 8899:

這么操作后，我們就可以抓到手機上的請求了。

關於 whistle 就介紹到這里，如有疑問或任何想法，歡迎大家評論。

參考資料：

whistle 官方文檔