之前研究过tcpdump、WireShark、 修改请求或响应数据的抓包神器mitmproxy和Charles实用功能介绍 及spy-debugger内置的AnyProxy等抓包神器，发现还是whistle最适合前端。
2021年1月23日更新：
同事发现基于whistle改造的LightProxy https://github.com/alibaba/lightproxy，其支持免安装证书及系统代理自动设置
2021年4月21日更新
又发现一个基于 whistle改造的神器 nohost，其不仅具备Whistle 的所有功能，还扩展了一些功能，且支持多人多环境同时使用，主要用于部署在公共服务器上供整个部门（公司）的同事共同使用
官网：https://nohost.pro/
仓库：https://github.com/Tencent/nohost

一、安装

（一）、安装及启动whistle

1、安装 npm install -g whistle
2、启动 w2 start
http://wproxy.org/whistle/install.html

（二）、安装证书

http://wproxy.org/whistle/webui/https.html

二、功能

（一）、快速入门

https://wproxy.org/whistle/quickstart.html

（二）、功能列表

https://wproxy.org/whistle/rules/index.html

（三）、常用功能举例

# 一、本地文件或文件路径替换功能 有点像谷歌的overrides功能 (overrides功能见https://www.jianshu.com/p/20b1276f63e6)
#https://www.zfb.com/test.html D:\1公司项目\ios\workspace\pay.html
#https://h5.baidu.com/joinclub/ D:\1公司项目\joinClub\workspace\

# 二、host映射和特定子路径的host映射
#10.0.203.99:3000 www.baidu.com
#10.0.203.99:3000 www.baidu.com/pay.html

# 三、请求转发 将制定的域名请求转发至另一个域名
# configapi.baidu.com configapi.google.com
#h5.baidu.com www.baidu.com

# 四、html css js文件注入
#https://www.baidu.com/ jsPrepend://https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.3.0
#https://www.baidu.com/ jsAppend://{initVconsole}

# 五、响应类型、响应数据及响应头修改
#https://clubopapi.baidu.com/web/game/config/get?web_id=0 resType://json
# tpl一般用来模拟jsonp请求
#https://clubopapi.baidu.com/web/game/config/get?web_id=0 tpl://{mockRes}
#https://clubopapi.baidu.com resHeaders://{resHeaders}
#https://www.baidu.com/ D:\1公司项目\indexapp\workspace\

# 六、修改响应参数(合并)
#https://clubopapi.baidu.com/web/game/config/get resMerge://(count=1000&value=2)
#https://clubopapi.baidu.com/web/game/config/get resMerge://{mockRes}


# 七、替换响应内容（常用）
#https://clubopapi.baidu.com/web/game/config/get resBody://{mockRes}

# 八、响应延迟
#https://clubopapi.baidu.com/web/game/config/get?web_id=0 resDelay://5000
#https://clubopapi.baidu.com/web/game/config/get?web_id=0 resSpeed://3


# 九、ua修改（虽然在浏览器调试工具中看到的还是原本的ua，但是实际请求时还是按照你更改的ua进行请求）
#https://www.baidu.com/ ua://{UA}

# 十、修改请求参数或内容(合并)
#https://clubopapi.baidu.com/web/game/config/get reqMerge://{reqMerge}
# 上述也可 按照如下 操作值的写法 https://wproxy.org/whistle/data.html
# https://clubopapi.baidu.com/web/game/config/get reqMerge://(web_id=1)

# 十一、替换请求内容 (post方法)
#http://test.iossign.baidu.com/down/limit/add reqBody://{reqBody}


# 十二、启用weinre
# www.baidu.com weinre://testInspect

上述变量值如下：

{
  "initVconsole": "// 初始化vConsole\n\nwindow.vConsole = new window.VConsole();",
  "UA": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1",
  "mockRes": "{\"inspect\":\"merge\",\"count\":4,\"data\":[{\"id\":1,\"name\":\"测试\",\"logo_url\":\"https://www.baidu.log.png\",\"web_id\":0}],\"errno\":\"0\"}",
  "resHeaders": "Access-Control-Allow-Origin:*",
  "reqMerge": "web_id:1\nname:params",
  "reqBody": "{\"limit\":100}\n"
}

三、推荐资料

1、利用whistle调试移动端页面
2、https://github.com/avwo/whistle/blob/master/README-zh_CN.md

2021年3月22更新 今天又发现一个http监测工具httpToolkit ，遗憾的是高级功能收费。

image.png