摘要：所有域名下的請求，都會根據(jù)響應(yīng)類型，將處理好的文本注入到響應(yīng)內(nèi)容里面，如是請求，和會分別自動加上和標(biāo)簽后追加到內(nèi)容后面。查看請求響應(yīng)的詳細(xì)信息及請求列表的，還有請求匹配到的規(guī)則用來重發(fā)請求構(gòu)造請求，可以自定義請求的請求方法請求頭請求內(nèi)容。

真機(jī)聯(lián)調(diào)常用方式和強(qiáng)大的Fiddler
whistle真機(jī)調(diào)試

之前發(fā)表過一篇文件關(guān)于真機(jī)調(diào)試的幾種方式,但是都各自有些不便的地方,最近發(fā)現(xiàn)一個不錯的工具就補(bǔ)充上來了

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

查看HTTP、HTTPS請求響應(yīng)內(nèi)容

查看WebSocket、Socket收發(fā)的幀數(shù)據(jù)

設(shè)置請求hosts、上游http/socks代理

修改請求url、方法、頭部、內(nèi)容

修改響應(yīng)狀態(tài)碼、頭部、內(nèi)容，并支持本地替換

修改WebSocket或Socket收發(fā)的幀數(shù)據(jù)

內(nèi)置調(diào)試移動端頁面的weinre和log

作為HTTP代理或反向代理

支持用Node編寫插件擴(kuò)展功能

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

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

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

域名訪問 http://local.whistlejs.com/,如果無法訪問一般是因?yàn)闆]有啟動whistle或者配置代理

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

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

w2 start -p 8899 //不設(shè)置端口默認(rèn)使用8899

[i] [email protected] 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 可以看到這么一個頁面：

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

在chrome擴(kuò)展應(yīng)用安裝Proxy SwitchyOmega,成功之后按照如下截圖設(shè)置

然后點(diǎn)擊擴(kuò)展程序選項(xiàng),配置如下

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

配置當(dāng)前Wi-Fi的代理

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

按照截圖步驟安裝即可

打開瀏覽器掃二維碼即可

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

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

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

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

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

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

默認(rèn)方式

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

傳統(tǒng)方式

# 操作URI寫在左邊
 operatorURI pattern

組合方式

 # 傳統(tǒng)組合方式
 pattern operatorURI1 operatorURI2 operatorURIN

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

指定www.test.com的ip和端口，把請求轉(zhuǎn)發(fā)到本地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域名下的請求都替換成對應(yīng)的www.test2.com域名

www.test.com www.test2.com

whistle會自動根據(jù)響應(yīng)內(nèi)容的類型，判斷是否注入相應(yīng)的文本及如何注入(是否要用標(biāo)簽包裹起來)。

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都會根據(jù)響應(yīng)類型，將處理好的文本注入到響應(yīng)內(nèi)容里面，如是html請求，js和css會分別自動加上script和style標(biāo)簽后追加到內(nèi)容后面。

查看請求響應(yīng)的詳細(xì)信息及請求列表的Timeline，還有請求匹配到的規(guī)則

用來重發(fā)請求、構(gòu)造請求，可以自定義請求的url、請求方法、請求頭、請求內(nèi)容。

可以直接復(fù)制下面的鏈接試試

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

Create：創(chuàng)建規(guī)則分組

Delete：刪除分組

Edit：重命名分組

Settings

Theme：設(shè)置主題

Font size：設(shè)置字體大小

Show line number：是否顯示行數(shù)

Allow multiple choice：是否允許多選

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

Disable all plugins：是否禁用插件規(guī)則

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

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

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

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

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

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

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

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

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

當(dāng)前whistle是否在線及查看whistle服務(wù)的基本信息

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

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

Server 顯示 whistle 內(nèi)部發(fā)生的異常信息

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：忽略指定規(guī)則

filter：過濾指定pattern，支持根據(jù)請求方法、請求頭、請求客戶端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以外的所有規(guī)則
pattern ignore://*|!host

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

手機(jī)或者PC打開百度隨意點(diǎn)擊一個請求都能看到當(dāng)下的輸出信息

只需配置一條規(guī)則即可通過在pc上通過weinre修改網(wǎng)頁的DOM結(jié)構(gòu)及其樣式
在rules里配置規(guī)則

# test只是作為一個區(qū)分,方便多個不同頁面調(diào)試
m.baidu.com weinre://test

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

然后就能開始做調(diào)試了

whistle