whistle基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能：
安装使用
- 安装
npm i -g whistle - 启动：
w2 start - 手机或浏览器设置代理：
http://192.168.5.16:8899确保手机和电脑处于同一局域网下 - 安装证书
ios安装证书后需要添加为信任或验证 设置->通用->描述文件与设备管理->找到证书然后验证
- 浏览器打开
http://192.168.5.16:8899手机或电脑设置好代理和安装完证书之后就可以实现抓包了
线上资源文件指向本地 可修改本地代码调试在线网页
在Rules中新建一个规则 https://www.test.cn/flow file://D:\project\flow1
2
3
4
5// 替换单个文件
'https://www.test.cn/flow/index.html file://D:\project\flow\index.html'
'https://www.test.cn/flow/js/flow.js file://D:\project\flow\js\flow/flow.js'
// 替换整个项目
'https://www.test.cn/flow file://D:\project\flow'
注入调试 vConsole 或者 Eruda 需安装插件
该规则需要安装插件：npm i -g whistle.inspect，插件官网 如果需要注入Eruda，只需改成 whistle.inspect://e1
2
3
4// 页面自动注入 vConsole
'https://www.test.cn/flow/index.html whistle.inspect://'
// 页面自动注入 Eruda
'https://www.test.cn/flow/index.html whistle.inspect://e'
使用 log 功能打印日志：
在移动端真机调试中，我们无法像浏览器控制台那样，查看输出的日志和数据，以往的替代方案是在页面上使用vconsole插件，而有了whistle后，我们可以这样做：1
2// 打开目标页面后 在右侧找到 log面板打开即可查看 log信息
'http://www.baidu.com/ log://'
使用whistle内置的Weinre调试移动端页面：
weinre相信大家都很熟悉，而whistle内置了weinre，使用方法如下：在rules配置：https://www.test.cn weinre://flow这时候，就能在http://192.168.5.16:8899/weinre/client/#flow 看到调试界面了
使用 mock 修改响应 该规则需要安装插件 whistle.vase
npm i -g whistle.vase 插件官网代理环境打开 http://vase.local.whistlejs.com1
2
3
4
5
6
7
8
9// 添加名为 systemDate，Engine为 mock 的数据
{
"retCode": "000000",
"retDesc": "SUCCESS",
"rspBody": {
"date": "2018-11-16 15:55:46",
"test": "@cword(1,10)"
}
}
替换接口响应 https://www.test.cn/flow/getPayRule vase://getPayRule
注：若whistle.vase为1.0.1及以下 使用以下方式 否则替换不成功https://www.test.cn/flow/getPayRule whistle.vase://getPayRule
其他用法
- 禁用缓存
https://www.test.cn cache://no-store - 禁用缓存
https://www.test.cn cache://no-store - 模拟5秒超时后网络不通
https://www.test.cn/newBillsQry/getNewBills reqDelay://5000 enable://abort - 响应延时3秒
https://www.test.cn/newBillsQry/getNewBills resDelay://3000 - 修改响应码或模拟HTTP状态码异常
https://www.test.cn/newBillsQry/getNewBills statusCode://502 - 模拟低网速传输
https://www.test.cn/newBillsQry/getNewBills resSpeed://3 - 往页面插入脚本
会在网页最后以 script 标签的形式插入，花括号的值是内置编辑器保存的文件，在主菜单 “Value” 下可找到或者是指定的文件https://www.test.cn/index.html js://{test.js} 或 js://C:\Users\Administrator\Desktop\test.js - 往页面插入样式
在网页里以 style 标签的形式插入https://www.test.cn/index.html css://{test.css} 或 css://C:\Users\Administrator\Desktop\test.css
配置代理非vue项目
1 | # Rules1 线上资源文件指向本地 |
配置代理vue项目
1 | # 方法一 用本地修改的代码打包后 再用打包后文件替换线上文件 |