whistle真機調試

系列文章

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

前言

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

whistle

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

1. 查看HTTP、HTTPS請求響應內容
2. 查看WebSocket、Socket收發的幀數據
3. 設置請求hosts、上游http/socks代理
4. 修改請求url、方法、頭部、內容
5. 修改響應狀態碼、頭部、內容，並支持本地替換
6. 修改WebSocket或Socket收發的幀數據
7. 內置調試移動端頁面的weinre和log
8. 做爲HTTP代理或反向代理
9. 支持用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] 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/

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

# 下面表示匹配pattern一、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