whistle使用实践(配置与基础篇)
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
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
原⽂地址:。