whistle使用实践（配置与基础篇）

whistle使⽤实践（配置与基础篇）
简介
whistle是基于Node实现的跨平台web调试代理⼯具，同类型的⼯具有Fiddler和Charles，主要⽤于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使⽤。

在使⽤了Fiddler、Charles以及whistle这三款代理⼯具之后，总结出来的whistle的优势有以下⼏点：
1. 配置简单：whistle的配置类似于系统hosts的配置，⼀切操作都可以通过配置实现，⽀持域名、路径、正则表达式、通配符、通配路径等多种匹配⽅式。

2. ⽀持扩展：whistle提供了插件扩展能⼒，通过插件可以新增whistle的协议实现更复杂的操作、也可以⽤来存储或监控指定请求、集成业务本地开发调试环境等等，基本上
可以做任何你想做的事情，且开发、发布及安装whistle插件也都很简单。

3. 内置weinre：通过weinre可以修改调试移动端DOM结构、捕获页⾯异常等。

4. 界⾯简单易懂：从界⾯来看，whistle的功能划分为了network（⽹络）、rules（规则）、values（数据）、pulgins（插件）四⼤模块，通过tab页签进⾏切换。

5. ⽂档全⾯：whistle官⽹提供了详细的说明⽂档，⼯作中遇到的情况只要查阅⽂档都能解决。

下图是whistle⽀持的功能:
本⽂将结合本⼈在使⽤whistle过程中遇到的问题，对whisle的安装启动、配置及基础知识做下梳理。

在介绍安装、配置等步骤时，有时会杂糅⼀些遇到的问题，没有遇到的话可以直接跳过。

另外需要说明的是，由于是结合使⽤体验做的梳理，许多平时⽤不到或使⽤频率较低的内容，会写的很简略，如果本⽂解决不了你的问题的话，还请到去查看⽂档。

安装启动
安装Node
由于whistle是基于Node的，⾃然需要先安装Node环境，这⾥不再多做说明。

下⾯是whistle官⽹对Node版本的建议：
whistle⽀持v0.10.0以上版本的Node，为获取更好的性能，推荐安装最新版本的Node。

安装whistle
Node安装完成后，执⾏如下命令安装whistle：
$ npm install -g whistle
查看版本：
whisle -V
如果能正确输出whistle的版本信息，就表⽰安装成功了。

之后可通过help命令查看帮助信息：
whistle help
启动whistle
whistle⽀持三种等价的命令whistle、w2、wproxy，本⽂使⽤w2命令。

下⾯是常⽤的命令：
启动whistle:
w2 start
whistle的默认端⼝是8899，如果要指定端⼝号，执⾏下⾯的命令：
w2 start -p 8888
重启whistle（也⽀持指定端⼝）:
w2 restart
停⽌whistle:
w2 stop
配置代理
配置代理时有两个关键的参数：服务器IP和端⼝号。

端⼝号⽐较简单，对应w2 start命令启动好的端⼝号即可。

服务器IP的话需要分两种情况：⼀种是本地，对应127.0.0.1即可，另⼀种是远程，这时候需要填服务器的IP。

配置所需要的信息在启动whistle时控制台会告诉我们，见下图：
从上⾯的图⽚可以看出，端⼝号为8899，IP有127.0.0.1、10.1.2.30、192.168.137.1和192.168.191.1这四个，如果是本地代理的话，这四个IP都可以（如果不想每次IP更换都要重新配置，选127.0.0.1呀），如果是远程代理，除了127.0.0.1之外，其他都可以的（仍然不建议填10.1.2.30这个IP，理由同上）。

下⾯来说下配置代理的⼏种⽅式：
浏览器代理
浏览器代理的话要使⽤浏览器的代理插件，这⾥介绍chrome和firefox两种：
1. chrome：使⽤插件。

2. firefox：地址栏输⼊访问 about:preferences，找到 Network Proxy，选择⼿动代理配置(Manual proxy configuration)，输⼊代理服务器地址、端⼝，保存即可。

全局代理
1. Windows: 菜单 > 设置 > ⽹络和Internet > 代理
2. Mac: 系统偏好设置 > ⽹络 > ⾼级 > 代理 > ⽹页代理(HTTP) 和安全⽹页代理(HTTPS)
3. Linux: ⼯作中没有⽤过，此处略过。

详见
⼿机代理
⼿机端要配置代理的话，需要保证所连wifi和启动了代理的主机处在同⼀⽹络。

以IOS为例：1. 连接⽹络（公司⼿机和电脑连接的不是同⼀⽹络，这个⽹络为电脑开的热点）：
2. 点击配置代理，修改为⼿动：
访问whistle控制台
配置完代理后，我们需要先验证下代理是否配置成功。

不同于Fiddler和Charles，whistle需要⽤浏览器访问配置页⾯（即whistle控制台），有以下两种⽅式：
1. 域名访问：
2. IP + 端⼝访问：如http:192.168.191.1:8888
因为我们是要验证刚才配置的代理是否⽣效，所以访问控制台的IP应该和配置代理的IP保持⼀致。

如果配置正确，我们就可以看到whistle的控制台了，如下图：
如果页⾯打不开，则可能是whistle所在的电脑防⽕墙限制了远程访问whistle的端⼝，需要关闭防⽕墙或者设置⽩名单。

设置⽩名单的步骤如下：
1. 控制⾯板 -> 系统和安全 -> Windows Defender防⽕墙 -> ⾼级设置 -> ⼊站规则 -> 新建规则
2. 选择端⼝
3. 输⼊wistle启动时设置的端⼝号
4. 选择允许连接
5. 输⼊设置的规格名称
6. 在⼊站规则列表中查看是否新建成功以及是否开启，开启之后whistle提供的服务就可以在局域⽹中访问了
安装https证书
关闭防⽕墙或者给whsitle设置了⽩名单之后，如果whistle的设置页⾯可以正常打开，这表⽰说我们可以代理http请求了。

如果你的页⾯和接⼝全部是http请求，就可以忽略安装https证书的这⼀步了。

但现实是除了本地或者预发环境，我们很难找到不是https的了（很多预发环境也是https的），因此还是建议提前把证书装上。

如果你的环境中出现了以下情况（当然，没有装好证书的话这些情况基本都会出现的），就是https证书没有安装或者没装好：
1. whisle的配置页⾯可以打开，但是⽹页不能打开或者只加载了⼀部分页⾯
2. 京东App数据更新不了或展⽰不全，或者扫码提⽰“⽆法获取信息”
3. whistle配置页⾯中network中443端⼝的请求前⾯有⼩锁，或者抓不到请求
4. 浏览器提⽰“您的连接不是私密连接”
下载证书
我们可以通过下⾯的⽅式下载证书：
1. 在配置代理的设备上打开浏览器，在浏览器中输⼊rootca.pro即可下载，这种是最便捷的⽅式
2. 在启动了whistle的机器上⽤浏览器打开配置页⾯，点击https，会弹出⼀个带⼆维码的界⾯，点击Download RootCA 或者扫⼆维码下载
安装证书
证书的安装是不依赖于代理⼯具的，也就是说我们⽆论⽤的是whistle还是Fiddler或者是Charles，步骤都是⼀样的。

我把安装步骤单独做了汇总，详见
开启拦截https
安装好证书之后，必须开启https拦截功能之后，whistle才能看到HTTPS、Websocket的请求。

开启https拦截和安装并信任证书，这两个条件缺⼀不可。

我们需要通过下⾯的步骤开启https拦截：在启动了whistle的机器上⽤浏览器打开配置页⾯，点击https，会弹出⼀个带⼆维码的界⾯，在这个界⾯勾选Capture HTTPS CONNECTs选项（是不是很熟悉，在下载证书的第2种⽅法⾥我们见过的）
上⾯的配置完成之后，如果https的请求还是不能正常访问或者还是出现安全提醒，可以重新打开浏览器访问或者重启下whistle。

whistle官⽹给出的解释是如果之前访问过该页⾯，导致长链接已建⽴，所以我们之后的配置是不⽣效的。

基础
虽然在[whistle使⽤实践（实例篇）]中我会按照具体的使⽤场景来详细介绍whistle的使⽤⽅法，但是在此之前，我们有必要对whistle控制台的功能划分和whisle的配置⽅式做⼀下简单的了解。

控制台
whistle控制台的打开⽅式上⽂我们已经说过了，这⾥不再重复。

whistle控制台核⼼部分的分区如下（[whistle界⾯详细列表点这⾥]（
1. NetWork: 查看请求响应的详细信息及请求列表的Timeline
2. Rules: 匹配规则，whistle核⼼，详见下⼀节配置⽅式
3. Values: 配置key-value的数据，在Rules⾥⾯配置可以通过{key}获取
4. Plugins: 显⽰所有已安装的插件列表，开启关闭插件功能
配置⽅式
在⽂章的开头就说过，whistle的所有操作都可以通过配置实现，配置⽅式扩展于系统hosts配置⽅式(ip domain或组合⽅式ip domain1 domain2 domainN)，具有更丰富的匹配模式及更灵活的配置⽅式。

whistle默认的配置⽅式是将匹配模式(pattern)写在左边，操作uri(operatorURI)写在右边。

这样，whistle会将请求的url与pattern进⾏匹配，如果匹配上就执⾏operatorURI对应的操作：
pattern operatorURI
pattern和operatorURI也可以左右互换（），为了⾏⽂的清晰，不造成新的混淆，这⾥只介绍我常⽤的配置⽅式，我认为只掌握⼀种就够了。

我们配置hosts时，如果⼀个IP要对应多个域名，会这样⼦写：
127.0.0.1
和系统hosts⼀样，如果⼀个pattern要对应多个操作，whsitle也⽀持组合⽅式的配置。

使⽤组合⽅式时，whistle会按照从左到右的顺序执⾏operatorURI。

pattern operatorURI1 operatorURI2 operatorURIN
在简单了解了配置⽅式之后，我们就可以按照pattern operatorURI的模式为whsitle添加规则了。

还是再回到whsitle控制台的界⾯，选中Rules。

我们可以像使⽤SwitchHosts软件管理hosts⼀样对规则进⾏分组管理。

默认情况下，whistle只有⼀个Default的分组，如下：
我们可以点击Create按钮添加⼀个单品页的分组，在这个分组⾥可以加上所有与单品页相关的配置（如果要禁⽤某个配置，可以使⽤Ctrl + /的快捷键，或者直接在前⾯加#）
如果要配置的分组⽣效，需要双击左侧单品页的tab，出现对号就表⽰⽣效了，没有在使⽤的分组是没有对号的，也可以同时使⽤多个分组。

匹配模式pattern
whistle的匹配模式分为以下⼏种：
1. 域名匹配：域名匹配不仅⽀持匹配某个域名，也可以限定端⼝号、协议
// 匹配域名下的所有请求，包括http、https、ws、wss，tunnel
operatorURI
// 匹配域名下的http请求
operatorURI
// 匹配域名下81端⼝的请求(http请求默认为80端⼝，https请求默认为443端⼝)
:81 operatorURI
2. 路径匹配：指定匹配某个路径，也可以限定端⼝号、协议
// 匹配:81/path路径及其⼦路径（如:81/path/child）的请求
:81/path operatorURI
3. 精确匹配：与上⾯的路径匹配不同，路径匹配不仅匹配对应的路径，⽽且还会匹配该路径下⾯的⼦路径，⽽精确匹配只能指定的路径，只要在路径前⾯加$即可变成精确匹
配
// 匹配:81/path的路径，不包含⼦路径
$:81/path operatorURI
4. 正则匹配：正则的语法及写法跟js的正则表达式⼀致，⽀持两种模式：/reg/、/reg/i 忽略⼤⼩写，⽀持⼦匹配，但不⽀持/reg/g，且可以通过正则的⼦匹配把请求url⾥⾯的部
分字符串传给operatorURI
// 匹配所有请求
* operatorURI
// 匹配url中包含keyword的请求，且忽略⼤⼩写
/keyword/i operatorURI
// 利⽤⼦匹配把url⾥⾯的参数带到匹配的操作uri
// 下⾯正则将把请求⾥⾯的⽂件名称，带到匹配的操作uri
// 最多⽀持10个⼦匹配 $0...9，其中$0表⽰整个请求url，其它跟正则的⼦匹配⼀样
/[^?#]\/([^\/]+)\.html/ protocol://...$1...
5. 通配符匹配：通常，域名匹配和路径匹配可以满⾜我们⼤部分的需要，不满⾜的部分也可以⽤正则匹配来补充，但正则对⼤部分⼈来说还是有门槛的，whistle
很贴⼼的为我们提供了更简单的通配符匹配⽅式。

⽬前我还没⽤过通配符匹配，这⾥依然简单介绍下，完整通配符匹配：
通配符匹配
// 以 ^ 开头
^/test/*** protocol://...$1...
// 限定结束位置
^/test/***test$ protocol://...$1...
如果请求url为 $1 = abc?123&test，第⼆个配置 $1 = abc?123，⽽只能匹配第⼀个。

通配域名匹配
// 匹配以 .com 结尾的所有url，如: , ，但不包含 *
*.com protocol://...$1...
// 匹配 的⼦域名，不包括
// 也不包括诸如 * 的四级域名，只能包含: ， 等的三级域名
* protocol://...$1...
// 如果要配置所有⼦域名⽣效，可以使⽤ **
**.com protocol://...$1...
通配路径匹配
// 对所有域名对应的路径 protocol://a.b.c/xxx[/yyy]都⽣效
*/ 127.0.0.1
操作值operatorURI
whistle官⽹将whsitle的操作值分为字符串和JSON对象两种。

本⽂按照配置⽅式的不同，将whislte的操作值分为两种：带空格的和不带空格的。

带空格：带空格的字符串和保留缩进格式的JSON对象
不带空格：不带空格的字符串和序列化了的不带空格的JSON对象
不带空格的操作值可以直接在operatorURI中写⼊，模式为pattern opProtocol://(strValue)，注意字符串必须要⽤括号包裹：
// 将符合pattern的url的返回内容⽤helloworld代替
pattern resBody://(helloworld)
带空格的操作值需要将操作值保存在Values或者本地⽂件中。

1. 保存在Values中
在whsitle控制台中打开Values标签，点击Create，增加名称为test.json的操作值，并在右侧编辑test.json的内容，可按照pattern opProtocol://{valueName}来使⽤，注意value名称是⽤打括号包裹的，如下：
// 将符合pattern的url的返回内容⽤test.json⽂件中的内容代替
pattern resBody://{test.json}
增加的操作值的名称是按照⾃⼰的需求取的，后缀名也是⾮必填的。

使⽤后缀名的话会按照对应的格式⾼亮展⽰，不使⽤的话默认⽂本格式展⽰2. 保存在本地⽂件中
⾸先我们先在本地新建⼀个test1.json的⽂件，然后在whsitle控制台中点击Files标签
按照步骤选中创建的test1.json⽂件，whsitle会⽣成⼀个path，我们可以按照这个路径来使⽤
// 将符合pattern的url的返回内容⽤test.json⽂件中的内容代替pattern resBody:///$whistle/test1.json
原⽂地址：。