阅读 397

whistle 调试神器

基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用。

优点：简单、方便、跨端

安装启动

这里静的很详细，秒懂 SwitchyOmega_Chromium.crx 浏览器代理插件下载

  • 安装Node
  • 安装whistle
  • 启动whistle
  • 配置代理
  • 访问

拦截线上https的配置

这个比较特殊所以，需要 特定配置

常用命令

  1. w2 status： 查看本机运行的 whistle 实例
  2. w2 start： 正常启动 whistle
  3. w2 stop： 停止 whistle（w2 run 的方式无法用此命令停止）
  4. w2 restart： 重启 whistle（w2 run 的方式无法用此命令重启）
  5. 服务的端口号可以用命令行参数w2 start -p xxxx来指定 （默认端口8899）
  6. w2 help 或 w2 -h 或 w2 --help： 查看帮助
  7. w2 -V 或 w2 --version： 查看当前版本 

常用功能

我们最常使用的就是NetWork 和 Rules 功能了, 其中NetWork是查看抓包，而Rules是设置代理，下面我以一个移动端活动为例，介绍一下whistle的使用：

Filter 红色代表启用

顶部Filter 设置过滤器，**Include Filter **只看你想看的域名请求：

Rules 配置规则

匹配指定规则-操作

# 匹配域名www.qq.com下的所有请求
www.qq.com operatorURI

# 匹配域名www.qq.com下的所有http请求
http://www.qq.com operatorURI

# 匹配域名www.qq.com下的所有https请求
https://www.qq.com operatorURI

# 限定域名的端口号
www.qq.com:8888 operatorURI # 8888端口

#限定具体路径
http://www.qq.com/xxx operatorURI
复制代码

operatorURI为对应的操作，由操作协议+操作值组成(operatorURI = opProtocol://opValue)：

协议列表：wproxy.org/whistle/rul… 这个功能很多，用到了再说。

Rules的特殊操作符({}、()、<>)

  • {} ：主要是引入 Values里的配置文件
www.example.com res://{index.html}
# 对应的是 Values 里定义的文件，  按住 Ctrl 点击 {xxx} 可快速定位到源文件
复制代码
www.example.com res://({"delay":6000,"body":"1234567890"}) # () 里面不能有空格
复制代码

代理协议： 常用于开发，移动端实时联调

# 将www.qq.com的请求都代理到10.241.11.111 IP上，实现在本地环境发测试环境的请求， 类似于 修改host
127.0.0.1 tmall.xc2018.com.cn
复制代码

请求替换：

# 将
http://www.qq.com http://www.baidu.com
复制代码

urlParams修改请求参数

www.ifeng.com urlParams://(test=1)
复制代码

真机调试

log查看项目打印日志

/http://www.baidu.com/ log://
# 这时候不管是PC还是真机，只要是访问 http://www.baidu.com 匹配方式下的页面，都可以在whistle的log选项下看到控制台输出的信息：
复制代码

使用 values + js 功能往页面注入 vconsole.js ：

我们在values功能栏下新建一个vConsole.js , 并把vconsole的源码放进去，并初始化一个vconsole对象(源码最后一行 写 var vConsole = new VConsole();),此时在rules 下配置：

http://www.baidu.com js://{vConsole.js}
复制代码

此时，我们刷新页面可以看到：

使用whistle内置的Weinre调试移动端页面：

在rules配置：

http://www.baidu.com weinre://index
# 此时可以使用 weinre 查看页面
复制代码