Web 调试工具——whistle上手使用（安装与基本使用）_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
1

安装完成后查看版本

查看版本：

whisle -V 
1

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

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

set-ExecutionPolicy RemoteSigned
1

输入Y，回车就好了

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

启动whistle

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

• 启动whistle:

  w2 start
  1

• whistle的默认端口是8899，如果要指定端口号，执行下面的命令：

  w2 start -p 8888
  1

• 重启whistle（也支持指定端口）:

  w2 restart
  1

• 停止whistle:

  w2 stop
  1

配置代理

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

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

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

访问配置页面

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

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

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

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