如何使用Whistle進行優雅的web調試

Whistle 是一款 Web 調試工具，使用 Whistle，能夠修改一個 HTTP/HTTPS 請求的方方面面，咱們能夠經過它 Mock 數據、修改請求延遲時間、修改靜態文件等等。市面上有許多 Web 調試工具，好比在 Windows 上比較有名的 Fiddler，好比說 Charles 等等。而 Whistle 具備開源免費、配置簡單、以及跨平臺等特色，在使用它一段時間以後，我認爲在前端開發中它徹底可以代替上述的工具。下面讓咱們結合實際場景來看看 Whistle 能幫助咱們作什麼吧。

快速起步
在開始使用 Whistle 以前，須要安裝以及進行一些配置。

1. 下載

npm i -g whistle

2. 啓動 whistle 默認監聽在 8899 端口

w2 start
啓動 Whistle 以後，咱們訪問 localhost:8899 就能夠看到 Whistle 的配置界面了，如圖，界面左側有 4 個菜單項，Network 能夠查看請求響應的詳情。Rules 是規則配置的地方，關於規則是什麼，咱們放到後面講。在 Values 中咱們能夠配置 key-value 數據，以後能夠在 Rules 使用對應的鍵值進行引用。Plugins 裏展現了咱們額外安裝的 Whistle 插件，而且能夠對這些插件進行配置。

Whistle 配置界面
Whistle 的規則主要由兩部分組成，pattern 和 operatorURI，Whistle 使用 pattern 對請求進行匹配，並對匹配上的請求上應用 operatorURI 定義的操做，經過不一樣的 operatorURI，能夠作到替換請求體、響應體、響應碼等等事情。

規則
爲了讓咱們的請求被 Whistle 代理，還需配置 HTTP 代理或者 HTTPS 代理到 Whistle，若是使用 Chrome 瀏覽器，推薦 SwitchyOmega 配置代理，這樣更加靈活。另外，爲了可以抓取 HTTPS 協議的包，咱們還須要下載安裝並信任 Whistle 的 HTTPS 證書，其中，關於 iOS 的證書配置，我以前寫了一篇短文。

關於 Whistle 更加詳細的配置方法，請參考 Whistle 的官方文檔。

下面，讓咱們看看 Whistle 的一些功能。

映射
example.com localhost:8000
經過配置這樣的規則，當咱們訪問 example.com 的時候，實際請求會打到 localhost:8000。

若是咱們的 API 是同源的，而且咱們只想將靜態資源的請求替換爲本地開發中的，還能夠這樣配置：

假設全部 API 路徑爲 /api，仍然走實際地址

example.com/api example.com/api

其餘請求到本地

example.com localhost:8000
Mock 數據
平常開發中，咱們常常須要對後端接口進行 Mock，這樣就不須要依賴後端實際部署狀況了，或者咱們須要測試一些邊緣狀況，Mock 這些邊緣狀況就能夠免除爲測試這樣的邊緣鏈路須要作的許多麻煩事情。最簡單的 Mock 能夠針對一個 pattern 替換響應體和響應碼等等。以下所示：

Rules

將 example.com/api/user 接口的響應內容替換爲 user.json 中的內容，並將響應碼替換成 200

其中，user.json 在 Values 面板中保存

example.com/api/user resBody://{user.json} replaceStatus://200
咱們甚至能夠設定請求的響應延時，只須要再加一個 resDelay 的 operatorURI：

10s 後返回

example.com/api/user resBody://{user.json} replaceStatus://200 resDelay://10000
可能有時候會有更加複雜的 Mock 需求，好比幾個接口之間互相有關聯，須要跑通一個完整的鏈路可能須要一些定製的邏輯。Whistle 提供了不少插件，其中有一個可以提供很是強大 Mock 能力的插件——whistle.vase。使用這個插件，咱們甚至能夠直接寫 JS 代碼，根據咱們的具體請求參數做出各類具體邏輯。

npm i -g whistle.vase
在安裝完以後，就能夠在 Plugins 中對其進行配置了。

移動端調試
移動端最佳的調試方案應該是直接鏈接到桌面瀏覽器的調試工具，好比說移動端的 Safari 能夠直接鏈接到 Safari 上，安卓的 Chrome 能夠直接鏈接到 Chrome 的 DevTools 上，這種調試方法所獲得的調試功能最多最強大。可是，並非全部狀況下咱們均可以使用這種方式進行調試的，此時就可使用更加通用的方法，下面介紹兩種藉助 Whistle 進行移動端調試的方案。

Whistle 自帶了 Weinre，能夠進行移動端遠程調試，開啓該功能很簡單，只需在須要調試的 pattern 後面加上以下operatorURI：

www.zhihu.com weinre://debug
其中 debug 爲類別（能夠自由指定名稱），方便咱們對各個頁面進行分類，這樣一來，咱們在 Whislte 的應用界面的 Weinre 菜單中就能夠看到 debug 了，點擊 debug，在手機上打開對應的頁面，就能夠愉快地進行調試了。

另外一種方案是使用移動端的調試面板（引入特定的包），目前有許多移動端的調試面板工具能夠知足輕量級的調試需求，好比 vConsole、Eruda 等等。不過，咱們的代碼中不必定有加載這些調試包（好比咱們生產環境代碼），咱們能夠藉助 Whistle 在 HTML 響應體後面增長一段加載移動端調試面板的代碼。好比說咱們使用 Eruda，那麼咱們能夠在 Values 中增長下面一段代碼，取名爲 load_eruda.js：

(function() {
var script = document.createElement('script');
script.onload = function() {

eruda.init();

};
script.src = 'https://cdn.jsdelivr.net/npm/...';
document.body.appendChild(script);
})()
假設咱們要調試知乎（http://www.zhihu.com），利用 jsAppend 將這段自定義腳本加到 HTML 後方，像這樣增長規則：

www.zhihu.com jsAppend://{load_eruda.js}
打開 www.zhihu.com，就能夠看到 Eruda 的調試按鈕了。

總結
以上就是對 Whistle 的介紹，Whistle 提供了超過 60+ 個協議（operatorURI），能夠知足咱們平時在 Web 調試過程當中各式各樣的需求，能夠查看 Whistle 的文檔進一步探索。固然，目前 Whistle 也存在一些不足，好比如今還不支持 HTTP/2 的抓包（做者有計劃支持），好比 Mock 數據如何與團隊共享的問題。不過，做爲一款在積極開發且功能在我看來已經比較完善的應用，很是推薦你們一試。

附：其餘相似工具Wireshark - 網絡數據包分析軟件，網絡協議棧的各個層的數據均可以很方便地查看。Termshark - 「終端版」的 WiresharkCharles - 一款老牌 HTTP/HTTPS 抓包調試工具Fiddler - 又一款免費的 Web 調試工具mitmproxy - 一款開源免費的交互式的 HTTPS 代理