whistle 常用功能

sevenliao
740 阅读4分钟

1.什么是whistle

whistle是基于Node实现的跨平台web调试代理工具，同类型的工具有Fiddler和Charles，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用。

2.whistle的优势

  • 配置简单： whistle的配置类似于系统hosts的配置，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式。
  • 支持扩展： whistle提供了插件扩展能力，通过插件可以新增whistle的协议实现更复杂的操作、也可以用来存储或监控指定请求、集成业务本地开发调试环境等等，基本上可以做任何你想做的事情，且开发、发布及安装whistle插件也都很简单。
  • 内置weinre： 通过weinre可以修改调试移动端DOM结构、捕获页面异常等。
  • 界面简单易懂： 从界面来看，whistle的功能划分为了network（网络）、rules（规则）、values（数据）、pulgins（插件）四大模块，通过tab页签进行切换。
  • 文档全面： whistle官网提供了详细的说明文档，工作中遇到的情况只要查阅文档都能解决。

3.whistle 常用功能

whistle功能特别强大，所以结合自己工作所需寻找适合自己的方法，本文将结合本人在使用whistle过程中遇到的问题，对whisle的安装启动、配置及基础知识做下梳理。在介绍安装、配置等步骤时，有时会杂糅一些遇到的问题，没有遇到的话可以直接跳过。还有补充说明一下，许多平时用不到或很少使用的内容，将简单带过，如果解决不了你的问题或者有错误的地方，还希望多多指点或者请到[whsitle官网](https://wproxy.org/whistle/)去查看文档。

3.1 安装和启动

安装node

由于whistle是基于Node的，自然需要先安装Node环境，这里不再多做说明。下面是whistle官网对Node版本的建议

whistle支持v0.10.0以上版本的Node，为获取更好的性能，推荐安装最新版本的Node。

安装whistle

Node安装完成后，执行如下命令安装whistle：

$ npm install -g whistle

启动whistle

whistle支持三种等价的命令whistle、w2、wproxy，本文使用w2命令。下面是常用的命令：

启动whistle:

w2 start

whistle的默认端口是8899，如果要指定端口号，执行下面的命令：

w2 start -p 8888

重启whistle（也支持指定端口）:

w2 restart

停止whistle:

w2 stop

3.2 配置代理

温馨提示！提示！提示！重要的事情说三遍

  • 代理前一定要：安装证书！证书! 证书！
如需代理pc页面，记得pc上安装whistle证书；如需代理移动端页面，记得移动端上安装whistle证书；
具体如何安装证书这里就不详细介绍了，可以查看官网

配置代理时有两个关键的参数：服务器IP和端口号。

  • 端口号比较简单，对应w2 start命令启动好的端口号即可。
  • 服务器IP的话需要分两种情况：一种是本地，对应127.0.0.1即可； 另一种是远程，这时候需要填服务器的IP。
如果本地代理不行每次都换ip地址，可以设置127.0.0.1；
示例： https://sevenliao.com/index.js http://127.0.0.1/index.js

下面来说下配置代理的几种方式：

浏览器代理

浏览器代理的话要使用浏览器的代理插件，我这里介绍chrome：

chrome：使用SwitchOmega插件。

全局代理

跟个人习惯和业务而定，我这边基本不用，所以做介绍

手机代理

手机端要配置代理的话，需要保证所连wifi和启动了代理的主机处在同一网络。以IOS为例：

  • 连接网络（公司手机和电脑连接同一网络）：

  • 点击打开wifi-》打开配置代理-》修改为手动-》设置ip地址-》设置端口号

访问whistle控制台

配置完代理后，我们需要先验证下代理是否配置成功。用浏览器访问配置页面（即whistle控制台）

  • 有以下两种方式：

    1. 域名访问：local.whistlejs.com/
    2. IP + 端口访问： 如http:127.0.0.1:8899

因为我们是要验证刚才配置的代理是否生效，所以访问控制台的IP应该和配置代理的IP保持一致。

如果配置正确，我们就可以看到whistle的控制台界面了

如果页面打不开，则可能是whistle所在的电脑防火墙限制了远程访问whistle的端口，需要关闭防火墙或者设置白名单。（如何设置白名单就可以网上搜索啦，应该很多教程，哈哈）

安装https证书

关闭防火墙或者给whsitle设置了白名单之后，如果whistle的设置页面可以正常打开，这表示说我们可以代理http请求了。

如果你的页面和接口全部是http请求，就可以忽略安装https证书的这一步了。但现在除了本地或者预发环境，基本都是https的了，因此还是建议提前把证书装上。

下载证书

我们可以通过下面的方式下载证书：

  1. 在配置代理的设备上打开浏览器，在浏览器中输入rootca.pro即可下载，这种是最便捷的方式
  2. 在启动了whistle的机器上用浏览器打开配置页面，点击https，会弹出一个带二维码的界面，点击Download RootCA 或者扫二维码下载

安装证书

证书下载到设备上（pc或移动端设备）后，即可直接安装，具体设备如何安装证书就不详细说明了，因为机器不一样可能会有差异，结合自己设备自行查找安装即可

开启拦截https

安装好证书之后，必须开启https拦截功能之后，whistle才能看到HTTPS、Websocket的请求。

温馨按提示! 开启https拦截和安装并信任证书，这两个条件缺一不可。

我们需要通过下面的步骤开启https拦截：在启动了whistle的机器上用浏览器打开配置页面，点击https，会弹出一个带二维码的界面，在这个界面勾选Capture HTTPS CONNECTs选项（是不是很熟悉，在下载证书的第2种方法里我们见过的）

上面的配置完成之后，如果https的请求还是不能正常访问或者还是出现安全提醒，可以重新打开浏览器访问或者重启下whistle。whistle官网给出的解释是如果之前访问过该页面，导致长链接已建立，所以我们之后的配置是不生效的。

这样基本上whistle 就可以正常工作和代理文件调试啦

基础知识点

我们简单的对whistle控制台的功能划分和whisle的配置方式做一下简单的了解。

控制台

whistle控制台的打开方式上文我们已经说过了，这里不再重复。whistle控制台核心部分的分区如下（[whistle界面详细列表点这里]（wproxy.org/whistle/web…

  • NetWork: 查看请求响应的详细信息及请求列表的Timeline
  • Rules: 匹配规则，whistle核心，详见下一节配置方式
  • Values: 配置key-value的数据，在Rules里面配置可以通过{key}获取
  • Plugins: 显示所有已安装的插件列表，开启关闭插件功能

配置方式

whistle的所有操作都可以通过配置实现，whistle默认的配置方式是将匹配模式(pattern)写在左边，操作uri(operatorURI)写在右边。这样whistle会将请求的url与pattern进行匹配，如果匹配上就执行operatorURI对应的操作：

pattern operatorURI

文件代理示例： https://sevenliao.com/index.js http://127.0.0.1/index.js

匹配模式pattern

whistle的匹配模式分为以下几种：

  1. 域名匹配：域名匹配不仅支持匹配某个域名，也可以限定端口号、协议
// 匹配www.domain.com域名下的所有请求，包括http、https、ws、wss，tunnel
www.domain.com operatorURI
（一般这个就够了）

// 匹配www.domain.com域名下的http请求
http://www.domain.com operatorURI

// 匹配www.domain.com域名下81端口的请求(http请求默认为80端口，https请求默认为443端口)
www.domain.com:81 operatorURI
  1. 路径匹配：指定匹配某个路径，也可以限定端口号、协议
// 匹配www.domain.com:81/path路径及其子路径（如www.domain.com:81/path/child）的请求
www.domain.com:81/path operatorURI
  1. 精确匹配：与上面的路径匹配不同，路径匹配不仅匹配对应的路径，而且还会匹配该路径下面的子路径，而精确匹配只能指定的路径，只要在路径前面加$即可变成精确匹配
// 匹配www.domain.com:81/path的路径，不包含子路径
$www.domain.com:81/path operatorURI
  1. 正则匹配：正则的语法及写法跟js的正则表达式一致，支持两种模式：/reg/、/reg/i 忽略大小写，支持子匹配，但不支持/reg/g，且可以通过正则的子匹配把请求url里面的部分字符串传给operatorURI
// 匹配所有请求
* operatorURI

// 最多支持10个子匹配 $0...9，其中$0表示整个请求url，其它跟正则的子匹配一样
/[^?#]/([^/]+).html/ protocol://...$1...

（正则匹配还是很强大的，基本数都可以实现你大部分要的功能）

  1. 通配符匹配：通常，域名匹配和路径匹配可以满足我们大部分的需要，不满足的部分也可以用正则匹配来补充，但正则对大部分人来说还是有门槛的，whistle 很贴心的为我们提供了更简单的通配符匹配方式。目前我还没用过通配符匹配，这里依然简单介绍下，完整通配符匹配：在这里

    • 通配符匹配
    • 通配域名匹配 （这个我这边基本没有用到，所以就不做介绍了）

操作值operatorURI

whistle官网将whsitle的操作值分为字符串和JSON对象两种。本文按照配置方式的不同，将whislte的操作值分为两种：带空格的和不带空格的。

  • 带空格：带空格的字符串和保留缩进格式的JSON对象
  • 不带空格：不带空格的字符串和序列化了的不带空格的JSON对象

不带空格的操作值可以直接在operatorURI中写入，模式为pattern opProtocol://(strValue)，注意字符串必须要用括号包裹：

// 将符合pattern的url的返回内容用helloworld代替
pattern resBody://(helloworld)

带空格的操作值需要将操作值保存在Values或者本地文件中。

  1. 保存在Values中（这个在本地接口mock中非常实用）

    在whsitle控制台中打开Values标签，点击Create，增加名称为test.json的操作值，并在右侧编辑test.json的内容，可按照pattern opProtocol://{valueName}来使用，注意value名称是用打括号包裹的，如下：

// 将符合pattern的url的返回内容用test.json文件中的内容代替
pattern resBody://{test.json}

增加的操作值的名称是按照自己的需求取的，后缀名也是非必填的。使用后缀名的话会按照对应的格式高亮展示，不使用的话默认文本格式展示

  1. 保存在本地文件中
    首先我们先在本地新建一个test1.json的文件，然后在whsitle控制台中点击Files标签\

按照步骤选中创建的test1.json文件，whsitle会生成一个path，我们可以按照这个路径来使用\

// 将符合pattern的url的返回内容用test.json文件中的内容代替
pattern resBody:///$whistle/test1.json

本文参考文章地址： www.manongjc.com/detail/22-p…

avatar
文章
阅读
粉丝