Whistle，web 抓包與 debug 利器

賴智輝發表於2018-11-25
Web

什麼是 whistle

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

whistle 介面一覽

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

switchyOmega

whistle 的常用配置

配 host

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

whistle 的 host 在 rules 下配置:

Whistle，web 抓包與 debug 利器

以下是常用的配 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 是個很有用的功能，位置如下:

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

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}
複製程式碼

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://
複製程式碼

Whistle，web 抓包與 debug 利器

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

whistle 的 ip

手機上進入 wifi 設定，代理設為手動，主機名填圈出來的 ipv4 ip，埠填 whistle 預設的 8899:

手機代理到 whistle

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

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

參考資料：

whistle 官方文件

相關文章