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

安装

可以通过以下方式来访问配置页面:

启动

更多命令可看

启动完成后在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有以下三种配置方式

  • 默认方式
  • 传统方式
  • 组合方式

设置hosts

指定www.test.com的ip和端口,把请求转发到本地8899端口

保存之后输入新开Tab输入地址www.test.com会重定向到127.0.0.1:8899

本地替换

本地新建文本test.txt

请求转发

www.test.com域名下的请求都替换成对应的www.test2.com域名

注入html、js、css

whistle会自动根据响应内容的类型,判断是否注入相应的文本及如何注入(是否要用标签包裹起来)。

所有www.test.com域名下的请求,whistle都会根据响应类型,将处理好的文本注入到响应内容里面,如是html请求,js和css会分别自动加上scriptstyle标签后追加到内容后面。

Network

查看请求响应的详细信息及请求列表的Timeline,还有请求匹配到的规则

Componser

用来重发请求、构造请求,可以自定义请求的url、请求方法、请求头、请求内容。

可以直接复制下面的链接试试

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=test&rsv_spt=1&oq=test&rsv_pq=baee114800153c73&rsv_t=94cca0bw8HEtE7Xc0fKPAlVUfsy2YoAcJhYri53XprgiiboTEK%2BpA3qoqfvcAPhGE7Dn&rqlang=cn&rsv_enter=0&rsv_sug3=1&rsv_sug1=1&rsv_sug7=100&rsv_sug4=440&rsv_sug=1

Rules

  1. Create:创建规则分组
  2. Delete:删除分组
  3. Edit:重命名分组
    • 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)

  1. m:pattern:pattern为字符串或正则表达式,匹配请求方法包含该字符串(不区分大小写)或匹配该正则的请求
  2. i:ip:ip表示客户端ip或正则表达式,匹配客户端ip包含该字符串(不区分大小写)或匹配该正则的请求
  3. h:header:header表示请求头rawData的某部分字符或正则表达式,匹配请求头包含该字符串(不区分大小写)或匹配该正则的请求
  4. H:host:host表示Network里面的host字段,为请求的域名加端口,匹配请求host字段包含该字符串(不区分大小写)或匹配该正则的请求
  5. 其它:正则或普通字符串,匹配请求URL包含该字符串(不区分大小写)或匹配该正则的请求

Include Filter

表示如果里面设置了条件,则要匹配该条件,且不匹配 Exclude Filter 的请求才会显示在当前页面的Network里面,可设置的条件及分割符同 Exclude Filter。

Online

当前whistle是否在线及查看whistle服务的基本信息

Log

主要用于调试远程页面特别是移动端页面,可以通过此功能把远程页面 console 打印的信息展示出来

  1. Console 显示页面抛出的异常或通过 console 打印的信息
  2. Server 显示 whistle 内部发生的异常信息
  3. All Logs 用于切换不同页面的 log 显示

新建规则分组:

显示页面抛出信息,以百度为例

嵌入自定义脚本

过滤规则

  • ignore:忽略指定规则
  • filter:过滤指定pattern,支持根据请求方法、请求头、请求客户端IP过滤

手机或者PC打开百度随意点击一个请求都能看到当下的输出信息

Weinre

只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式

在rules里配置规则


打开Weinre>test,看到截图如下

然后就能开始做调试了

更多

whistle

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复