whistle--全新的跨平台web調試工具

標籤：exp   ams   article   callback   參數   抽象   www   ace   著作權   

著作權聲明：本文由吳文斌原創文章，轉載請註明出處: 
文章原文連結：https://www.qcloud.com/community/article/151

來源：騰雲閣 https://www.qcloud.com/community

 

whistle是基於Node實現的跨平台web調試代理工具，類似的工具有Windows平台上的Fiddler+Willow，基於Java實現的Charles，及公司同事基於Node實現的Livepool等等；whistle與所有的web調試代理工具一樣，主要功能也是用於查看、修改HTTP、HTTPS、Websockt的請求響應或者作為HTTPProxy 伺服器，但不同於Fildder+Willow、Charles和Livepool通過斷點的方式修改請求響應，whistle採用的是類似配置Hosts方式，通過配置修改請求響應，且提供規則分組功能及通過網域名稱、路徑、正則三種匹配方式(系統的hosts配置只支援網域名稱匹配)，特別針對終端調試提供了weinre，log等功能，並支援通過Node模組進行擴充。

準系統

Github地址

安裝啟動

安裝啟動whistle，需要以下四個步驟： 安裝node、安裝whistle、啟動whistle、配置代理。

1. 安裝Node(建議安裝最新版本，LTS版本或目前的版本都可以，如果已安裝可以忽略此步驟)：https://nodejs.org/
   安裝tnpm()：

   npm install @tencent/tnpm -g --registry=http://r.tnpm.oa.com --no-proxy# Mac、Linux使用者可能需要加sudosudo npm install @tencent/tnpm -g --registry=http://r.tnpm.oa.com --no-proxy

2. 安裝whistle及在公司網路訪問外網需要用到的外掛程式txpac外掛程式：

   tnpm install -g whistle @tencent/whistle.txpac# Mac、Linux使用者可能需要加sudosudo tnpm install -g whistle @tencent/whistle.txpac

3. 啟動whistle
   w2 start
   whistle預設連接埠為8899，如果要修改連接埠號碼，可以這麼啟動：
   w2 start -p 8888
   重啟whistle：
   w2 restart
   關閉whistle：
   w2 stop
   更多內容請查看命令列協助：
   w2 help

4. 配置代理
   whistle需要手動設定瀏覽器代理或者系統代理程式(代理的ip為whistle所在機器的ip，如果是本機就填127.0.0.1；連接埠號碼為啟動時設定的連接埠號碼，預設為8899):

   • 配置瀏覽器代理(推薦使用):
     安裝chrome代理外掛程式： whistle-for-chrome外掛程式 或者 Proxy SwitchySharp
     安裝firefox代理外掛程式： Proxy Selector

   • 配置系統代理程式：
     1) Windows
     2) Mac

使用方法

安裝node、安裝whistle、啟動whistle、配置代理後可以開始使用whistle，用Chrome瀏覽器開啟whistle組態管理頁面

介面相關操作參見介面功能;

配置模式

傳統hosts的配置模式：

# 單個hostip hostname# 組合hostip hostname1 hostname2 ... hostnameN# 例如127.0.0.1 www.example.com127.0.0.1 a.example.com b.example.com c.example.com

whistle的配置模式：

# 單個操作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可以為：

1. 網域名稱：www.test.com(所有該網域名稱下的請求都會匹配operator-uri)
2. 路徑：http://www.test.com/xxx(http://www.test.com/xxx 及其子路徑的請求都會匹配operator-uri)，或不加協議protocol://www.test.com/xxx，protocol可以為http、https、ws、wss(http://www.test.com/xxx及其子路徑的請求都會匹配operator-uri)
3. 正則:/^https?:\/\/([^\/]+)\/xxx/(http(s)://host:port/xxx及其子路徑的請求都會匹配operator-uri，且在operator-uri中可以通過$1, $2, ..., $9擷取url裡面的子匹配)

operator-uri由上述準系統抽象成的形如protocol://ruleValue的URI，whistle會根據匹配的operator-uri的protocol及ruleValue修改請求或響應，protocol和ruleValue的詳細內容參見whistle協助文檔及協議列表。

例如：

# 修改www.example.com的響應corswww.example.com resCors://*# 或resCors://* www.example.com# 同時修改多個自定網域名稱或路徑resCors://* /example\.com/ a.test.com b.test.com# 修改www.test.com的帶連接埠host、referer和響應的corswww.test.com 127.0.0.1:8080 referer://http://www.example.com resCors://*

一些例子

1. 攔截HTTPS

   不開啟攔截HTTPS，無法在whistle看到HTTPS和Websockt請求響應的明文，且只能通過whistle對HTTPS和Websockt設定host、代理等有限的操作，要通過whistle完全操作HTTPS、Websocket請求響應，需要開啟HTTPS攔截及在系統或瀏覽器安裝whistle的根憑證，具體參見：https://avwo.github.io/whistle/webui/https.html

2. 配置host

   # 傳統hosts配置127.0.0.1 www.example.com # 等價於： www.example.com  127.0.0.1127.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：8080127.0.0.1:8080 a.example.com b.example.com c.example.com# 支援通過網域名稱擷取hosthost://www.qq.com:8080 www.example.com # 等價於： www.example.com  host://www.qq.com:8080host://www.qq.com:8080 a.example.com b.example.com c.example.com# 支援通過Regex匹配127.0.0.1:8080 /example\.com/i # 等價於： /example\.com/i  127.0.0.1：8080127.0.0.1:8080 /example\.com/ /test\.com/# 支援路徑匹配127.0.0.1:8080 example.com/test # 等價於： example.com/test 127.0.0.1：8080127.0.0.1:8080 http://example.com/index.html https://www.test.com/test

   完整功能參見協議列表。

3. 修改請求

   以下功能都支援通過網域名稱、路徑、正則匹配方式，為方便只以網域名稱匹配方式為例，其它同理：

   # 修改url參數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，也可以內聯到Rules配置裡面，具體參見實現原理、資料格式。
   完整功能參見協議列表。

4. 修改響應

   以下功能都支援通過網域名稱、路徑、正則匹配方式，為方便只以網域名稱匹配方式為例，其它同理：

   # 修改響應狀態代碼www.qq.com statusCode://500 # 請求不會發送到後台伺服器，可以用來類比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或Linuxwww.qq.com file:///User/xxx/test# 如果要讓本地沒有對應檔案的請求繼續請求線上，可以採用www.qq.com xfile://E:\xxx# 本地替換jsonpwww.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會自動根據響應類型封裝後注入)www.qq.com html://htmlFilewww.qq.com css://cssFilewww.qq.com js://jsFile

   JSON對象或注入的文本可以存在本地檔案，或存在介面的Values，也可以內聯到Rules配置裡面，

5. 設定代理

   以下功能都支援通過網域名稱、路徑、正則匹配方式，為方便只以網域名稱匹配方式為例，其它同理：

   # 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指令碼# 設定辦公網pac指令碼(如果安裝了whistle.txpac，則無需設定)/./ pac://http://txp-01.tencent.com/proxy.pac# 設定辦公網pac指令碼(如果安裝了whistle.txpac，則無需設定)/./ pac://http://txp-01.tencent.com/proxy_devnet.pac

   完整功能參見協議列表。

6. 移動端調試

   開啟whistle配置介面右上方的Online按鈕擷取當前whistle的ip和連接埠，行動裝置根據相應的ip和連接埠配置代理(確保行動裝置和PC要在同一網段)；配置完後如果還是無法訪問，可能需要關閉防火牆或者設定白名單。

   # weinre(調試網頁DOM結構)www.qq.com weinre://test# log(輸出網頁console列印的日誌)www.qq.com log://{test.js}

   具體參見：weinre、log

   完整功能參見協議列表。

7. 其它功能

   以下功能都支援通過網域名稱、路徑、正則匹配方式，為方便只以網域名稱匹配方式為例，其它同理：

   # 禁用緩衝www.qq.com disable://cache# 忽略規則www.qq.com filter://rule|host|https

   完整功能參見協議列表。

外掛程式擴充及應用

whistle支援通過Node模組的方式擴充功能，具體參見：外掛程式開發。

外掛程式的一些應用：

1. HTTPProxy 伺服器功能：imweb本地代理imwebproxy(裡面的Pb和CMEM的功能分別對應兩個whistle外掛程式whistle.imwebproxy、whistle.cmem)
2. 擴充協議功能：imweb前端本地調試環境whistle.imwebenv
3. 擴充介面功能：whistle.websocket

使用者反饋

有問題可以先查whistle協助文檔；

如果還是無法解決或者有建議、貢獻代碼等可以使用下面任一種方式：

最後，如果whistle對你有協助，給項目加個Star： https://github.com/avwo/whistle

 

whistle--全新的跨平台web調試工具