近期想進行一個抽獎送書活動，大家可以先關注公眾號等待後續抽獎通知哦，今天(1月12號)晚上9點，在群內發50元紅包，歡迎大家進群交流（群二維碼在文章末尾，關注公眾號新增我的個人微信也可以加你進群）。
下面我們進入正文。
什麼是抓包和代理
抓包：當我們需要知道一個 HTTP 請求傳送和返回的資訊時，就需要用到抓包工具。在電腦上 Chrome 自帶有網路除錯工具，如果在移動裝置上，就需要一個專門的抓包工具來抓取移動端的流量，來了解網路請求傳送了什麼資料，返回了什麼資料；
代理：當我們在本地除錯線上網站的程式碼時，由於本地域名 localhost 沒有線上域名的 cookie，無法鑑權，這時候就需要用代理工具騙過瀏覽器，讓瀏覽器以為訪問的是線上的地址，從而可以用線上的 cookie 來除錯原生程式碼。代理工具起的作用是把對位址列 url 的請求替換成指定的 url，但是瀏覽器本身沒有察覺。這裡講的是 web 開發時的代理，除此之外還有其他形式的代理，暫不做介紹。
whistle 簡介
今天要介紹的是 whistle，一個開源免費的抓包代理神器，配置很簡單。
對比它的競品 Charles、Fiddler，wireshark，它有這些優勢：
- 開源，不太可能帶有惡意程式碼；
- 免費（Charles 收費）；
- 全平臺都可以使用（基於 nodeJS）（Fiddler 在 linux 很難用）；
- 配置代理非常簡單；
- Github：github.com/avwo/whistl…
- 官網 wproxy.org/whistle/
下面是 whistle 的功能圖：
快速上手
先安裝 whistle：
$ npm install -g whistle
複製程式碼安裝成功之後可以使用 w2 start、wproxy start、whistle start 三者之一來啟動 whsitle。啟動之後顯示如下資訊：
啟動完成之後，whistle 會在後臺執行，無法通過 ctrl + c 關閉，關閉和重啟的操作如下：
# 停止
$ w2 stop
# 重啟
$ w2 restart
複製程式碼配置代理：
主推在瀏覽器安裝 SwitchyOmega，它有多強大，用了的都知道。Chrome 和 FF 外掛商店都可以找到，找不到可以在 github.com/FelisCatus/… 下載。
以 Chrome 作例子，安裝好了之後外掛欄會出現一個圈圈的圖示，點選圈圈之後點選選項進行配置。
按照這張圖來配置即可。
開始使用 whistle 抓包
首先要選擇 SwitchyOmega 中我們剛才建立的那個情景模式，我這裡設定的叫 proxy。
然後到一個頁面，以 tools.jb51.net/ 為例（非 HTTPS 的網站）。進入頁面之後可以看到 whistle 左側的網路選項中出現了請求列表：
使用 whistle 代理本地伺服器
whistle 代理的匹配規則：wproxy.org/whistle/pat…
在文章最開始介紹過 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】，點選右上角儲存，即可代理成功了。
小米手機設定代理：
代理完成之後，訪問頁面：
whistle 抓取 HTTPS 請求
沒有配置 HTTPS 根證書時，用前面章節配置的辦法，訪問掘金，檢視抓包資料，發現全是 Tunnel to。
開啟抓取 HTTPS 需要先勾選 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 配置代理的規則，官網有詳細的描述 wproxy.org/whistle/pat…，這裡摘錄一部分：
域名匹配
# 匹配域名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，帶你解讀前端技術，掌握最本質的技能。關注公眾號可以拉你進討論群，有任何問題都會回覆。
