whistle真機調試

前言

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

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、配置代理

配置&啓動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] [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

配置代理

全局代理

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

瀏覽器代理

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

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

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

真機代理

配置當前Wi-Fi的代理

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

Https

安裝根證書

按照截圖步驟安裝即可

PC

mobile

打開瀏覽器掃二維碼即可

iOS

手機設置代理後，Safari 地址欄輸入 rootca.pro，按提示安裝證書（或者通過 whistle 控制檯的二維碼掃碼安裝，iOS安裝根證書需要到連接遠程服務器進行驗證，需要暫時把Https攔截功能關掉）
iOS 10.3 之後需要手動信任自定義根證書，設置路徑：Settings > General > About > Certificate Trust Testings

Android

whistle 控制檯二維碼掃碼安裝，或者瀏覽器地址欄 rootca.pro 按提示安裝
部分瀏覽器不會自動識別 ca 證書，可以通過 Android Chrome 來完成安裝
android 6.0 之後的一些app在成功安裝證書後仍然無法對https連接進行手抓包，有可能是該app沒有添加信任用戶自定義證書的權限。請確認該app是否有如下配置：

規則

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

whistle有以下三種配置方式

默認方式

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

傳統方式

# 操作URI寫在左邊
 operatorURI pattern

組合方式

 # 傳統組合方式
 pattern operatorURI1 operatorURI2 operatorURIN

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

設置hosts

指定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:\test.txt

請求轉發

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

www.test.com www.test2.com

注入html、js、css

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

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

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

Network

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

Componser

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

可以直接複製下面的鏈接試試

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

Rules

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權限，且會覆蓋原來的配置)

Filter

Exclude Filter

表示只要匹配其中一個條件的請求就不會在當前頁面的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包含該字符串(不區分大小寫)或匹配該正則的請求

Include Filter

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

Online

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

Log

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

Console 顯示頁面拋出的異常或通過 console 打印的信息
Server 顯示 whistle 內部發生的異常信息
All Logs 用於切換不同頁面的 log 顯示

新建規則分組:

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

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

嵌入自定義腳本

# pattern log://filepath
m.baidu.com log://C:\work\project\test\test.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=o\d+/i excludeFilter:///cgi-bin/i

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

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

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

Weinre

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

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

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

然後就能開始做調試了

whistle

whistle真機調試

前言

whistle

配置&啓動whistle

安裝

啓動

更多命令可看

配置代理

全局代理

瀏覽器代理

真機代理

Https

安裝根證書

PC

mobile

iOS

Android

規則

whistle有以下三種配置方式

設置hosts

本地替換

請求轉發

注入html、js、css

Network

Componser

Rules

Filter

Exclude Filter

Include Filter

Online

Log

新建規則分組:

嵌入自定義腳本

過濾規則

Weinre

更多