使用场景
在日常开发中，往往会碰到许多在真机上才会出现的问题，在测试环境尚且可以通过发布代码解决，遇到线上问题时，怎么去快速定位问题调试代码呢？这里推荐调试神器whistle，有了神器，你可以：
- 在电脑本地编码，手机上直接看页面效果，无需发布到服务器，调试效率up！up！up！
- 可在微信及浏览器或其他允许代理的app中调试h5页面，通过代理模拟线上请求环境，提前进行生产验证，无需等前端发布。
- 可以抓包生产返回的数据，定位问题
- （其他暂未发掘的功能，如有补充，评论区讨论哈...）
使用步骤
whistle 安装：
Node安装成功后，执行如下npm命令安装whistle
sudo npm install -g whistle
whistle 启动：
whistle start
然后会自动生成代理地址和端口。
访问 http://127.0.0.1:8899/#rules 可以进入规则配置页。
网络代理设置
ios 手机设置
WI-FI选择
手机和电脑需要连接同一个网段下的wifi，才支持代理测试
https 证书信任
进入 whistle 管理台，点击头部 https 按钮，选中 Capture TUNNEL CONNECTs， Enable HTTP/2，相机扫码打开链接下载证书（如果扫码不行就直接下载了再传到手机，ios下需要隔空投送才能打开证书安装）。
先设置-通用-描述文件与设备管理，安装证书。
再选择通用-关于本机-证书信任设置，信任 whistle 证书。
以上是ios的设置，安卓也类似，需要安装证书，信任证书，打开开发者调试。
pc端设置
mac下，系统偏好设置-网络-wifi-高级-代理-网页代理，填写网络代理服务器：127.0.0.1，端口：8899，点击好，点击应用即可。
然后就可以配置whsitle规则，使用测试环境的链接进行代理本地的开发代码，可解决本地不能登录测试环境的问题
代理设置
手机连接和电脑一样的wifi，将wifi设置手动代理为 whistle 启动时显示的 ip 和 端口。
whistle 规则设置
将 whistle 规则配置为代理的域名指向本地开发 ip 和端口。比如访问 https://test.whistle.com/s/home/ 时代理到本地开发环境http://0.0.0.0:5000/ 配置如下：
# 配置 host
https://test.whistle.com/s/home/ http://0.0.0.0:5000/
# 配置资源
/test.whistle.com\/js\/(.*)\.(.*)/ http://0.0.0.0:5000/js/$1.$2
具体参考匹配原则 。
最后
最后可以愉快的在本地进行开发，手机真机上快速显示效果啦。
Weinre
weinre 是一个强大的移动端调试工具，whistle 已经将它集成在内了。通过它我们可以调试各种样式真机兼容问题。
新建 Values weinre如下，key 可以为空。
再新建规则
test.whistle.com weinre://test
选择 test 匹配，打开新页。
刷新手机页面，这时就看到 html 调试页面。
