whistle真机调试

时间  2020-06-23 标签 whistle 调试

系列文章

真机联调经常使用方式和强大的Fiddler
whistle真机调试css

前言

以前发表过一篇文件关于真机调试的几种方式,可是都各自有些不便的地方,最近发现一个不错的工具就补充上来了html

whistle

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])是基于Node实现的跨平台抓包调试代理工具，有如下基本功能：android

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

配置&启动whistle

安装

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

能够经过如下方式来访问配置页面：github

  • 域名访问 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 能够看到这么一个页面：
![图片描述](attimg://article/content/picture/201905/07/163907jnnp6kxkq8wp55n1.png)正则表达式

配置代理

全局代理

通常不必进行全局代理,因此咱们直接跳过chrome

浏览器代理

在chrome扩展应用安装Proxy SwitchyOmega,成功以后按照以下截图设置
![图片描述](attimg://article/content/picture/201905/07/163949ezh5ml5z4ilh8kz3.jpg)
而后点击扩展程序选项,配置以下
![图片描述](attimg://article/content/picture/201905/07/164045t4gs9eb6xuvgmnyd.jpg)
新开Tab打开百度,而后返回127.0.0.1:8899页面就看到已经能够抓取请求了
![图片描述](attimg://article/content/picture/201905/07/164103gi44w82mk8el8nkb.jpg)npm

真机代理

配置当前Wi-Fi的代理
图片描述
而后再在手机经过IP+端口方式访问http://whistleServerIP:whistlePort/
图片描述segmentfault

Https

安装根证书

按照截图步骤安装便可浏览器

PC

图片描述
图片描述
图片描述
图片描述
图片描述

mobile

打开浏览器扫二维码便可

iOS

  • 手机设置代理后，Safari 地址栏输入 rootca.pro，按提示安装证书（或者经过 whistle 控制台的二维码扫码安装，iOS安装根证书须要到链接远程服务器进行验证，须要暂时把Https拦截功能关掉）
  • iOS 10.3 以后须要手动信任自定义根证书，设置路径：Settings > General > About > Certificate Trust Testings

![图片描述](attimg://article/content/picture/201905/07/170649f88ahr8hgggza0rg.png)

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权限，且会覆盖原来的配置)

![图片描述](attimg://article/content/picture/201905/07/165054yck5g4kkkdzk4btk.jpg)

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

联系我们 沪ICP备13005482号-10