whistle學習（一）之安裝、使用、軟件功能了解

本文轉載自查看原文 2019-11-08 11:43 1400 調試方法/ 環境配置/ whistle

前言

whistle是基於Node實現的跨平台抓包調試代理工具，有以下基本功能：

查看HTTP、HTTPS請求響應內容
查看WebSocket、Socket收發的幀數據
設置請求hosts、上游http/socks代理
修改請求url、方法、頭部、內容
修改響應狀態碼、頭部、內容，並支持本地替換
修改WebSocket或Socket收發的幀數據
內置調試移動端頁面的weinre和log
作為HTTP代理或反向代理
支持用Node編寫插件擴展功能

具體功能如下：

一、安裝啟動

1、whistle安裝過程需要以下步驟（缺一不可）

安裝Node

點擊nodejs.org，其實安裝node是為了安裝npm

安裝whistle，如果提示沒有權限，要以 admin 或 sudo 的方式運行

 npm install whistle -g // 安裝whistle

啟動whistle

w2 start -p 8899（// 不設置端口默認使用8899）

配置代理

在 whistle 啟動完成后，我們需要將瀏覽器的請求代理到 whistle，這樣 whistle 才能處理瀏覽器發出的請求。代理服務器，如果在本地則為127.0.0.1，如果部署在遠程服務器或者虛擬機上，就改成對應IP即可。

安裝根證書

2、啟動whistle詳細說明

1、使用您的設備訪問以下URL列表，獲取您可以訪問的URL的IP

2、將您的設備配置為使用whistle作為IP:8899上的HTTP和HTTPS代理

3、使用Chrome訪問http://local.whistlejs.com/來開始

3、配置代理詳細說明

說明一：配置方法

方法一：直接配置系統代理

window：Windows
mac：Mac

方法二：安裝瀏覽器代理插件，推薦方式

Chrome插件：SwitchyOmega
Firefox插件： ProxySelector

方法三：移動端需要配置當前WIFI的代理

說明二：直接配置系統代理

填寫我們選擇的IP和端口

說明三：SwitchyOmega 安裝與配置

【抓取pc端http請求】

1、訪問這個鏈接，點擊“添加至 CHROME”，點擊彈框“添加擴展程序”，如果被牆了訪問不了，可以點這里選擇 SwitchyOmega_Chromium.crx 下載，下載后在瀏覽器地址欄輸入 chrome://extensions/，回車打開頁面，將下載的文件拖動到 extensions 那個頁面，點擊安裝擴展即可。

2、頁面會自動跳轉到 SwitchyOmega 的配置頁，點擊“跳過教程”或觀看教程

3、點擊左側“新建情景模式…”，彈框提示“情景模式名稱”，你可以輸入“whistle”

4、點“創建”按鈕

5、代理服務器 -> 代理協議，這個下拉選擇框選擇 HTTP，將 example.com 改為 127.0.0.1，將 80 改為 8899

6、“不代理的地址列表” 的輸入框里的所有文本都刪掉，因為里面的 host 在本地開發很大概率會用到

7、點擊左側“應用選項”

8、點擊 chrome 右上角的圓圈圖標，切換成 whistle

9、瀏覽器輸入 local.whistlejs.com，回車，能打開 whistle 的界面，說明 SwitchyOmega 的配置 ok

這樣就可以抓取pc端的包了！

4、安裝根證書詳細說明

抓取 https 請求需要安裝證書，官網文檔已經很詳細了

安裝根證書RootCA

1、下載根證書

2、安裝根證書

【抓取pc端https請求】

在抓取到的請求中點一個 https 請求並點上面的 https 按鈕會彈出一個二維碼，點下載證書下載后打開鑰匙串。

添加后點箭頭的證書會篩選出 whistle 證書，點開證書選擇始終信任該證書。

這樣就可以抓 https 的包了。

安裝了某台電腦的 whistle 證書，換另一台，還需要繼續安裝另一台電腦的 whistle 證書！

【抓取移動端http請求】

手機和電腦連接同一網絡
在手機上配置代理，手機的網絡里，找到鏈接的wifi，添加代理，將手機的服務器和端口設置為電腦ip和whistle的代理端口（8899）

pc上打來whistle web頁面瀏覽器訪問： http://127.0.0.1:8899
手機發請求，就可以在whistle 的web頁面上看到抓到的包

1）獲取Mac IP

Charles學習（一）之macOS Charles 4.x版本的安裝、激活、使用以及軟件功能了解中有提到兩種方法

也可以通過whistle獲取，點擊 whistle 界面右上角的 Online

【抓取移動端https請求】

安裝證書，不安裝證書的話，是沒辦法抓取到https請求的內容的，一般的請求頭還是有，但是內容是空的。
rootCA.crt 之所以能下載，是 whistle 做了代理，所以移動端安裝證書時要先連上 whistle 的代理才能安裝
代理之后點擊whistle web端的https按鈕，手機掃描二維碼，下載安裝證書。然后再請求，就可以抓取到https了

二、whistle 的常用配置

通過w2 start啟動后，訪問給出的鏈接（http://127.0.0.1:8899/#rules/http://10.12.162.2:8899/#rules）即可打開whistle界面。

1、配置host

我們可以為某個域名或具體的 url 指定 ip，繞過 dns 解析，讓請求直接到達指定的 ip。通常在工作中，開發、測試和預發布境的切換都通過切換 host 來實現，這樣訪問不同的環境不需要改變代碼，或根據環境配置文件訪問不同的 url。

以下是常用的配 host 方法:

將 qq.com 映射到 127.0.0.1，你訪問 www.qq.com/ 時，請求的是本地的 127.0.0.1

127.0.0.1 qq.com

也可以把端口帶上

127.0.0.1:3000 qq.com

甚至可以將指定的路徑映射到某個 ip 和端口

127.0.0.1:3000 https://www.qq.com/a/b/c

當然，把規則反過來寫也是生效的

https://www.qq.com/a/b/c 127.0.0.1:3000

有一個技巧就是在 “Rules” 界面下，可配多套 host 配置，比如 dev、gamma 等滿足開發需求。

2、重定向

將 baidu.com 重定向到 qq.com

https://www.baidu.com/ redirect://https://www.qq.com/

此規則在移動端調試時有個場景特別有用：比如想在某個 APP 里打開一個的網頁，但是該 APP 沒有一個 url 輸入框，我們可以隨機地點擊這個 app 的信息流，如果捕獲到有頁面請求，重定向為我們的 url 即可。

3、修改返回體

該功能在后端接口掛了或者沒有開發好的時候，可以模擬返回假數據，讓前端調試可以不依賴后端

將 getUserList 這個請求的返回替換成本地的 userList.json 文件，如果覺得文件放在磁盤里寫路徑麻煩，可以放在 whistle 自帶的 Values 里，那么上面的規則就更簡潔了：

http://example.com/api/getUserList file://{userList.json}

創建的文件盡量帶文件后綴，有語法高亮，另外如果不是 .json 結尾，whistle 不會在 Response Headers 里自動添加 content-type: application/json; charset=utf-8，那么一些請求庫就拿不到正確的返回。

4、替換線上文件

如果有正式環境 bug，可以將 js 替換成本地文件或文件夾，提高調試效率。

http://example.com/cdn/example.js file://D:/path/to/your/file/example.js

5、替換請求 url

http://qq.com/a/b?c=d http://qq.com/v/w?x=y&z=z

注意：這個規則的修改在瀏覽器的 network 里體現不出來，因為請求已經發出去，到 whistle 層才被修改的，我們可以在 whistle 的 Network 右側里看到 Real Url

6、修改返回碼

通過修改返回碼，可以模擬接口出錯

https://www.qq.com statusCode://500

7、修改請求、響應的 header

Web 開發有時會遇到請求 header 設置不對帶來的一些問題，如果問題出現在正式環境，我們可以通過修改請求 header （比如修改 Cookie、user-agent、Content-Type 等）來模擬修復，等確認問題后，再修改代碼，提高效率。

https://www.qq.com reqHeaders://{loginCookie}

同樣，我們可以通過 resHeaders 來修改響應頭，上文提到我們可以通過 file://{userList.json} 來模擬假數據，但這么做可能導致一些跨域的 header 丟失，對此，我們可以通過 resHeaders 加上跨域相關 header

https://www.qq.com/some/ajax resHeaders://{CORSHeaders}

Values 中的 CORSHeaders 值為

Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, token
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
content-type: application/json
status: 200

8、插入 js + 引入vConsole

我們可以在不修改頁面代碼的情況下，通過 whistle 往頁面插入 js，比如我們插入一個使頁面刷新的 js:

https://www.google.com jsPrepend://{reload.js}

更有用的，是往頁面中插入調試相關的 js，比如 vConsole.js，我們當然可以到 github 上將 vConsole.min.js 下載到本地，或放在 Values 中，然后把初始化代碼也加上，最后將 vConsole.js 注入到頁面來 debug。不過，whistle 提供了更方便的插件:

sudo npm install whistle.inspect -g

https://www.google.com whistle.inspect://