共計 5780 個字符，預計需要花費 15 分鐘才能閱讀完成。
這篇文章給大家介紹跨平臺 web 調試工具 whistle 怎么用，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
whistle 是基于 Node 實現(xiàn)的跨平臺 web 調試代理工具，類似的工具有 Windows 平臺上的 Fiddler+Willow，基于 Java 實現(xiàn)的 Charles，及公司同事基于 Node 實現(xiàn)的 Livepool 等等；whistle 與所有的 web 調試代理工具一樣，主要功能也是用于查看、修改 HTTP、HTTPS、Websockt 的請求響應或者作為 HTTP 代理服務器，但不同于 Fildder+Willow、Charles 和 Livepool 通過斷點的方式修改請求響應，whistle 采用的是類似配置 Hosts 方式，通過配置修改請求響應，且提供規(guī)則分組功能及通過域名、路徑、正則三種匹配方式 (系統(tǒng)的 hosts 配置只支持域名匹配)，特別針對終端調試提供了 weinre，log 等功能，并支持通過 Node 模塊進行擴展。
基本功能
Github 地址
安裝啟動
安裝啟動 whistle，需要以下四個步驟：安裝 node、安裝 whistle、啟動 whistle、配置代理。
安裝 Node(建議安裝最新版本，LTS 版本或當前版本都可以，如果已安裝可以忽略此步驟)：https://nodejs.org/
安裝 tnpm()：
npm install @tencent/tnpm -g --registry=http://r.tnpm.oa.com --no-proxy
# Mac、Linux 用戶可能需要加 sudo
sudo npm install @tencent/tnpm -g --registry=http://r.tnpm.oa.com --no-proxy安裝 whistle 及在公司網(wǎng)絡訪問外網(wǎng)需要用到的插件 txpac 插件：
tnpm install -g whistle @tencent/whistle.txpac
# Mac、Linux 用戶可能需要加 sudo
sudo tnpm install -g whistle @tencent/whistle.txpac 啟動 whistle
w2 start
whistle 默認端口為 8899，如果要修改端口號，可以這么啟動：
w2 start -p 8888
重啟 whistle：
w2 restart
關閉 whistle：
w2 stop
更多內容請查看命令行幫助：
w2 help
配置代理
whistle 需要手動配置瀏覽器代理或者系統(tǒng)代理 (代理的 ip 為 whistle 所在機器的 ip，如果是本機就填 127.0.0.1；端口號為啟動時設置的端口號，默認為 8899):
配置瀏覽器代理 (推薦使用):
安裝 chrome 代理插件：whistle-for-chrome 插件 或者 Proxy SwitchySharp
安裝 firefox 代理插件：Proxy Selector
配置系統(tǒng)代理：
1) Windows
2) Mac
使用方法
安裝 node、安裝 whistle、啟動 whistle、配置代理后可以開始使用 whistle，用 Chrome 瀏覽器打開 whistle 配置管理頁面
界面相關操作參見界面功能;
配置模式
傳統(tǒng) hosts 的配置模式：
# 單個 host
ip hostname
# 組合 host
ip hostname1 hostname2 ... hostnameN
# 例如
127.0.0.1 www.example.com
127.0.0.1 a.example.com b.example.com c.example.comwhistle 的配置模式：
# 單個操作
pattern operator-uri
# 如果 pattern 和 operator-uri 不同時為域名或路徑的一種組合，位置可以調換
operator-uri pattern
# 組合模式
pattern operator-uri1 operator-uri2 ... operator-uriN
# pattern1 和 operator-uri 不同時為域名或路徑的一種組合，可以如下配置
operator-uri pattern1 pattern2 ... patternN其中，pattern 可以為：
域名：www.test.com(所有該域名下的請求都會匹配 operator-uri)
路徑：http://www.test.com/xxx(http://www.test.com/xxx 及其子路徑的請求都會匹配 operator-uri)，或不加協(xié)議 protocol://www.test.com/xxx，protocol 可以為 http、https、ws、wss(http://www.test.com/xxx 及其子路徑的請求都會匹配 operator-uri)
正則:/^https?:\/\/([^\/]+)\/xxx/(http(s)://host:port/xxx 及其子路徑的請求都會匹配 operator-uri，且在 operator-uri 中可以通過 $1, $2, …, $9 獲取 url 里面的子匹配 )
operator-uri 由上述基本功能抽象成的形如 protocol://ruleValue 的 URI，whistle 會根據(jù)匹配的 operator-uri 的 protocol 及 ruleValue 修改請求或響應，protocol 和 ruleValue 的詳細內容參見 whistle 幫助文檔及協(xié)議列表。
例如：
# 修改 www.example.com 的響應 cors
www.example.com resCors://*
# 或
resCors://* www.example.com
# 同時修改多個自定域名或路徑
resCors://* /example\.com/ a.test.com b.test.com
# 修改 www.test.com 的帶端口 host、referer 和響應的 cors
www.test.com 127.0.0.1:8080 referer://http://www.example.com resCors://*一些例子
攔截 HTTPS
不開啟攔截 HTTPS，無法在 whistle 看到 HTTPS 和 Websockt 請求響應的明文，且只能通過 whistle 對 HTTPS 和 Websockt 設置 host、代理等有限的操作，要通過 whistle 完全操作 HTTPS、Websocket 請求響應，需要開啟 HTTPS 攔截及在系統(tǒng)或瀏覽器安裝 whistle 的根證書，具體參見：https://avwo.github.io/whistle/webui/https.html
配置 host
# 傳統(tǒng) hosts 配置
127.0.0.1 www.example.com # 等價于： www.example.com 127.0.0.1
127.0.0.1 a.example.com b.example.com c.example.com
# 支持帶端口
127.0.0.1:8080 www.example.com # 等價于： www.example.com 127.0.0.1：8080
127.0.0.1:8080 a.example.com b.example.com c.example.com
# 支持通過域名獲取 host
host://www.qq.com:8080 www.example.com # 等價于： www.example.com host://www.qq.com:8080
host://www.qq.com:8080 a.example.com b.example.com c.example.com
# 支持通過正則表達式匹配
127.0.0.1:8080 /example\.com/i # 等價于： /example\.com/i 127.0.0.1：8080
127.0.0.1:8080 /example\.com/ /test\.com/
# 支持路徑匹配
127.0.0.1:8080 example.com/test # 等價于： example.com/test 127.0.0.1：8080
127.0.0.1:8080 http://example.com/index.html https://www.test.com/test完整功能參見協(xié)議列表。
修改請求
以下功能都支持通過域名、路徑、正則匹配方式，為方便只以域名匹配方式為例，其它同理：
# 修改 url 參數(shù)
www.qq.com urlParams://E:\test\params.json
# 請求方法
www.qq.com method://post
# 添加請求頭
www.qq.com reqHeaders://(x-a=1 x-b=a%20b)
# 修改 referer(修改 referer 快捷方法)
www.qq.com referer://http://ke.qq.com/
# 修改 cookie(修改請求 cookie 快捷方法)
www.qq.com reqCookie://{reqCookie.json}
# 修改請求表單
www.qq.com params://{form.json}JSON 對象可以存在本地文件，或存在界面的 Values，也可以內聯(lián)到 Rules 配置里面，具體參見實現(xiàn)原理、數(shù)據(jù)格式。
完整功能參見協(xié)議列表。
修改響應
以下功能都支持通過域名、路徑、正則匹配方式，為方便只以域名匹配方式為例，其它同理：
# 修改響應狀態(tài)碼
www.qq.com statusCode://500 # 請求不會發(fā)送到后臺服務器，可以用來模擬 4xx、5xx 請求
www.qq.com replaceStatus://404 # 請求返回后再修改 statusCode
# 添加響應頭
www.qq.com resHeaders://(x-res-a=1 x-res-b=a%20b)
# 修改響應類型 (修改響應類型的快捷方法)
www.qq.com resType://text/plain # 或者： www.qq.com resType://text
# 請求替換
www.qq.com https://www.baidu.com
# 本地替換 (windows 中目錄分割符可以用 `\`，也可以用 `/`)
www.qq.com file://E:\xxx # 等價于： file://E:/xxx www.qq.com
# Mac 或 Linux
www.qq.com file:///User/xxx/test
# 如果要讓本地沒有對應文件的請求繼續(xù)請求線上，可以采用
www.qq.com xfile://E:\xxx
# 本地替換 jsonp
www.qq.com tpl://E:\xxx.json # xxx.json: {callback}({ec : 0})
www.qq.com xtpl://E:\xxx.json # xxx.json: {callback}({ec : 0})
# 注入 html、css、js(whistle 會自動根據(jù)響應類型封裝后注入)
www.qq.com html://htmlFile
www.qq.com css://cssFile
www.qq.com js://jsFileJSON 對象或注入的文本可以存在本地文件，或存在界面的 Values，也可以內聯(lián)到 Rules 配置里面，
設置代理
以下功能都支持通過域名、路徑、正則匹配方式，為方便只以域名匹配方式為例，其它同理：
# http 代理
www.qq.com proxy://127.0.0.1:8888 # 等價于： proxy://127.0.0.1:8888 www.qq.com
# 同時設置多個
proxy://127.0.0.1:8888 www.qq.com /google/ /facebook/
# socks 代理
www.qq.com scoks://127.0.0.1:1008 # 等價于： socks://127.0.0.1:8888 www.qq.com
# 同時設置多個
socks://127.0.0.1:1008 www.qq.com /google/ /facebook/
# pac 腳本
# 設置辦公網(wǎng) pac 腳本 (如果安裝了 whistle.txpac，則無需設置)
/./ pac://http://txp-01.tencent.com/proxy.pac
# 設置辦公網(wǎng) pac 腳本 (如果安裝了 whistle.txpac，則無需設置)
/./ pac://http://txp-01.tencent.com/proxy_devnet.pac完整功能參見協(xié)議列表。
移動端調試
打開 whistle 配置界面右上角的 Online 按鈕獲取當前 whistle 的 ip 和端口，移動設備根據(jù)相應的 ip 和端口配置代理 (確保移動設備和 PC 要在同一網(wǎng)段)；配置完后如果還是無法訪問，可能需要關閉防火墻或者設置白名單。
# weinre(調試網(wǎng)頁 DOM 結構)
www.qq.com weinre://test
# log(輸出網(wǎng)頁 console 打印的日志)
www.qq.com log://{test.js}具體參見：weinre、log
完整功能參見協(xié)議列表。
其它功能
以下功能都支持通過域名、路徑、正則匹配方式，為方便只以域名匹配方式為例，其它同理：
# 禁用緩存
www.qq.com disable://cache
# 忽略規(guī)則
www.qq.com filter://rule|host|https完整功能參見協(xié)議列表。
插件擴展及應用
whistle 支持通過 Node 模塊的方式擴展功能，具體參見：插件開發(fā)。
插件的一些應用：
HTTP 代理服務器功能：imweb 本地代理 imwebproxy(里面的 Pb 和 CMEM 的功能分別對應兩個 whistle 插件 whistle.imwebproxy、whistle.cmem)
擴展協(xié)議功能：imweb 前端本地調試環(huán)境 whistle.imwebenv
擴展界面功能：whistle.websocket
關于跨平臺 web 調試工具 whistle 怎么用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
