抓包就指着它了——whistle 提升前端開發幸福感的利器

前言

好多人認爲 whistle 是抓包工具，殊不知抓包只是 whistle 能力的冰山一角。除了抓包外，它還能修改請求與響應、真機調試 h5 移動端、解決跨域、域名映射等等等。總而言之，使用 whistle 能夠提升我們的開發效率，改善開發體驗。

whistle 一出手就是抓包工具的極限，那年它雙手插兜不知道什麼是對手（doge）。

安裝 & 使用

安裝與啓動 whistle

npm install -g whistle
w2 start // 啓動whistle

w2 stop //停止whistle

啓動之後會在本機啓動一臺服務器，默認端口是 8899

在本機打開該地址會進入 whistle 的控制面板，如下圖所示。抓包，修改請求和響應的內容都是在這個控制面板內進行配置的。如果要防止其他人訪問配置頁面，可以在啓動時加上登錄用戶名和密碼 -n yourusername -w yourpassword

瀏覽器代理插件

在啓動本地啓動了 whistle 之後，要抓包網絡的請求並不會經過 whistle，這時候我們就需要安裝一個插件，讓目標網站的請求經過 whistle 完成抓包等後續的操作。

官方推薦的插件是 SwitchyOmega，如果你使用的谷歌瀏覽器需要在應用商店翻牆進行下載。如果不想翻牆可以直接使用自帶的 edge 瀏覽器，在 edge 的應用商店下載可以免翻牆。點擊獲取即可輕鬆下載。

安裝完成之後瀏覽器的工具欄內就會出現一個圓圈圖標。

我們進入選項界面對瀏覽器代理進行配置，把代理服務器填寫 whistle 啓動的端口和地址，然後把 switchyOmega 的選項改爲 proxy 服務器代理就完成了。

這時候在瀏覽器內打開想要抓包的網站就可以抓包了。目前只可以抓 http 的請求，因爲我們還沒有進行證書配置，如何配置證書後面會說。

注意如果使用 edge 下載的插件就只能在 edge 插件內進行抓包，如果在谷歌打開網站，並不會有抓包的信息。

配置證書

雖然現在在 whistle 的 network 內打印出了一些信息，但全部都是 http 的請求，並沒有 https 的請求，這是因爲我們沒有配置證書。配置證書方法如下，點擊二維碼進行證書下載（沒錯這個二維碼是可以點擊的，繃住了），隨後跟着步驟走就行了。

安裝證書請參考文檔: https://wproxy.org/whistle/webui/https.html

配置成功的話 https 這塊會變成一個對勾。

配置完證書之後再次刷新頁面，就可以看到所有的 https 請求了，可以清晰的看到請求體和響應體的內容

手機抓包

首先抓包的前提是手機和電腦要處於一個網絡下。關閉電腦端的防火牆，然後在手機的 wifi 設置中，把 WiFi 的代理模式設置爲手動代理，主機名和端口號是 電腦的 ip 地址 + whistle 的端口號。ip 地址可以通過終端的 ipconfig 查詢。

配置完之後手機發送的請求在 whistle 的 network 列表中就能看到了。在手機端訪問一下掘金的官網。

在工具欄這塊可以通過 settings 選項對請求進行過濾。可以在 whistle 中看到手機端訪問的列表數據。

應用場景

whistle 的強大遠遠不止能夠抓包這麼簡單，它還有很多其他的功能。

Weinre 控制檯

集成 weinre 的功能，用戶只需通過簡單配置 (pattern weinre://id) 即可使用，具體參見 weinre，更多移動端調試方法可以參考：利用 whistle 調試移動端頁面。

相信有過 h5 開發經歷的同學都遇到過這種情況，我電腦 f12 模擬移動端調試的時候非常的完美，但是一到真機上會出現各種奇奇怪怪的問題，而這些問題往往是比較難以定位問題並修復的，因爲在真機的 h5 頁面上沒有控制檯，我們無法審查元素。

但是當你使用了 whistle 你會發現只需要配置一行規則，就可以輕鬆的調出控制檯調試真機的 h5 頁面，這就是 Weinre 控制檯。具體效果如下圖，這裏爲了方便展示，真機調試就用 pc 端模擬手機代替（真實調試的時候，需要先實現上述的手機抓包，即手機電腦在同一網絡下，並且修改手機 wifi 的代理。）。可以看到左側並不是瀏覽器自帶的控制檯，而是 whistle 自帶的功能，在視察與修改左側元素時，我們手機上的內容也會隨之改變。

那麼如何實現上面的效果呢？

我們只需要在 Whistle 控制檯左側的 Rules 中添加一條規則即可。

${監聽的網址} weinre://${實例名稱} 這個實例名稱是工具欄中 Weinre 下拉框中的名字可以任意起

https://juejin.cn/ weinre://juejin

點擊工具欄中 Weinre 下面的 juejin 即可跳轉到 Weinre 控制檯頁面，再刷新下監聽網址的頁面即可審查元素。

藉助 Weinre 控制檯，我們可以更加容易的解決真機兼容性問題。

篡改響應

修改響應體還是很常用的，例如修復 bug 的時候，如果懷疑是接口返回值有誤導致的問題，就可以通過修改響應體，來排查到底是不是後端的問題。

在調試接口的時候，例如後端接口新增了一個返回值，我們需要根據這個返回值進行相應的邏輯處理，這時候我們也可以通過修改響應體的方式 mock 一下新增的字段，只要確保自己 mock 的結果和接口返回的結構一樣，就可以提前完成接口聯調。

具體做法：

前半段是請求地址（支持正則匹配） 後半段是響應體的文件。file://${路徑} 默認找的是 Values 下文件。

Ctrl+右鍵點擊橘色的路徑，會自動跳轉到 Values 下對應的文件裏，如果沒有會自動創建非常方便。

mock.json

可以看到 加完配置之後對應接口的響應體就變成了 mock.json 裏面的內容。

解決跨域

解決跨域是篡改響應的一種應用，有的後端接口沒有配置 CORS，導致前端接口跨域

歷史解決：通過 vite 或者 webpack 等工具做一個反向代理

通過 Whistle 的resHeaders可直接修改跨域接口的響應頭，增加 cors 配置

/getList/ resHeaders://{cors}

# cors 文件
access-control-allow-credentials: true always
access-control-allow-headers: *
access-control-allow-methods: GET, PUT, POST, DELETE, HEAD, OPTIONS
access-control-allow-origin: *
access-control-expose-headers: *
access-control-max-age: 18000L
content-type: application/json
date: Fri, 02 Dec 2022 04:00:28 GMT
server: 123123
Access-Control-Allow-Origin: *

當然功能遠不止這些，還可以 篡改 API 響應時間、HTTP 響應狀態碼等。。。

篡改請求

可以使用 reqMerge 修改修改請求體，它會把merge.json文件的請求體合併到原本接口的請求體中。

/savePerson/ reqMerge://{merge.json}

# merge.json
{
    name:'張三'
}

jsPrepend 進行 js 注入

使用 jsPrepend 可以在目標網址的 srcipt 中添加任意的 js 代碼。我們這裏向頁面中注入一個 Vconsole 移動端調試工具。${注入到哪個地址} jsPrepend://${注入的js路徑}

https://juejin.cn/ jsPrepend://https://cdn.jsdelivr.net/npm/eruda@2.4.1/eruda.min.js
https://juejin.cn/ jsPrepend://{test.js}

test.js

var vConsole = new window.VConsole();

打開控制檯可以發現，我們注入的 js 被添加到了 head 的最頂部。

VConsole 成功顯示到了頁面上

域名映射

# 可以一個ip 配置多個域名 並且支持端口號
127.0.0.1:9000 ddd.com aaa.com

文檔

whistle 文檔

結尾

頭一次接觸到抓包工具，感覺打開了新世界的大門。使用 whistle，以後不管是開發 mock 接口數據，還是定位 bug 都方便了很多。

希望大家能有所收穫！

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/O3i78Gp2l-rYKKf7Dpgs8w

猜你喜歡