手把手教你接入前端熱門抓包神器 - whistle
whistle 是一個基于 Node.js 的跨平臺網(wǎng)絡(luò)調(diào)試工具。最近隨著 Nohost 的開源，有不少同學(xué)問了 whistle 相關(guān)的問題，本篇文章將結(jié)合幾個常見的業(yè)務(wù)場景介紹如何在本地前端項目開發(fā)中使用 whistle 。
一、使用webpack devServer的項目
項目準(zhǔn)備
如今，大部分的前端項目是以 webpack 作為開發(fā)和構(gòu)建工具進(jìn)行項目開發(fā)的。我們將以這樣一個最常見的場景，即以 webpack 開啟本地 devServer 進(jìn)行開發(fā)和調(diào)試的方式，展示如何在這樣的前端項目中結(jié)合使用 whistle 。
我們以一個 create-react-app 開啟的項目為事例來進(jìn)行展示。首先，假定有一個以 create-react-app 新建的，名為 my-app 的前端項目：
create-react-app my-app
cd my-app
npm run start
會在瀏覽器中開啟一個 localhost:3000 的 tab，這是我們常見的一個本地前端開發(fā)的場景。
本地 host 的弊端
一般情況下，我們可以直接在 localhost 下進(jìn)行本地的調(diào)試開發(fā)。但是，基于 localhost 的本地開發(fā)有不少局限性：
用戶身份相關(guān)的部分功能，如登陸功能，cookie 讀取等對客戶端的域名有限制，使用 localhost 這個 host 可能會遇到限制。
使用 localhost 進(jìn)行本地開發(fā)，業(yè)務(wù)代碼中可能需要進(jìn)行一些額外的邏輯判斷，如針對本地域名和線上域名做行為區(qū)分等。
配置 whistle
為了解決上述問題，根據(jù)我們的實(shí)踐經(jīng)驗，本地開發(fā)時，通過線上真實(shí)域名訪問本地前端項目，似乎是一種更加有效的開發(fā)方式。
假設(shè)我們這個本地項目的線上真實(shí)域名為 qq.ketang.com ，則我們的目標(biāo)即是通過 qq.ketang.com 訪問和調(diào)試本地的 my-app 前端項目。
下面我們將演示如何使用 whistle 實(shí)現(xiàn)這個目標(biāo)操作。
1、配置 whistle 規(guī)則
打開 whsitle 的規(guī)則配置地址 127.0.0.1:8899 , 依次進(jìn)行如下操作:
-> 選擇 Rules 選項卡
-> 雙擊開啟 Default 配置（其后方出現(xiàn)綠色的打勾即為開啟成功）
-> 在右側(cè)規(guī)則編輯面板中輸入以下規(guī)則
qq.ketang.com/ http://127.0.0.1:3000/
-> 選擇 Save
2、啟用 proxy
選擇 SwitchyOmega 插件的 proxy 模式
隨后,在瀏覽器中訪問地址 https://qq.ketang.com, 就能成功訪問到我們本地的 my-app 項目了。
現(xiàn)在，我們就可以用項目的線上地址來調(diào)試本地項目，而不用使用 127.0.0.1:3000 這樣的本地地址了。
whislte 做了什么
這其實(shí)是 whislte 中的配置規(guī)則起了作用
qq.ketang.com/ http://127.0.0.1:3000/
這條規(guī)則將所有 qq.ketang.com/及其子路徑下的請求轉(zhuǎn)發(fā)到了http://127.0.0.1:3000/下。
whistle 的強(qiáng)大功能之一就是提供了各種模式的規(guī)則匹配以應(yīng)對前端開發(fā)中的不同場景，上面這條，只是一條最簡單的規(guī)則。
如果你想現(xiàn)在就對 whistle 的配置規(guī)則有個更全面和清晰的認(rèn)識，可以參考以下鏈接：
# whistle 配置方式
https://wproxy.org/whistle/mode.html
# whistle 規(guī)則的模式匹配
http://wproxy.org/whistle/pattern.html即使你有沒細(xì)細(xì)翻閱又或者沒有很好地理解 whistle 的配置規(guī)則也沒關(guān)系，下面我們將繼續(xù)以這個項目為例，結(jié)合幾個常見的開發(fā)場景，告訴開發(fā)者應(yīng)該如何配置常見的 whislte 規(guī)則。
忽略子路徑下的 cgi 接口轉(zhuǎn)發(fā)
在我們的 my-app 項目中，如果項目中涉及到同域下子路徑的后端接口，如qq.ketang.com/cgi-proxy/xxxxx ，我們的初衷是 cgi 接口不需要轉(zhuǎn)發(fā)，依然走線上即可。
但是如果按照目前的配置，該 cgi 接口也會被轉(zhuǎn)發(fā)至本地的相應(yīng)路徑，這顯然不是我們希望看到的結(jié)果。
# bad, 不是我們所希望的
# qq.ketang.com/cgi-proxy/xxxxx 也會轉(zhuǎn)發(fā)至 http://127.0.0.1:3000/cgi-proxy/xxxx
qq.ketang.com/ http://127.0.0.1:3000/
此處需要使用 excludeFilter 規(guī)則：
# good，使用excludeFilter規(guī)則, 路徑匹配
# qq.ketang.com/cgi-proxy/ 及其子路徑下的請求不會被轉(zhuǎn)發(fā)至 http://127.0.0.1:3000/cgi-proxy/
qq.ketang.com/ http://127.0.0.1:3000/ excludeFilter://qq.ketang.com/cgi-proxy/
以上我們在 excludeFilter 里采取的是路徑匹配，此外我們還可以采取通配符匹配或者正則匹配來實(shí)現(xiàn)這一功能：
# also good, 使用excludeFilter規(guī)則, 通配符匹配
# qq.ketang.com/cgi-proxy/, qq.ketang.com/cgi-bin/ ... 這類的請求都不會被轉(zhuǎn)發(fā)
qq.ketang.com/ http://127.0.0.1:3000/ excludeFilter://^qq.ketang.com/cgi-*
# also good, 使用excludeFilter規(guī)則, 正則匹配
# qq.ketang.com/cgi-proxy/, qq.ketang.com/cgi-bin/ ... 這類的請求都不會被轉(zhuǎn)發(fā)
qq.ketang.com/ http://127.0.0.1:3000/ excludeFilter:///^\w+://qq\.ketang\.com/cgi-/
有讀者可能會疑惑，為什么以上正則匹配中的//qq 的//沒有轉(zhuǎn)義，這是因為在 whistle 內(nèi)部實(shí)際上是調(diào)用了new RegExp 的方式進(jìn)行構(gòu)造正則，已經(jīng)自動做了轉(zhuǎn)義，如果不放心，那么寫成 //qq 也可以。
關(guān)于模式匹配的具體規(guī)則可以參考官方文檔：
# whistle 規(guī)則的模式匹配
http://wproxy.org/whistle/pattern.html特定 cgi 接口的 mock
一個常見的場景是我們需要對某個 cgi 接口的返回數(shù)據(jù)進(jìn)行改造以模擬前端的多種 case ，whistle 有多種方式可以幫助開發(fā)者實(shí)現(xiàn)該功能。
假設(shè)有一個 cgi 接口路徑為/cgi-proxy/getMyName, 則本地 mock 的方式有
以本地文件作為響應(yīng)
# qq.ketang.com/cgi-proxy/getMyName 以本地的//User/dug/test/getMyName.json文件作為響應(yīng),
qq.ketang.com/cgi-proxy/getMyName file:///User/dug/data/getMyName.json
編輯在線文件作為響應(yīng)
如果不想用本地文件，也可以直接用 whistle 提供的在線文本功能。在 whislte 的配置界面中：
->選擇 “Values”
->點(diǎn)擊 “Create”, 輸入自定義的文件名（此處為ans.json）
->選中新建的文件，在右側(cè)的編輯欄中輸入作為響應(yīng)的內(nèi)容
# qq.ketang.com/cgi-proxy/getMyName 以Values面板中的ans.json作為響應(yīng)
qq.ketang.com/cgi-proxy/getMyName file://{ans.json}
使用 xfile 模式
xfile 模式和上述的 file 模式功能基本一致，xfile 和 file 的唯一區(qū)別是 file 找不到對應(yīng)文件返回404，而xfile則是繼續(xù)請求線上資源。
# xfile和file基本功能一致，只是若找不到對應(yīng)文件，xfile將會繼續(xù)請求線上資源
qq.ketang.com/cgi-proxy/getMyName xfile://{ans.json}
二、無構(gòu)建工具的傳統(tǒng)前端項目
不少老的項目由于種種原因沒有使用構(gòu)建工具來構(gòu)建前端 JS，CSS 等前端資源。對于這種項目，我們希望用本地的對應(yīng)資源來進(jìn)行開發(fā)和調(diào)試。
比如，在我們現(xiàn)在需要對一個老項目進(jìn)行迭代，項目的線上域名為qq.ketang.com, 這次改動主要涉及到以下兩個文件：
<!-- index.html -->
...
<link rel="stylesheet" href="/assets/css/main.css" type="text/css">
...
<script src='assets/js/module/my.js'>
在 whislte 中，我們需要配置規(guī)則：
# 分別將線上的css和js的訪問 指向本機(jī)的項目路徑
qq.ketang.com/assets/css/ xfile:///User/dug/myWork/ketang_pro/assets/css/
qq.ketang.com/assets/js/ xfile:///User/dug/myWork/ketang_pro/assets/js/
之后，我們在瀏覽器訪問 qq.ketang.com，其中對于/assets/css/ 和/assets/js/路徑下的請求將會以本地項目目錄下的對應(yīng)文件響應(yīng)，然后我們就能在本地修改和調(diào)試項目代碼了。
三、以插件支持特殊的需求場景
有一些特殊的應(yīng)用場景，依靠 whistle 的基礎(chǔ)功能可能無法實(shí)現(xiàn)。
但是，whistle 支持自定義插件來拓展功能，同時社區(qū)也有一些插件的積累。
例如，假設(shè)項目中有一個 combo 的 url 請求為http://i.cdn.com/??x.js,y.js,z.js 。通過社區(qū)的 whistle.combo 插件可以實(shí)現(xiàn)將 combo url 切割成數(shù)組[x.js, y.js, z.js]并分別組合成 http://i.cdn.com/x.js, http://i.cdn.com/y.js, http://i.cdn.com/z.js
關(guān)于插件 whistle.combo 詳見
# whisle.combo
https://github.com/whistle-plugins/whistle.combo另外，這里有一份 whistle 的插件集合，可以在里面搜尋是否有滿足自己需求的插件。
# whislte 插件列表
https://github.com/whistle-plugins愛心三連擊
1.看到這里了就點(diǎn)個在看支持下吧，你的在看是我創(chuàng)作的動力。
2.關(guān)注公眾號腦洞前端，獲取更多前端硬核文章！加個星標(biāo)，不錯過每一條成長的機(jī)會。
3.如果你覺得本文的內(nèi)容對你有幫助，就幫我轉(zhuǎn)發(fā)一下吧。