前言
whistle是一款用Node实现的跨平台的Web调试代理工具，支持查看修改http(s)、Websocket连接的请求和响应内容。
whistle继承了Fiddler、Charle的一些优秀设计(如Fiddler请求数据的展示界面)，这两者分别是Windows、macOS平台的优秀代理工具。但whistle不是Fiddler、Charles的复制品，whistle有自己独特丰富的功能，如日志系统log、移动调试工具weinre、插件机制等。whistle也对操作请求和响应的方式做了改进，通过扩展系统hosts的配置方式及匹配方式，同时支持域名、正则和路径的匹配方式，让所有请求和响应的操作都可以通过类似hosts的配置方式实现，最新版whistle更是支持带端口号的host配置。不仅如此，开发者也可以通过whistle的插件扩展实现自身的个性化功能。实践证明这种方式使用起来方便，用户体验非常好。
安装&运行
1.安装Node
2.安装whistle
3.Chrome 插件：
whistle for Chrome、proxyOmega...
附：「whistle安装和基础使用-简版（windows环境）」<—该文档主要是给产品自助安装whistle的教程
基础功能
- Network(请求列表页面)：查看请求响应的详细信息及请求列表的Timeline
- Rules(操作规则配置界面)：配置规则
- Values(存放KeyValue的系统)：配置key-value的数据，在Rules里面配置可以通过{key}获取
- Composer(构造请求)：用来重发请求/构造请求，可以自定义请求的url/请求方法/请求头/请求内容
- Weinre(weinre列表)：集成weinre的功能，用户只需通过简单配置(pattern weinre://id)即可使用
- Https(设置Https及根证书)：用来下载根证书、隐藏connect类型的请求、开启Https拦截功能
- Online(在线状态及服务器信息):运行的Node版本、whistle的端口号及IP(方便移动端配置代理)
常用功能
- 绑定host
# 相当于浏览器层的host文件，如果找不到再去查找本机的host文件
1.1.1.1 m.baidu.com
- 替换请求
# 请求百度的时候会返回京东的页面内容
https://m.baidu.com https://wq.jd.com/
- 修改返回码
# 使 请求返回 404
m.baidu.com statusCode://404
- 往 html 插入样式
# 在网页里以 style 标签的形式插入
https://wq.jd.com css://{test.css}
- 修改url参数
# 在请求后面加上/替换参数
m.baidu.com urlParams://(a=1)
- 修改referer
# 修改referer(修改referer快捷方法)
wqitem.jd.com referer://https://wqsou.jd.com/
- 本地替换jsonp
##一般可用于mock jsonp的请求，tpl内置了一个简单的模板引擎
/\.jsonp/i tpl://{test.json}
#test.json：{callback}({ec: 0})
- 文本类请求 append 内容、替换返回内容
# 会把内容 append 到请求后面
style.css resAppend://{myAppend.css}
# 说明：完全替换请求内容
style.css resBody://{myResBody.css}
- 禁用缓存
# 禁用缓存
wq.jd.com disable://cache
移动端调试
相较于PC侧，在移动端调试网页，主要会遇到以下三个问题：
1.没有Console，无法查看页面的js错误及通过 console.xxx 输出的调试日志
2.无法查看、修改页面的DOM结构及样式
3.无法debug
有线调试
利用whistle调试
LOG
利用whistle的log功能查看页面的js错误及通过 console.xxx 输出的调试日志
weinre
利用whistle的weinre功能查看、修改页面的DOM结构及其样式
1.whistle集成了weinre的功能，只需配置一条规则即可通过在pc上通过weinre修改网页的DOM结构及其样式：
2.在whistle的weinre下打开
vConsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板。
特性 查看 console 日志 查看网络请求 查看页面 element 结构 查看 Cookies 和 localStorage 手动执行 JS 命令行 自定义插件
Github: github.com/Tencent/vCo…
体验地址： wechatfe.github.io/vconsole/de…
1.利用whistle的插入js功能导入vConsole
2.在whistle的Values配置的key-value里面填入脚本
3.看看效果
###推荐方案
主vConsole + Log 辅Weinre
能在whisle上查看log，能在手机上看到log和dom结构等 如果需要更改dom结构等，可以考虑用Weinre
