前端應該知道的web調(diào)試工具——whistle

whistle 是什么

whistle窝剖，拼音[wēisǒu])基于 Node 實現(xiàn)的跨平臺 web 調(diào)試代理工具，類似的工具有 Windows 平臺上的 Fiddler简烤，主要用于查看、修改 HTTP一喘、HTTPS敛惊、Websocket 的請求、響應胀莹，也可以作為 HTTP 代理服務器使用基跑，不同于 Fiddler 通過斷點修改請求響應的方式，whistle 采用的是類似配置系統(tǒng) hosts 的方式描焰，一切操作都可以通過配置實現(xiàn)媳否，支持域名、路徑荆秦、正則表達式篱竭、通配符、通配路徑等多種匹配方式步绸，且可以通過 Node 模塊擴展功能

總的來說掺逼，whistle 有如下幾個特性

基于 Node 實現(xiàn)的跨平臺 web 調(diào)試代理工具，window瓤介，Linux吕喘，Mac 都可以使用
用于查看、修改 HTTP惑朦、HTTPS兽泄、Websocket 的請求、響應漾月，也可以作為 HTTP 代理服務器使用
whistle 采用的是類似配置系統(tǒng) hosts 的方式病梢，一切操作都可以通過配置實現(xiàn)
可以通過 Node 模塊擴展功能

為什么選擇 whistle

第一點，whistle 是一個 web 調(diào)試代理工具梁肿，它的功能十分強大蜓陌。作為一名前端，我們經(jīng)常跟協(xié)議中的應用層打交道吩蔑，Mock 數(shù)據(jù)钮热，修改 HTTP 請求頭，解決跨域問題烛芬、移動端調(diào)試等等隧期，都是我們必備的技能，而 whistle 就能解決其中 90% 的問題

我經(jīng)常使用的一些場景如下赘娄，后面我們針對一些場景做一些講解和實戰(zhàn)

綁定 Host
替換請求（Mock 數(shù)據(jù)）
使用 Weinre 或者 vConsole 調(diào)試移動端頁面
修改 cookie
往 HTML 中插入樣式
往 HTML 中插入腳本
...

以下為官方的一張圖仆潮，大家可以感受一下

官方圖片

第二點，除了功能十分強大遣臼，使用也十分便捷性置，只需要簡單的命令就能打開網(wǎng)頁進行抓包等操作（當然你需要先安裝）

第三點，不像 window 中的 Fidder 需要消耗大量 CPU揍堰，也不像 Mac 中 Charles 不是免費的（當然也可以破解）鹏浅，它是免費的嗅义，開源的，而且一個跨平臺 web 調(diào)試代理工具

第四點基于 Node 模塊和可以通過 Node 模塊進行擴展隐砸，讓我們前端倍感親切

以上之碗，還沒說服你的話，希望接下來的實戰(zhàn)能夠讓你感受它的強大

安裝

安裝這一部分凰萨，我這里不打算細講继控，具體請看官方文檔安裝啟動

安裝 Node，推薦安裝最新版的 Node,雖然 whistle 支持 v0.10.0 以上版本的 Node胖眷。這一個我相信大家作為一名前端都應該有的環(huán)境武通。這里多插一句，推薦使用 n 管理 node 版本
安裝 whistle珊搀，如果很慢冶忱，請切換源，你懂的境析。再插一句囚枪，推薦使用 nrm 管理你的 npm 源

npm install -g whistle
// Mac
sudo npm install -g whistle

啟動 whistle
w2 start
啟動之后，我們看到以下劳淆，就表示成功了

這里還需要留意其他幾個經(jīng)常使用的命令

w2 help // 查看幫助链沼，里面很多常用的命令
w2 restart // 重啟 whistle
w2 stop // 停止 whistle
w2 run // 調(diào)試模式啟動whistle(主要用于查看whistle的異常及插件開發(fā))

配置代理，分為全局代理沛鸵、瀏覽器代理和移動端代理括勺。這里主要談談 mac 端全局代理，chrome 瀏覽器代理以及 IOS 側(cè)的移動端代理曲掰。其他詳情可以查看官方文檔安裝啟動疾捍。需要注意的是，代理服務器：127.0.0.1 端口號：8899栏妖。如果端口被占用乱豆，可以通過 -p 來指定新的端口

1.全局代理（mac）：System Preferences > Network > Advanced >Proxies > HTTP or HTTPS

2.瀏覽器代理。首先先下載 Chrome 代理插件：推薦安裝 SwitchyOmega 吊趾⊥鹪＃考慮到一些朋友在墻內(nèi)，可以去這里下載论泛。然后配置如下：

3.移動端代理续滋。注意，要和當前電腦的 WIFI 是同一個 WIFI以 IOS 為例

訪問配置頁面孵奶，一切順利的話，訪問 http://127.0.0.1:8899 就可以看到相關(guān)的頁面
還有一個很重要的步驟：安裝根證書蜡峰，假如不安裝根證書的話了袁，就不能抓 HTTPS 的包朗恳，安裝詳情步驟，這一點調(diào)試線上問題的時候载绿，可能會遺漏了

以上就是我們的準備工作了粥诫，可能還是一些同學還是會遇到一些問題，可以去官方 issue 看看有沒有相關(guān)的解決方法崭庸，也可以留言評論怀浆，我們一起看看

界面講解

對于新手來說，我們先熟悉下怕享，whistle 的界面执赡，有個大概的印象
以下是 whistle 的界面，常見的幾個選項：
Network——請求列表頁面
Rules——操作規(guī)則配置頁面
Values——存放 KeyValue 的系統(tǒng)
Plugins——插件列表頁面

快速上手——基礎使用【mock 數(shù)據(jù)以及解決跨域】

whistle 使用的是類似代理的方式函筋，Rules 版面下默認有一個 default 的分組沙合，我們可以創(chuàng)建、重命名跌帐、刪除一個分組首懈，可以根據(jù)以下的步驟快速建立一個分組，如下所示

接下來谨敛，我們就可以在右側(cè)建立一些規(guī)則究履，大顯身手了。我們來拿掘金的接口做個演示吧脸狸，掘金推薦首頁獲取列表數(shù)據(jù)的接口為 https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed最仑，以下是目前的頁面，注意肥惭，該接口的響應頭設置了 access-control-allow-origin: https://juejin.im

我們根據(jù)這個接口設置一條規(guī)則盯仪，以下規(guī)則表示完全匹配該接口，返回你指定的 juejinList.json 數(shù)據(jù)蜜葱，相當于 Mock 這個接口的返回

# 完全匹配全景，相當于 Mock 這個接口的返回
https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed file://{juejinList.json}

查看效果，報錯了牵囤，看看報錯爸黄，跨域問題，線上的之所以沒有報錯揭鳞，原因在于炕贵，線上的接口的響應頭設置了 access-control-allow-origin: https://juejin.im，所以我們還應該 Access-Control-Allow-Origin 請求頭

怎么辦野崇，就沒有方法了么称开？當然不是，這個時候可以多配置另外一條規(guī)則，總的規(guī)則如下

https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed file://{juejinList.json}
https://apinew.juejin.im/recommend_api/v1/article/recommend_all_feed resCors://{cors.json}

其中 cors.json 內(nèi)容為

origin: https://juejin.im

查看效果鳖轰，可以了

我們來看下 network 版面清酥，選中我們代理了的接口，可以看到已經(jīng)走了我們所配置的規(guī)則了

上面我們是通過精確匹配匹配到了掘金的獲取列表接口蕴侣，寫起來會很長焰轻，其實我們可以通過域名、路徑昆雀、正則辱志、精確匹配、通配符匹配等方式去匹配的狞膘，比如如下的規(guī)則也是可以的

/v1/article/recommend_all_feed/i file://{juejinList.json}
/v1/article/recommend_all_feed/i resCors://{cors.json}

基礎的使用就是這么簡單揩懒，這里我們就解決了 Mock 數(shù)據(jù)以及跨域的問題，當然客冈，這只是 whistle 一個很小的功能旭从，接下來才是重頭戲

常用技能

解決跨域問題

可以通過 reqCors 修改請求的 CORS。也可以通過 resCors 修改返回的 CORS 场仲。從而達到解決跨域的效果和悦。上面的例子已經(jīng)演示過，這里不再重復

Mock 數(shù)據(jù)

通過上面提到的 file:// 協(xié)議渠缕，我們就可以 Mock 數(shù)據(jù)鸽素，當然你如果不想使用 Values 中的值，也可以使用本地的文件亦鳞，類似如下的配置：

# 注意是絕對路徑
/v1/article/recommend_all_feed/i file:///Users/gpingfeng/Documents/Personal/Test/juejinList.json

模擬 JSONP 返回

如果是 JSONP馍忽，我們要怎么 Mock 呢？這里我們用到了 tpl 協(xié)議燕差，tpl 協(xié)議基本功能跟 file 協(xié)議一樣一樣可以做本地替換遭笋，但 tpl 內(nèi)置了一個簡單的模板引擎，可以把文件內(nèi)容里面 {name} 替換請求參數(shù)對應的字段(如果不存在對應的自動則不會進行替換)徒探，一般可用于 mock jsonp 的請求

這里我們拿京東首頁的一個獲取輪播圖的接口作為演示瓦呼。我們可以看到 URL 中指定的回調(diào)函數(shù)的 key 為 callback，這個很重要测暗，在配置 Values 的時候會用到

我們配置規(guī)則央串，修改返回為了路飛的圖片

/floor.jd.com/recommend-v20/focus_monetize/i tpl://{jsonp.json}

其中 jsonp.json 中的格式為

// callback 是根據(jù)上面 JSONP 請求中發(fā)送出去的回調(diào)函數(shù)決定的
{callback}({
// 這里是返回的 JSON，這里我就是替換了返回的圖片而已
})

看結(jié)果碗啄，生效了

綁定 Host

一提到綁定 Host质和，我們會想起使用 Switch Host 切換，但使用 whistle 可以更加方便和強大稚字，不僅支持傳統(tǒng)的 Host配置饲宿，還支持子路徑和端口的 Host 轉(zhuǎn)發(fā)配置厦酬，我們可以將我們的環(huán)境放在不同的規(guī)則中，隨時切換瘫想，而且無緩存弃锐，切換時候生效更快

本地代碼，調(diào)試線上問題

有時候殿托，我們遇到線上的問題，卻因為數(shù)據(jù)問題剧蚣，沒有辦法在本地復現(xiàn)支竹。一般我們項目 api 的 url 都會設計帶上后綴，利用這個鸠按，我們可以配置如下的規(guī)則礼搁，輕松調(diào)試線上的問題

# 接口走線上
^example.com/api/*** https://example.com/$1
# 訪問走本地
^example.com/*** http://127.0.0.1:8120/$1

往 HTML 中插入腳本 JS

jsAppend 協(xié)議往 content-type 為 html 或 js 的響應內(nèi)容后面追加數(shù)據(jù)，如果是 html目尖，則會自動加上 script 標簽在追加到響應內(nèi)容馒吴，如果是 js，則會自動追加到js文本后面

配置一個規(guī)則：

/https://juejin.im/frontend/i jsAppend://{myJS}

查看源碼瑟曲，可以看到已經(jīng)自動加上 script 標簽在追加到響應內(nèi)容

往 HTML 中插入樣式

cssAppend 往 content-type 為 html 或 css 的響應內(nèi)容后面追加數(shù)據(jù)饮戳，如果是 html，則會自動加上 style 標簽在追加到響應內(nèi)容洞拨，如果是css扯罐，則會自動追加到文本后面

我們給掘金網(wǎng)頁版加上暗黑模式吧，以下是 CSS

html {
    filter: invert(1) hue-rotate(180deg);
}

我們配置規(guī)則烦衣，插入到掘金中

/https://juejin.im/frontend/i cssAppend://{myCSS}

暗黑版掘金

源碼中也有了相關(guān)的 CSS 樣式

以上插入 HTML 和 CSS 的動圖如下

修改 cookie

開發(fā)中歹河，我們很多時候，需要設置請求頭或者響應頭的 cookie花吟，這個時候秸歧，我們就需要用到 reqCookies 和 resCookies。它們的功能分別是修改請求頭的 Cookie 和修改響應頭的 Set-Cookie

/apinew.juejin.im/interact_api/i reqCookies://{reqcookie}
/apinew.juejin.im/interact_api/i resCookies://{resCookies.json}

reqcookie 內(nèi)容如下：

name: 'Gopal'
like: 'FE'

效果如下：

resCookies.json 的內(nèi)容如下

{
    "name": "Feng",
    "age": "26",
    "happy": {
        "value": "FE",
        "maxAge": 60,
        "httpOnly": true,
        "path": "/",
        "secure": true
    }
}

效果如下：

真正的殺手锏——移動端調(diào)試

相比于 PC 端衅澈，在移動端調(diào)試網(wǎng)頁键菱，主要會遇到以下兩個問題：

沒有 Console，無法查看頁面的js錯誤及通過 console.xxx 輸出的調(diào)試日志
無法查看矾麻、修改頁面的 DOM 結(jié)構(gòu)及樣式

雖然很多移動端頁面纱耻，我們可以在 Chrome 的模擬器中進行調(diào)試，但不是所有的移動端頁面都可以在 PC 端調(diào)試和復現(xiàn)問題险耀。往往 APP 中嵌入的頁面弄喘，在不同的機器中會遇到兼容性問題，需要在真機中才能看到效果【復現(xiàn)問題】甩牺，這個時候就需要我們的 whistle 登場了

移動端捕獲頁面錯誤和 log

移動端蘑志，我們查看報錯信息也是比較麻煩的，為此，whistle 提供了 log 功能如下：

https://juejin.im/frontend log://{test.js}

test.js 主要是模擬腳本報錯急但，內(nèi)容如下：

console.error({ error: true });
console.warn({ error: true, warn: { test: true } });
console.log(123456);
// 模擬拋出異常
console.notAFunction('test');

在 Network —— Tools 下面就可以看到報錯等日志了

查看移動端頁面的 DOM 樣式

移動端的 DOM 樣式查看和調(diào)試對于我們來講也是一個比較頭疼的事情澎媒，whistle 就能夠做到輕松查看調(diào)試移動端的 DOM 樣式

https://juejin.im/frontend weinre://test

使用插件——利用whistle注入vConsole

vConsole 是微信團隊開發(fā)的輕量、可拓展波桩、針對手機網(wǎng)頁的前端開發(fā)者調(diào)試面板戒努，主要原理是通過在頁面注入 js 實現(xiàn)模擬 PC 瀏覽器的 Console 功能

因為官方?jīng)]有提供，所以我們這里使用插件镐躲，順便介紹下插件的用法（每個插件的用法不同储玫，大家舉一反三）

安裝：

npm i -g whistle.inspect

安裝成功后，可以在 Plugins 頁面中看到

安裝插件后萤皂，只需配置簡單的規(guī)則即可隨意切換 vConsole 和 eruda撒穷，這里我們只演示 vConsole

配置規(guī)則：

/juejin.im/i whistle.inspect://vConsole

插件開發(fā)

上面提到了插件的使用，為了滿足一些特定業(yè)務場景的需要裆熙，whistle 提供了插件擴展能力端礼，通過插件可以新增 whistle 的協(xié)議實現(xiàn)更復雜的操作、也可以用來存儲或監(jiān)控指定請求入录、集成業(yè)務本地開發(fā)調(diào)試環(huán)境等等蛤奥，基本上可以做任何你想做的事情，且開發(fā)纷跛、發(fā)布及安裝 whistle 插件也都很簡單喻括。

whistle 的插件是一個獨立運行的進程，這樣是為了確保插件不會影響到 whistle 主進程的穩(wěn)定性贫奠，并通過暴露一些 http server 的方式實現(xiàn)與 whistle 的交互唬血，whistle 會在特定階段請求特定的 server，具體看下面的原理圖：

whistle 實現(xiàn)原理圖

從上面幾個圖可以知唤崭，whistle 插件會設計以下7種 server拷恨，也就是有7種強大的功能

statsServer：統(tǒng)計請求信息的服務
resStatsServer：統(tǒng)計響應信息的服務
rulesServer：設置請求規(guī)則的服務(支持 http/https/websocket 請求)
resRulesServer：設置響應規(guī)則的服務(支持 http/https/websocket 請求)
tunnelRulesServer：設置 tunnel 請求規(guī)則的服務
server：whistle 會把指定請求轉(zhuǎn)發(fā)到該 server
uiServer: whistle 插件的界面，可以通過特定的 url 訪問

結(jié)束語

whistle 作為一個強大的工具谢肾，我給大家介紹的只是其中一部分知識腕侄，但我堅信其中能夠解決大家 80% 的問題了，更多的使用技巧芦疏，大家可以看官方文檔冕杠，去探索吧