什么是抓包和代理
抓包：當我們需要知道一個 HTTP 請求發送和返回的信息時，就需要用到抓包工具。在電腦上 Chrome 自帶有網絡調試工具，如果在移動設備上，就需要一個專門的抓包工具來抓取移動端的流量，來了解網絡請求發送了什么數據，返回了什么數據；
代理：當我們在本地調試線上網站的代碼時，由于本地域名 localhost 沒有線上域名的 cookie，無法鑒權，這時候就需要用代理工具騙過瀏覽器，讓瀏覽器以為訪問的是線上的地址，從而可以用線上的 cookie 來調試本地代碼。代理工具起的作用是把對地址欄 url 的請求替換成指定的 url，但是瀏覽器本身沒有察覺。這里講的是 web 開發時的代理，除此之外還有其他形式的代理，暫不做介紹。
whistle 簡介
抓包
今天要介紹的是 whistle，一個開源免費的抓包代理神器，配置很簡單。
對比它的競品 Charles、Fiddler，wireshark，它有這些優勢：
- 開源，不太可能帶有惡意代碼；
- 免費（Charles 收費）；
- 全平臺都可以使用（基于 nodeJS）（Fiddler 在 linux 很難用）；
- 配置代理非常簡單；
- Github：https://github.com/avwo/whistle
- 官網 https://wproxy.org/whistle/
下面是 whistle 的功能圖：
快速上手
先安裝 whistle：
$ npm install -g whistle
安裝成功之后可以使用 w2 start、wproxy start、whistle start 三者之一來啟動 whsitle。啟動之后顯示如下信息：
whistle 啟動成功
啟動完成之后，whistle 會在后臺運行，無法通過 ctrl + c 關閉，關閉和重啟的操作如下：
# 停止
$ w2 stop
# 重啟
$ w2 restart
配置代理：
主推在瀏覽器安裝 SwitchyOmega，它有多強大，用了的都知道。Chrome 和 FF 插件商店都可以找到，找不到可以在 https://github.com/FelisCatus/SwitchyOmega 下載。
以 Chrome 作例子，安裝好了之后插件欄會出現一個圈圈的圖標，點擊圈圈之后點擊選項進行配置。
進入 SwitchyOmega 配置
添加 whistle 配置
按照這張圖來配置即可。
開始使用 whistle 抓包
首先要選擇 SwitchyOmega 中我們剛才創建的那個情景模式，我這里設置的叫 proxy。
然后到一個頁面，以 http://tools.jb51.net/ 為例（非 HTTPS 的網站）。進入頁面之后可以看到 whistle 左側的網絡選項中出現了請求列表：
使用 whistle 代理本地服務器
whistle 代理的匹配規則：https://wproxy.org/whistle/pattern.html
在文章最開始介紹過 web 連接代理，我們來模擬真實會碰到的情況。
以下都是段子：
公司 A 有一個線上的的網站 http://lxfriday.com，另外有一個專做預發布的網站 http://test-lxfriday.com（測試環境）。
公司 A 里來了個新人小劉，老板給了他一個需求，“小劉啊，這幾天客戶提交反饋說個人中心頁面xx的字體太小了，你把字體改大點吧！！！”。
小劉拉了最新的代碼，執行 yarn start 跑起來了，然后小劉到瀏覽器中訪問 localhost:3000 ，發現頁面報了一堆錯！！！
打開控制臺一看，原來向后端發請求時 url 地址都是 http://test-lxfriday.com/api 開頭的，請求被瀏覽器判定為跨域了。
小劉急了，心想：這咋辦，服務端哥們不給開 CORS 跨域，我用 localhost 根本沒法讓頁面正常顯示啊！！！
上面情景中，小劉碰到瀏覽器跨域問題，服務端沒有開啟 CORS，所以 localhost:3000 和 http://test-lxfriday.com 無法直接通信。
這種情況使用代理工具做下代理即可。配置 whistle 代理規則：
# 這條規則會讓 test-lxfriday.com/api 不會被代理，服務端依然請求線上的測試環境
test-lxfriday.com/api test-lxfriday.com/api
# 代理 test-lxfriday.com 到 localhost:3000
test-lxfriday.com localhost:3000
SwitchyOmega 切換到 whistle 對應的配置（我的是 proxy），然后訪問 test-lxfriday.com 將會正常顯示。
我的測試代碼：
const http = require('http')
const server = http.createServer((req, res) => {
console.log('req.url', req.url)
res.writeHead(200, {
// 'content-type': 'Application/json',
// 'access-control-allow-origin': '*',
// 'access-control-allow-headers': 'name'
// 'access-control-allow-method': 'get,post,put,option,delete'
})
res.end(
JSON.stringify({
name: 'lxfriday',
age: 1111
})
)
})
server.listen(3000)
console.log('listenning')
頁面效果：
頁面效果
用 whistle 代理手機
需要手機和電腦都處于同一個內網下（大多數情況是同一個 wifi 下，大公司內部內網是互通的，這種內網地址也是可以的）。
以小米手機為例，點擊已經連接的 wifi，往下滑，有一個【代理】選項，設為【手動】再設置主機為電腦的內網 ip 地址，端口為【8899】，點擊右上角保存，即可代理成功了。
windows 電腦查詢內網 ip 地址
小米手機設置代理：
代理完成之后，訪問頁面：
whistle 抓取 HTTPS 請求
沒有配置 HTTPS 根證書時，用前面章節配置的辦法，訪問掘金，查看抓包數據，發現全是 Tunnel to。
開啟抓取 HTTPS 需要先勾選 Capture TUNNEL CONNECTs，然后安裝根證書并信任根證書。
勾選 Capture TUNNEL CONNECTs
根證書在彈窗上面，點擊進去下載即可，下面以 windows 10 為例講解安裝并信任根證書的過程：
雙擊下載的根證書，點擊【安裝證書】，選擇【本地計算機】，下一步，選擇【將所有的證書都放入下列存儲】，選中后再下一步就完成了。
此時電腦再次訪問掘金網站，可以看到 HTTPS 請求的內容了：
抓取手機 HTTPS 請求
抓取手機 HTTPS 請求是最難配置的一步，在不同手機上的抓取效果可能不一致，下面所述步驟經測試在小米手機上會導致頁面圖片無法正常加載。
以華為平板為例來進行手機的配置。首先和前面代理手機一樣，手機和電腦連入相同的內網，手機配置代理連接電腦的 whistle 端口。然后手機掃描下面二維碼：
會提示下載 root CA 證書，下載下來之后，進入設置，搜索【加密】，點擊【加密和憑據】，選擇【從存儲設備安裝】，選擇下載的 CA 證書（最好是在電腦上下載好了，直接拖到手機的根目錄下方便查找），隨便設置證書名稱，我設置為 【whistle】，憑據和用途選擇【VPN和應用】，點擊確定即導入成功。
如果導入成功，可以在【受信任的憑據】->【用戶】中看到。
導入成功之后，我們在手機上請求掘金頁面。查看 whistle network，可以看到抓包數據。
代理 HTTPS 請求
在和服務端聯調時，可能服務端是部署在 HTTPS 上的，而你的代碼必須要在 app 的 webview 中顯示，這個時候聯調會比較麻煩，可以考慮使用 HTTPS 代理手機端請求。
除了在抓取手機 HTTPS 請求這一節的配置，還需要在 whistle 中配置代理地址：
https://xx.com https://juejin.im
配置好之后，在手機上訪問 https://xx.com 即可訪問到掘金主頁的內容。當然我們實際開發中更多是下面這樣配置，讓我們訪問線上地址時訪問到電腦上的代碼：
https://site-online.com http://192.168.0.106:3000
訪問成功之后顯示如下（實例代碼在前面）：
總結
總的來說 whistle 的功能是非常完善的，whistle 免費而且全平臺都可以使用，相信這是一個非常大的亮點。
whistle的匹配模式(pattern)大體可以分成域名、路徑、正則、精確匹配、通配符匹配。
關于 whistle 配置代理的規則，官網有詳細的描述 https://wproxy.org/whistle/pattern.html，這里摘錄一部分：
域名匹配
# 匹配域名www.test.com下的所有請求，包括http、https、ws、wss，tunnel
www.test.com operatorURI
# 匹配域名www.test.com下的所有http請求
http://www.test.com operatorURI
# 匹配域名www.test.com下的所有https請求
https://www.test.com operatorURI
# 上述匹配也可以限定域名的端口號
www.test.com:8888 operatorURI # 8888端口
www.test.com/ operatorURI # http為80端口，其它443端口
路徑匹配
# 限定請求協議，只能匹配http請求
http://www.test.com/xxx operatorURI
http://www.test.com:8080/xxx operatorURI
# 匹配指定路徑下的所有請求
www.test.com/xxx operatorURI
www.test.com:8080/xxx operatorURI
精確匹配
包含請求協議
$http://www.test.com operatorURI
$https://www.test.com/xxx? operatorURI
這種情況分別只能匹配這兩種請求
http://www.test.com # 瀏覽器會自動改為http://www.test.com/
https://www.test.com/xxx?
不包含請求協議
$www.test.com/xxx operatorURI
這種情況可以匹配如下四種請求
http://www.test.com/xxx
https://www.test.com/xxx
ws://www.test.com/xxx
wss://www.test.com/xxx
最后
感謝閱讀，歡迎關注我的頭條號 云影 sky，帶你解讀前端技術，掌握最本質的技能。
