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，你訪問 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 官方文檔