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

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