摘要：所有域名下的請求，都會根據響應類型，將處理好的文本注入到響應內容里面，如是請求，和會分別自動加上和標簽后追加到內容后面。查看請求響應的詳細信息及請求列表的，還有請求匹配到的規則用來重發請求構造請求，可以自定義請求的請求方法請求頭請求內容。

真機聯調常用方式和強大的Fiddler
whistle真機調試

之前發表過一篇文件關于真機調試的幾種方式,但是都各自有些不便的地方,最近發現一個不錯的工具就補充上來了

whistle(讀音[?w?s?l]，拼音[wēisǒu])是基于Node實現的跨平臺抓包調試代理工具，有以下基本功能：

查看HTTP、HTTPS請求響應內容

查看WebSocket、Socket收發的幀數據

設置請求hosts、上游http/socks代理

修改請求url、方法、頭部、內容

修改響應狀態碼、頭部、內容，并支持本地替換

修改WebSocket或Socket收發的幀數據

內置調試移動端頁面的weinre和log

作為HTTP代理或反向代理

支持用Node編寫插件擴展功能

安裝啟動whistle，需要以下步驟： 安裝Node(我默認你們自己會裝)、安裝&啟動whistle、配置代理

yarn global add whistle
// ----------OR---------
npm install  -g  whistle

可以通過以下方式來訪問配置頁面：

域名訪問 http://local.whistlejs.com/,如果無法訪問一般是因為沒有啟動whistle或者配置代理

通過ip+端口來訪問，形式如 http://whistleServerIP:whistlePort/. e.g. http://127.0.0.1:8899

通過命令行參數 -P xxxx 自定義whistle的端口(xxxx表示要設置的端口號)，自定義端口支持上述兩種方式訪問，也支持 http://127.0.0.1:xxxx

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

[i] whistle@1.14.0 started
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
       http://127.0.0.1:8899/
       http://192.168.x.xxx:8899/
       Note: If all the above URLs are unable to access, check the firewall settings
             For help see https://github.com/avwo/whistle
[i] 2. configure your device to use whistle as its HTTP and HTTPS proxy on IP:8899
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started

w2 help

啟動完成后在chorme下打開 127.0.0.1:8899 可以看到這么一個頁面：

一般沒必要進行全局代理,所以我們直接跳過

在chrome擴展應用安裝Proxy SwitchyOmega,成功之后按照如下截圖設置

然后點擊擴展程序選項,配置如下

新開Tab打開百度,然后返回127.0.0.1:8899頁面就看到已經可以抓取請求了

配置當前Wi-Fi的代理

然后再在手機通過IP+端口方式訪問http://whistleServerIP:whistlePort/

按照截圖步驟安裝即可

打開瀏覽器掃二維碼即可

手機設置代理后，Safari 地址欄輸入 rootca.pro，按提示安裝證書（或者通過 whistle 控制臺的二維碼掃碼安裝，iOS安裝根證書需要到連接遠程服務器進行驗證，需要暫時把Https攔截功能關掉）

iOS 10.3 之后需要手動信任自定義根證書，設置路徑：Settings > General > About > Certificate Trust Testings

whistle 控制臺二維碼掃碼安裝，或者瀏覽器地址欄 rootca.pro 按提示安裝

部分瀏覽器不會自動識別 ca 證書，可以通過 Android Chrome 來完成安裝

android 6.0 之后的一些app在成功安裝證書后仍然無法對https連接進行手抓包，有可能是該app沒有添加信任用戶自定義證書的權限。請確認該app是否有如下配置：

點擊頁面上方菜單欄的Create按鈕，新建一個名為test的分組，并參照下面例子輸入對應的規則配置,記得輸完之后右鍵分組保存一下規則.

默認方式

# 默認是將匹配模式寫在左邊，操作uri寫在右邊
pattern operatorURI

傳統方式

# 操作URI寫在左邊
 operatorURI pattern

組合方式

 # 傳統組合方式
 pattern operatorURI1 operatorURI2 operatorURIN

 # 如果pattern部分為路徑或域名，且operatorURI為域名或路徑
 # 這種情況下也支持一個操作對應多個pattern
 operatorURI pattern1 pattern2 patternN

指定www.test.com的ip和端口，把請求轉發到本地8899端口

www.test.com 127.0.0.1:8899
# or 127.0.0.1:8899 www.test.com

保存之后輸入新開Tab輸入地址www.test.com會重定向到127.0.0.1:8899

本地新建文本test.txt

# Mac、Linux不熟悉,不太清楚
# Windows的路徑分隔符可以用  或者 /
www.test.com file://C:	est.txt

www.test.com域名下的請求都替換成對應的www.test2.com域名

www.test.com www.test2.com

whistle會自動根據響應內容的類型，判斷是否注入相應的文本及如何注入(是否要用標簽包裹起來)。

www.test.com file://C:	est.html
www.test.com file://C:	est.js
www.test.com file://C:	est.css

所有www.test.com域名下的請求，whistle都會根據響應類型，將處理好的文本注入到響應內容里面，如是html請求，js和css會分別自動加上script和style標簽后追加到內容后面。

查看請求響應的詳細信息及請求列表的Timeline，還有請求匹配到的規則

用來重發請求、構造請求，可以自定義請求的url、請求方法、請求頭、請求內容。

可以直接復制下面的鏈接試試

https://www.baidu.com/s?ie=ut...

Create：創建規則分組

Delete：刪除分組

Edit：重命名分組

Settings

Theme：設置主題

Font size：設置字體大小

Show line number：是否顯示行數

Allow multiple choice：是否允許多選

Disable all rules：是否禁用所有規則，包括插件的規則

Disable all plugins：是否禁用插件規則

Synchronized with the system hosts：是否把配置同步到本地的hosts文件(需要root權限)

Import system hosts to Default：導入本地的hosts配置到Default分組(需要root權限，且會覆蓋原來的配置)

表示只要匹配其中一個條件的請求就不會在當前頁面的Network里面顯示，多個條件用空格或換行分割，支持以下條件： /^(m|i|h|b|c|d|H)

m:pattern：pattern為字符串或正則表達式，匹配請求方法包含該字符串(不區分大小寫)或匹配該正則的請求

i:ip：ip表示客戶端ip或正則表達式，匹配客戶端ip包含該字符串(不區分大小寫)或匹配該正則的請求

h:header：header表示請求頭rawData的某部分字符或正則表達式，匹配請求頭包含該字符串(不區分大小寫)或匹配該正則的請求

H:host：host表示Network里面的host字段，為請求的域名加端口，匹配請求host字段包含該字符串(不區分大小寫)或匹配該正則的請求

其它：正則或普通字符串，匹配請求URL包含該字符串(不區分大小寫)或匹配該正則的請求

表示如果里面設置了條件，則要匹配該條件，且不匹配 Exclude Filter 的請求才會顯示在當前頁面的Network里面，可設置的條件及分割符同 Exclude Filter。

當前whistle是否在線及查看whistle服務的基本信息

主要用于調試遠程頁面特別是移動端頁面，可以通過此功能把遠程頁面 console 打印的信息展示出來

Console 顯示頁面拋出的異?；蛲ㄟ^ console 打印的信息

Server 顯示 whistle 內部發生的異常信息

All Logs 用于切換不同頁面的 log 顯示

顯示頁面拋出信息,以百度為例

# pattern log://
m.baidu.com log://

# pattern log://filepath
m.baidu.com log://C:workproject	est	est.js

# 腳本代碼如下
# console.error({ error: true });
# console.warn({ error: true, warn: { test: true } });
# console.log(123456);

ignore：忽略指定規則

filter：過濾指定pattern，支持根據請求方法、請求頭、請求客戶端IP過濾

# 下面表示匹配pattern的同時不能為post請求且請求頭里面的cookie字段必須包含test(忽略大小寫)、url里面必須包含 cgi-bin 的請求
# 即：過濾掉匹配filter里面的請求
pattern operator1 operator2 excludeFilter://m:post includeFilter://h:cookie=test includeFilter:///cgi-bin/i

# 下面表示匹配pattern1、pattern2的請求方法為post、或請求頭里面的cookie字段不能包含類似 `uin=123123` 且url里面必須包含 cgi-bin 的請求
operator pattern1 pattern2 includeFilter://m:post excludeFilter://h:cookie=/uin=od+/i excludeFilter:///cgi-bin/i

# 下面表示匹配pattern的請求忽略除了host以外的所有規則
pattern ignore://*|!host

# 下面表示匹配pattern的請求忽略file和host協議的規則
pattern ignore://file|host

手機或者PC打開百度隨意點擊一個請求都能看到當下的輸出信息

只需配置一條規則即可通過在pc上通過weinre修改網頁的DOM結構及其樣式
在rules里配置規則

# test只是作為一個區分,方便多個不同頁面調試
m.baidu.com weinre://test

打開Weinre>test,看到截圖如下

然后就能開始做調試了

whistle