Whistle系列之(二)Whistle是什么及本地安装

3,196 阅读3分钟

上一节我们梳理了在基于localhost的开发模式中存在的弊端以及whistle的引入可以很好地解决它们,这一节开始我将正式进入whistle的介绍。

whistle是什么

首先,我们聊一聊 —— whistle是什么?关于whistle是什么,官网有一张图,充分展示了whistle的功能

的确,功能很多很强大。

但对我而言,简单来说,whistle是一个基于Node实现的跨平台抓包调试代理工具。如果你有过Fiddler或者Charles等类似的工具的使用经历,你可以把whistle类比做它们。但是whistle和它们相比,又具备一些额外的优势,比如:

  • 不需要额外安装客户端
  • 基于Node.js开发,支持编写Node插件进行功能扩展
  • 清晰的规则配置说明,满足多种常见case的应用场景
  • ...

安装

关于如何本地安装whistle,whistle官网上有详尽的教程,我们这里按照官网的指引一步步完成whistle的本地安装。

1. 安装Node

2. 安装whistle

npm i whistle -g

安装成功后,全局命令whistle和w2等价,可通过 w2 --versoin 确认whistle是否安装成功。

% w2 --version
2.4.15

我们也可以通过 w2 --help 查看whislte命令行工具的具体功能。

3. 启动whistle

启动、停止、重启whistle的命令如下

w2 start
w2 stop
w2 restart

启动whistle

% w2 start
[!] whistle@2.4.15 is running
[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://10.64.115.70: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

输出以上信息则说明whistle启动成功。

4. 配置代理

whistle启动之后,我们需要进行代理的配置。

代理的方式分为直接对整个系统进行代理和对浏览器进行代理,我们推荐浏览器代理的方式。

首先需要安装Chrome代理插件:SwitchyOmega

点击安装好的SwitchyOmega插件(黑色甜甜圈形状),选择"选项"

将会出现以下配置界面

此处不需要我们进行修改,可见我们的代理服务器在本地的 127.0.0.1:8899(如果默认端口8899被占用,可以在启动时通过 -p参数修改启动端口,如 w2 start -p 9000)

访问本地127.0.0.1:8899,即可看到whislte的操作界面。

你看到的页面可能和下图不完全相同,但是没有关系,这是因为作者的whistle添加了一些不同的项目的配置文件,之后你也会添加属于自己项目的配置文件。

其实至此,我们就已经把本地的whistle环境搭建好了,但是使用过程中,由于常常需要抓包https的数据包,所以还需要进行最后一项,安装跟证书。

5、安装跟证书 具体的操作参考以下链接 安装whistle根证书


以上5个步骤完成之后。whistle的本地环境就算搭建起来了。下一节将会介绍如何在前端项目中进行whistle的配置和使用whistle.