whistle 工具的安装与使用

小乖1224
1,391 阅读5分钟

whistle 工具的安装与使用

whistle简介： whistle是基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能。官网地址：wproxy.org/whistle/。

安装

1.安装Node

Windows或Mac系统，可访问nodejs.org/网址自行安装。

2.安装whistle

Node安装成功后，执行如下npm命令安装whistle （Mac或Linux的非root用户需要在命令行前面加sudo，如：sudo npm install -g whistle）

$ npm install -g whistle

npm默认镜像是在国外，有时候安装速度很慢或者出现安装不了的情况，如果无法安装或者安装很慢，可以使用taobao的镜像安装：

$ npm install cnpm -g --registry=https://registry.npmmirror.com
$ cnpm install -g whistle

或者直接指定镜像安装：
$ npm install whistle -g --registry=https://registry.npmmirror.com

whistle安装完成后，执行命令 whistle help 或 w2 help，查看whistle的帮助信息，如果能正常输出whistle的帮助信息，表示whistle已安装成功。 image.png

3. 启动whistle

最新版本的whistle支持三种等价的命令whistle、w2、wproxy

启动whistle:

$ w2 start

如下图：

image.png

Note: 如果要防止其他人访问配置页面，可以在启动时加上登录用户名和密码 -n yourusername -w yourpassword。

重启whsitle:

$ w2 restart

停止whistle:

$ w2 stop

调试模式启动whistle(主要用于查看whistle的异常及插件开发):

$ w2 run

启动完whistle后，最后一步需要配置代理。

4. 配置代理

配置信息

  1. 代理服务器：127.0.0.1 (如果部署在远程服务器或虚拟机上，改成对应服务器或虚拟机的ip即可)
  2. 默认端口：8899 (如果端口被占用，可以在启动时通过 -p 来指定新的端口，更多信息可以通过执行命令行 w2 help (v0.7.0及以上版本也可以使用w2 help) 查看)

代理配置方式

  1. 全局代理 (推荐)，可通过命令行设置参考设置代理，也可以手动配置： image.png image.png

  2. 浏览器代理 (推荐)：安装浏览器代理插件 image.png Firefox: 地址栏输入访问 about:preferences，找到 Network Proxy，选择 手动代理配置(Manual proxy configuration)，输入代理服务器地址、端口，保存 image.png image.png

  3. 移动端需要在设置中配置当前Wi-Fi的代理，以 iOS 为例： image.png PS: 如果配置完代理，手机无法访问，可能是whistle所在的电脑防火墙限制了远程访问whistle的端口，关闭防火墙或者设置白名单：jingyan.baidu.com/article/870…

访问配置页面

启动whistle及配置完代理后，用Chrome浏览器(由于css兼容性问题界面只支持Chrome浏览器) 访问配置页面，如果能正常打开页面，whistle安装启动完毕，可以开始使用。

可以通过以下两种方式来访问配置页面：

  • 方式1：域名访问 local.whistlejs.com/
  • 方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
  • 方式2：通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号)，自定义端口支持上述两种方式访问，也支持 http://127.0.0.1:xxxx

5. 安装根证书

如果whistle的设置页面可以正常打开，表示我们可以代理http请求了。如果你的页面和接口全部是http请求，就可以忽略安装https证书的这一步了。

证书按下面步骤安装后，如果还出现安全提醒，这个主要原因是之前你访问过该页面，导致长连接已建立，可以等段时间再访问、或重新打开浏览器，或重启下whistle： w2 restart

如上图下载完根证书后点击rootCA.crt文件，弹出根证书安装对话框。

  1. Windows: Installing a root certificate on Windows

    img

    下载证书后，双击证书，根据指引安装证书。证书安装过程，要确保证书存储到受信任的根证书颁发机构下。 Mac: Mac根证书怎么安装

  2. Mac 安装证书后，需要手动信任证书，步骤如下： image.png 打开证书管理界面，找到带有 whistle 的字样的证书，如果有多个又不确定最新安装的是哪个，可以全部删除后重新安装 image.png 双击证书后，点击 Trust 左边展开选项，红色部分选择 Always Trust （总是信任），点击左上角关闭当前界面会要求输入密码；输入密码后可 以看到证书上面红色的图标 x 不见了，到这一步说明完成证书安装。 image.png

使用场景

抓包

1. PC电脑抓包

  • 1.在Network查看所有请求
  • 2.Settings设置请求过滤

2. 手机APP抓包

  • 1.手机链接和电脑同wifi
  • 2.查看自己的电脑IP
  • 3.打开手机wifi设置
  • 4.长按或者点击修改网络
  • 5.设置代理为手动代理
  • 6.输入电脑IP和whistle端口
本地代理

  • 直接修改whistle配置，在配置项Rules下添加一行即可，例如

    172.16.*.*:**/api ***.dev.***/api
# 测试test
172.16.*.*:**/api ***.test.***/api
# 仿真
172.16.*.*:**/api ***.sl.***/api

  • 修改任意请求（包括本地服务）接口返回结果

    举个例子：mock接口 abc.test.***/api/user/lo…
    在配置项Values项下添加一个 response.json 的 key，内容改成你想要的返回内容；
    在配置项Rules下添加一行

    https://abc.test.***/api/user/login {response.json}

    如果不是 .json 结尾，whistle 不会在 Response Headers 里自动添加 content-type: application/json; charset=utf-8，请使用 .json 结尾的文件

    从新刷新页面查看，即是自己修改后的返回结果

  • 修改返回状态码

    https://abc.test.***/api/user/login  statusCode://500

  • 替换线上文件

    https://example.js file://users/example.js

    还有很多功能、例如插入js、处理 options 请求、移动端抓包等等，有需要尽可一试。

avatar
文章
阅读
粉丝