Web 调试工具——whistle上手使用（安装与基本使用）

本文主要是介绍Web 调试工具——whistle上手使用（安装与基本使用），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

whistle上手使用

Write and share what I see and hear

whistle是基于Node实现的跨平台web调试代理工具
点击访问whistle

在开发测试的过程中，会遇到一些问题，只看页面是发现不了问题的，尤其是移动端H5，本人深有体会，这个时候就需要使用代理工具进行抓包排查问题，同类型的工具有Fiddler和Charles。
最近在看到了 whistle ，感觉还挺好用的，所以拿来体验了一把，虽然配置的过程中出现了一些小问题，但配完后发现还是挺好用的。whistle有很多优点，这里列一下本人体验到的：

配置简单：whistle的配置类似于系统hosts的配置，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式。
界面简单易懂：从界面来看，whistle的功能划分为了network（网络）、rules（规则）、values（数据）、pulgins（插件）四大模块，通过tab页签进行切换。
文档全面：whistle官网提供了详细的说明文档，工作中遇到的情况只要查阅文档都能解决。

本文记录了本人在安装使用 whistle 过程中遇到的问题，由于本人用的是一台新的windows + win10的笔记本，所以在安装过程中遇到的问题有些多，所以步骤中掺杂了一些解决办法，没有遇到的话可以直接跳过。详细的使用步骤whistle的官网上面是很清晰的，有问题可以直接到whsitle官网去查看文档。

安装启动

安装Node

由于whistle是基于Node的，自然需要先安装Node环境。下面是whistle官网对Node版本的建议：

whistle支持v0.10.0以上版本的Node，为获取更好的性能，推荐安装最新版本的Node。

安装whistle

Node安装成功后，执行如下npm命令安装whistle

npm install -g whistle

安装完成后查看版本

查看版本：

whisle -V

如果能正确输出whistle的版本信息，就表示安装成功了。

但是在这里我遇到了一个问题在这里插入图片描述
搞半天没明白什么情况，一顿猛搜，终于给我找到解决方案了，因为我这台笔记本是新的，所以系统默认禁止执行不信任脚本了，需要打开用管理员权限打开终端，输入

set-ExecutionPolicy RemoteSigned

在这里插入图片描述
输入Y，回车就好了

有的小伙伴可能搜到的命令是小写的，不用在意，小写也行的

启动whistle

最新版本的whistle支持三种等价的命令whistle、w2、wproxy，本文使用w2命令。
下面是常用的命令：

启动whistle:
```
w2 start
```
whistle的默认端口是8899，如果要指定端口号，执行下面的命令：
```
w2 start -p 8888
```
重启whistle（也支持指定端口）:
```
w2 restart
```
停止whistle:
```
w2 stop
```

配置代理

官网上列举了配置代理的方式，我还安装了官方推荐的SwitchOmega插件，但是目前还没明白是干什么用的。

先讲讲给手机配置代理吧：
以安卓手机（小米）为例

找到设置-WLAN，选择当前连接的wifi，点进去
点击配置代理，修改为手动：
修改为手动，输入ip，whistle端口默认是8899：

访问配置页面

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

官方推荐了两种方式来访问配置页面，但是我用的时候第一种总是打不开，所以就用了第二种方式
可以通过以下两种方式来访问配置页面：

域名访问 http://local.whistlejs.com/
ip+端口访问 http://127.0.0.1:8899

找了一种打不开 local.whistlejs.com 的解决方法
但是我试了之后还是不好使😔

可以看到whistle的控制台
在这里插入图片描述

安装https证书

whistle的设置页面可以正常打开，这表示说我们可以代理http请求了。

如果你的页面和接口全部是http请求，就可以忽略安装https证书的这一步了。但现在好多都是https的请求，比如说我们的测试环境都已经是https的了，因此还是建议提前把证书装上。
如果你的环境中出现了以下情况（当然，没有装好证书的话这些情况基本都会出现的），就是https证书没有安装或者没装好：

whisle的配置页面可以打开，但是网页不能打开或者只加载了一部分页面
https网站打不开
whistle配置页面中network中443端口的请求前面有小锁，或者抓不到请求
浏览器提示“您的连接不是私密连接”

下载证书

我们可以通过下面的方式下载证书：

在配置代理的设备上打开浏览器，在浏览器中输入rootca.pro即可下载，这种是最便捷的方式，给手机安装的时候也可以用
在whistle的设置页面，点击https，会弹出一个带二维码的界面，点击 Download RootCA 或者扫二维码下载

证书的安装是不依赖于代理工具的，就是说无论用的是whistle还是Fiddler或者是Charles，步骤都是一样的。有大佬总结了并汇总了安装步骤，详见【安装证书】

以上就是本人在安装配置时的操作过程了

使用

下面是简单的使用过程
在这里插入图片描述

whistle控制台核心部分的分区有下面几个
- NetWork: 查看请求响应的详细信息及请求列表的Timeline
- Rules: 匹配规则，whistle核心，详见下一节配置方式
- Values: 配置key-value的数据，在Rules里面配置可以通过{key}获取
- Plugins: 显示所有已安装的插件列表，开启关闭插件功能

这里主要配置了一下Rules
在这里插入图片描述
其他具体的配置方式有很多的，可以参考官方文档哦