更好用的抓包工具 Whistle-京东云开发者社区

更好用的，开源的抓包工具 whistle 使用教程详解~

#### **前言**
随着公司软件版权的问题 Charles，Fiddler 等抓包工具不能用了，那么有什么好的替代方案吗？那就是 Whistle。
Whistle 是一款『跨平台 web 调试代理工具』，可以用来查看和修改 HTTP、HTTPS、Websocket 的请求和响应等很多强大的功能，更重要的是可以抓取移动app的网络请求(例如微信，京东App等)。只需 node 环境，通过 npm 命令行安装和启动，操作起来简单，很容易上手。Whistle 完全开源，可以放心使用。GitHub 源码地址: https://github.com/avwo/whistle

#### **快速上手**
**安装前准备**

1. 打开终端(window打开cmd，mac打开terminal) 先检查本机是否安装了node

```javascript
# 检查是否安装了node
$ node -v
```

2.如果没有安装或者初次接触node，参考官网node官网熟悉和安装node
http://nodejs.cn/learn/how-to-install-nodejs

**安装和启动Whistle**

1.node安装好后，开始安装whistle，执行以下npm命令

![](//img1.jcloudcs.com/developer.jdcloud.com/ea5ab438-f337-4ae2-b36a-db5873fe54dd20210406135136.png)

2.启动 Whistle

```javascript
# 启动Whistle
$ w2 run
```
![](//img1.jcloudcs.com/developer.jdcloud.com/efd8991e-4508-45de-9153-b0981d77e95820210406131115.png)

看到以上界面，代表安装和启动成功
浏览器打开 http://127.0.0.1:8899/ 的端口URL即可进入 web 版配置页面。

**配置和使用Whistle**
1.安装SwitchyOmega 插件

a. 使用chrome或者火狐并为其安装 SwitchyOmega 插件(一个浏览器网络代理插件): 可以直接去chrome应用商店安装插件，也可到如下地址 https://proxy-switchyomega.com/download/，去下载这个插件离线版本安装。

b.如果你是离线安装: chrome导航栏输入chrome://extensions，把你下载的离线文件，重名为 xxx.zip，然后把这个xxx.zip文件拖动到chrome扩展程序面板，如下，这就安装好了。

![](//img1.jcloudcs.com/developer.jdcloud.com/5093bfd2-e377-45bf-89dc-df28ea9690e520210406131159.png)

c.点击详细信息

![](//img1.jcloudcs.com/developer.jdcloud.com/72e9e3ef-aaec-4452-b889-05405bfb788220210406131238.png)

d. 点击扩展程序选项， 进入 SwitchyOmega 插件的配置界面

![](//img1.jcloudcs.com/developer.jdcloud.com/d47e8480-04e9-4fd3-9e6f-50429ee82e5c20210406131344.png)
2.配置 SwitchyOmega

a.点击新建情景模式，输入情景模式名称，并选择情景模式类型，点击创建

![](//img1.jcloudcs.com/developer.jdcloud.com/125284cd-d5af-45bc-a6e6-ec6f08d44dcd20210406131647.png)

b.选择网络协议，并输入代理服务器，就是你本地，以及端口号，就是本地启动的 whistle 服务的端口号

c. 点击应用选项，来使你的配置生效

d. 点击右上角那个圆圈图标，切换到whistle代理

e. 经过述配置，就可以愉快的抓包了

![](//img1.jcloudcs.com/developer.jdcloud.com/b21b49bd-5173-4900-b3d7-41ea8705447620210406131723.png)
3.开始抓包

a.再次访问 http://127.0.0.1:8899/，然后随便打开一个网站 https://www.jdl.cn/
再到whistle配置面板查看，就会看到刚才打开的网站，所有的网络请求都被whistle抓取了,是不是很方方便

![](//img1.jcloudcs.com/developer.jdcloud.com/71546059-dd6b-4a68-b741-7abfef221d6120210406131801.png)
![](//img1.jcloudcs.com/developer.jdcloud.com/691c97f8-39e4-4e5a-8e08-c4959f31f2fd20210406131822.png)

**开始Https抓包**

1.点击whistle配置页面上方菜单栏的HTTPS选项

![](//img1.jcloudcs.com/developer.jdcloud.com/475e5cdd-78fb-4259-a63f-458b2b07516c20210406132125.png)

2.点击图中二维码下载证书，双击安装：

![](//img1.jcloudcs.com/developer.jdcloud.com/5fe69f8a-45cd-4789-b42c-82ba0f3bebd920210406132155.jpg)

3.然后刷新之前打开的第三方网站，就会看到whistle已经可以抓取https的请求了

**线上代码映射到本地**
![](//img1.jcloudcs.com/developer.jdcloud.com/147567b4-4496-43ef-a537-7a57ac20cb3720210406132231.jpg)

配置完映射的文件，Ctrl + S 保存，刷新一下目标网址即可成功映射。

#### 其它代理方式
**全局代理**
Mac: System Preferences > Network > Advanced > Proxies > HTTP or HTTPS

**移动端代理**

移动端需要与电脑连接同一个 Wi-Fi 进行代理，以 Android 为例：

扫码安装 HTTPS 根证书：
<center>![](//img1.jcloudcs.com/developer.jdcloud.com/09d1ee9f-585a-44c4-be4a-dce2217d09a220210406134246.png)</center>
#### **高级用法 - 插件**

强大的插件体系：https://github.com/whistle-plugins

**用于 mock 数据的 whistle 插件**

whistle 自身的mock 功能比较简单，要想做一个 mock 系统就不太好维护了，更多的 mock 功能我们可以使用 whistle.vase 插件。

whistle.vase 插件的安装：
```
$ npm install -g whistle.vase

# Mac 系统
$ sudo npm install -g whistle.vase
```
用法新建 mock 数据，操作界面如下：
![](//img1.jcloudcs.com/developer.jdcloud.com/3e02d013-2744-4a23-bf71-ea65f3dec26920210406134509.png)

新建一个 test-script脚本：
```
Hello 官网！
```
在whistle配置：
```
vase://test-script https//www.jd.com https://www.jdl.cn/
```
**自动保存抓包数据的插件 whistle.autosave**

安装插件：
```
npm i -g whistle.autosave
```
![](//img1.jcloudcs.com/developer.jdcloud.com/9ce158c4-7f48-40cd-bdf6-0de0fc6a6bb720210406134700.png)

#### **总结**
怎么样，whistle 看起来是不是很简单，用起来也很顺畅，非常好用无烦恼，传统的桌面应用 charles, fiddler 要配置很久，还总出问题，使用fiddler，妈妈再也不用担心你下班晚了，快用起来吧！

------------

###### 自猿其说Tech-JDL京东物流技术发展部

###### 作者：用户产品部-消费者研发组  王成 王春雨

------------