前端調試利器 Whistle -- 一個更高級的 Resource Override
背景
寫代碼是很舒服的一件事情,但是作為一個前端開發,通常還是會有很多的時間會去調試一些代碼。
對於一些小型的項目,它們的環境很容易搭建,本地搭個環境跑起來,基本也就足夠用了。然而,對於一些大型的項目,就沒有那麼方便了,基本別指望在本地能把整個項目跑起來。
這時候如果我們改了其中一個 js, 那麼該怎麼調試呢?
很容易能想到一個方法:我們要是把這個 js 的請求重定向到我們本地修改的那個就好了,這樣我們就能直接在線上調試了,本地只要跑個構建腳本就行了。
沒錯!現在有不少工具可以來做這個事情:
- Chrome DevTools 就可以做這個事情;
- 有不少插件可以更方便地做這個事情,如: Resource Override 插件 和 ReRes 插件;
- Windows 下還可以用 Fiddler -- 良心之作,筆者之前一直都用這個,這麼好用居然還是免費的!
- MacOS 下不差錢的可以用 Charles.
最近呢,筆者換工作了,公司配的是 MBP, 這就尷尬了,沒有 Fiddler 用了 o(╥﹏╥)o
插一句,有木有想換 MBP 的童鞋,歡迎來投簡歷:阿里南京 2019 秋招季/社招,誠邀加入~
Chrome DevTools 還是功能有點弱。Charles 是用不慣的。Resource Overrides 這種擴展雖好,但是它是通過 30X 重定向來搞的,所以呢 HTTPS 的資源重定向到 HTTP 的時候結果會報錯……
Whistle 的功能和原理
終於,今天的主角 Whistle 登場了~
Whistle 的定位就是一個 『跨平台web調試代理工具』,可以用來查看、修改HTTP、HTTPS、Websocket的請求、響應。
它的原理其實很簡單,不是像 wireshark 一樣直接在網卡上抓包,而是像 Fiddler 的代理模式 :
- Whistle 自己會啟動一個代理伺服器;
- 我們自己需要配置下瀏覽器的代理走它的代理伺服器;
- 然後 Whistle 就在代理的同時把 HTTP/HTTPS 的報文都給順道截獲了,當然像 Resource Override 一樣順手改改報文也不在話下了。
有人問 HTTPS 不是加密了嗎?怎麼也能截獲?
這個問題問得好,原則上來說,HTTPS 的密文在代理伺服器上是不能解密的;但是,有一種方法叫『中間人攻擊』,通過這種方式,Whistle 就能將 HTTPS 的密文解密掉。
當然,這裡澄清下,這種方式雖然是叫『中間人攻擊』,但是也是要我們配合下 Whistle 才能行得通。Whistle 本身並不是惡意軟體。
安裝 Whistle
有木有想要迫不及待地想來試用下 Whistle 了呢?別著急,先安裝下。
Whistle 是用 node.js 開發的,所以包是在 npm 上,可以用 npm 來安裝:
> npm install -g whistle
當然,國內的話,建議使用淘寶的鏡像:
> npm install whistle -g --registry=https://registry.npm.taobao.org
安裝完後,會有兩個可執行文件:whistle 和簡寫 w2.
可以看看其基本命令:
> w2 help
Usage: w2 <command> [options]
Commands:
status Show the running status of whistle
use/add [filepath] Set rules from a specified js file (.whistle.js by default)
run Start a front service
start Start a background service
stop Stop current background service
restart Restart current background service
help Display help information
Options:
...
啟動 Whistle
啟動命令如上面的 help 所展示的,有兩個:
- w2 run 是前台運行;
- w2 start 是作為一個後台服務來運行。
比如說,我們先來前台運行吧: