whistle工具使用

whistle是基于Node实现的跨平台web调试代理工具，类似的工具有Fiddler、Charles，甚至比他们更强大

• 官方地址：wproxy.org/whistle/

1. 插件安装

• 安装node
• 安装whistle：npm install -g whistle
• 启动：w2 start || whistle start
• 指定端口：w2 start -p 8888（默认端口：8899）
• 重启：w2 restart
• 停止:w2 stop 访问：http://127.0.0.1:8899/ ，至此安装启动完成

2.浏览器代理

下载 Chrome 代理插件：推荐安装 SwitchyOmega。移动端的代理这里就不细说了

3.证书安装

PC端（Download）和移动端（扫码）都需要安装证书

4.Host配置

# host配置
10.9.11.20 *.test.com *.juejin.com

# 代理本地端口
aa.test.com 127.0.0.1:10081

# 本地文件代理
https://m.test.com/res/js/aa.js C:\xx\aa.js

# 跨域配置 `*`表示：access-control-allow-origin: * reqCors 修改请求的 CORS。resCors 修改返回的 CORS 
*.test.com resCors://*

# ignore忽略指定规则 比如：CDN图片直接走线上
ignore://* img.test.com  /aa/bb.json/i /other/test.json/i

# 匹配pattern的同时不能为post请求且请求头里面的cookie字段必须包含test(忽略大小写)、url里面必须包含 cgi-bin 的请求
# 即：过滤掉匹配filter里面的请求
pattern excludeFilter://m:post includeFilter://h:cookie=test includeFilter:///cgi-bin/i

5.移动端调试

1. 使用插件在whistle注入vConsole

npm i -g whistle.inspect

安装成功后会在plugin显示：

然后配置对应的规则vconsole就能生效了：

https://juejin.cn/ whistle.inspect://

2. 终端的日志同步到whistle的控制台

baidu.com log://

3. 通过插入js脚本的形式注入vconsole

# 注入vconsole
aa.test.com jsPrepend://{vconsole}
aa.test.com jsPrepend://{vconsole.min.js} 

同理还可以插入样式

aa.test.com/i cssAppend://{myCSS}

6. 更多技巧

• mock数据

# 也可以匹配一个文件或目录路径列表，whistle会依次查找直到找到存在的文件
pattern tpl://queryList.json
pattern tpl://path1|path2|pathN