01.whistle-用于实现跨平台web调试的代理工具

whistle，用于实现跨平台的web调试的代理工具，是基于Node实现的，它采用类似配置系统hosts的方法，可以用于查看、修改HTTP、HTTPS、Websocket的请求、响应，还可以作为HTTP代理服务器使用。在whistle里，一切操作都可以通过配置来实现。

whistle参考文档地址：http://wproxy.org/whistle/

以下为whistle的一些常用操作：

1.设置host

www.ifeng.com 127.0.0.1/127.0.0.1:8080
#or
127.0.0.1:8080 www.ifeng.com

释义：把www.ifeng.com的请求转发到本地/本地8080端口

2.本地替换

www.ifeng.com file://E:\xx\test
#or
www.ifeng.com file://E:\xx\test\index.html

释义：访问http://www.ifeng.com，或先尝试加载/E:\xx\test的文件，如果不存在，会加载E:\xx\test\index.html，如果没有对应的文件，则返回404

3.请求转发

www.ifeng.com www.aliexpress.com

释义：把www.ifeng.com域名下的请求都替换成对应的www.aliexpress.com的域名

4.注入HTML、JS、CSS

www.ifeng.com html://E:\xx\test\test.html
www.ifeng.com js://E:\xx\test\test.js
www.ifeng.com css://E:\xx\test\test.css

释义：所有www.ifeng.com域名下的请求，whistle都会根据响应类型，将处理好的文本注入到响应内容里面，如果是HTML请求，JS和CSS会分别自动加上script和style标签后，追加到内容后面

5.调试远程页面

利用whistle提供的weinre和log两个协议，实现修改远程页面DOM结构和自动捕获页面JS错误及console打印的信息，还可以在页面顶部或JS底部注入制定的脚本调试页面信息

weinre:  www.ifeng.com weinre://test
log:  www.ifeng.com log://{test.js}

6.设置手机代理

可以通过手机端，设置相关代理，进行小程序、APP等的调试。

使用示例

项目中真实域名的代理，配置如下：

http://test-whistle-page/queryData  http://127.0.0.1:8080/queryData
http://test-whistle-page  http://127.0.0.1:8080

以上配置的意思是：

1. 第一行配置服务端访问：如果在http://test-whistle-page域名下，访问了带queryData的接口，那么会把这个请求转发到127.0.0.1:8080服务器，并访问这台服务上的 http://127.0.0.1:8080/queryData接口，这里127.0.0.1:8080是使用的本地ip和端口号，可以修改成服务部署的Ngix等。
2. 第二行配置客户端访问，当访问到http://test-whistle-page这个域名，这个域名的相关请求会转发到本地启动的服务上，即可以通过这种代理的方法，访问测试/生产环境，并且在本地进行调试。这里的ip和端口号同①中服务器的配置。