whistle
一戳鹅、業(yè)務(wù)場(chǎng)景
前端本地開(kāi)發(fā)酬诀，我們往往需要頻繁的改動(dòng)代碼磺芭，并且實(shí)時(shí)的看到改動(dòng)效果，往往有以下情景 :
- 有開(kāi)發(fā)環(huán)境是尖，則本地使用webpack-dev-server開(kāi)發(fā)服務(wù)器代理build的文件
- 沒(méi)有開(kāi)發(fā)環(huán)境奖亚，即線上進(jìn)行調(diào)試，則需要將線上網(wǎng)站的請(qǐng)求(js析砸、css)等，使用fiddle或whistle或查爾斯等真機(jī)抓包工具攔截特定請(qǐng)求并將它替換為本地文件
二爆袍、為什么使用whistle
因?yàn)閒iddler功能強(qiáng)大但是容易內(nèi)存泄漏首繁，whistle也能替代fiddler完成我們?nèi)粘５拈_(kāi)發(fā)工作作郭。
三、起步
安裝 :
cnpm i whistle -g
啟動(dòng) :
w2 start -p 8899 // 不設(shè)置端口默認(rèn)使用8899
打開(kāi) http://127.0.0.1:8899/弦疮，即可以看到如下界面
此時(shí)還不能抓取包夹攒，我們需要配置代理，需要在谷歌商店安裝whistle插件
安裝完成后胁塞，開(kāi)啟代理狀態(tài)
接下來(lái)咏尝，開(kāi)啟Https，在whistle上啸罢，下載證書(shū)编检，并在chrom上導(dǎo)入證書(shū)
將下載好的證書(shū)導(dǎo)入，記得將證書(shū)存儲(chǔ)類型設(shè)置為
這樣就可以抓取https請(qǐng)求了扰才。
四允懂、基礎(chǔ)功能
whistle有兩大常見(jiàn)功能，分別是
- NetWork 抓包
- Rules 設(shè)置代理
A. 設(shè)置代理
我們可以在Rules選項(xiàng)卡中的default設(shè)置代理衩匣，例如現(xiàn)在有一個(gè)需求 : 將我的首頁(yè)的一個(gè)js文件代理為本地硬盤(pán)的一個(gè)文件蕾总。
那么我們可以在Rules頁(yè)面上
!
再次刷新頁(yè)面， 則可以看到警告提示窗口了琅捏，因?yàn)閠est.js只有一行alert(1)生百，則說(shuō)明代理成功了
B. 匹配模式
whistle有以下幾種匹配模式，以下幾種模式均只能用于左側(cè)柄延，即要被代理的地址蚀浆，而不能用在右側(cè)
a. 基本匹配
www.zdxhyangyan.cn file://D:\Github\koa # 匹配域名下的所有請(qǐng)求到本地目錄下
http://www.zdxhyangyan.cn file://D:\Github\koa # 匹配域名下的http請(qǐng)求到本地目錄下
https://www.zdxhyangyan.cn file://D:\Github\koa # 匹配域名下的https請(qǐng)求到本地目錄下
https://www.zdxhyangyan.cn:8080 file://D:\Github\koa # 限定端口號(hào)以及協(xié)議
http://www.zdxhyangyan.cn/gitbook file://D:\Github\koa # 限定具體的路徑
$https://www.zdxhyangyan.cn/gitbook/dataConstruct/ # 精確匹配
b. 正則匹配
/http:\/\/(.*)/ log:// # 與javascript的正則表達(dá)式定義一樣
c. 通配符
^www.zdxhyangyan.cn/test/*** file://D:\Github\koa # 以^開(kāi)頭，*為通配符
*.com file://D:\Github\koa # 通配符域名匹配
# 匹配二級(jí)域名以.com結(jié)尾的所有url拦焚，例如test.com蜡坊、abc.com，但不會(huì)匹配*.xxx.com
//*.com file://D:\Github\koa
# 通配符路徑匹配
*/ file://D:\Github\koa
*/xxx file://D:\Github\koa
C. 跨域處理
whistle可以給請(qǐng)求設(shè)置跨域頭赎败，解決瀏覽器攔截跨域請(qǐng)求的問(wèn)題秕衙。
*.zdxhyangyan.cn resCors://*
D. 插入JS
whistle 可以通過(guò)設(shè)置規(guī)則，在訪問(wèn)特定網(wǎng)站時(shí)插入本地的JS僵刮、CSS等文件据忘。例如
*.zdxhyangyan.cn/product/ jsAppend://D:\test.js
*.zdxhyangyan.cn/product/ cssAppend://D:\test.css
