最近使用了一个代替charles简单易用的node环境开源工具whistle，发现简直太强大了，基本上覆盖抓包调试工具可以做的所有事情（官方说明），很多灵活需求都可以自定义配置。但是本文还是以入门为主，给大家介绍如何用whistle完成charles一样的前端代理和mock的功能，下面来给大家一一讲解。
1 安装
npm install -g whistle
如果安装过慢可以使用国内源：
npm install whistle -g --registry=https://registry.npm.taobao.org
2 启动
w2 start
3 配置代理
下图为本机联调环境，为了使前端页面的请求可以由本地“前端文件服务返回”，所以需要通过switchOmega浏览器插件配置转发表，先把特定域名转发到whistle代理进程中，whistle代理进程判断是否为前端静态文件请求，如果是就转发到本地所起的前端服务。如果是后端API的请求，那么由本机的网络进程再访问host和DNS服务获取IP，之后访问外网请求后端。但是如果涉及到前端mock数据时，可以在whistle代理进程中配置对于API接口的代理规则，代理到本地的一个json文件，这样后端访问就可以在本机环境中直接返回想要设定的数据了。本部分先来讲怎样代理前端静态文件。
3.1 配置SwitchOmega 关于其他的浏览器代理方式可以参考whistle官方文配置代理部分。 安装完后，右键点击图标，再选择“选项”，会跳到配置页面。
添加情景模式whistle：
配置auto switch规则：
其中条件设置可以参考官方配置文档设置成域名通配符：
*.fullstackcoding.cn
运行时，选择“自动切换”模式：
3.2 配置whistle 启动完whistle以后，访问 http://127.0.0.1:8899/ 即可看到whistle的配置网页:
输入我们想要配置的规则名后，即可开始配置规则：
这里可以参考whistle官网中的配置方式，配置规则兼容系统hosts配置方式，左边ip，右边域名。但是whistle默认的配置方式是从左到右，命中了左边的pattern，请求就会被转发到operatorURI，为了使逻辑简单，建议出了在此配置host外，都按照从左到右的顺序来配置：
pattern operatorURI
而除了host配置以外，最常用的就是正则形式的pattern，为了讲清楚正则如何匹配，这里有必要再复习一下常用正则符号，想查看更多请访问MDN的相关开发者资料。
| 常用正则符号 | 释义 |
|---|---|
| \ | 在非特殊字符之前的反斜杠表示下一个字符是特殊字符，不能按照字面理解。例如，前面没有 "" 的 "b" 通常匹配小写字母 "b"，即字符会被作为字面理解，无论它出现在哪里。但如果前面加了 ""，它将不再匹配任何字符，而是表示一个字符边界。在特殊字符之前的反斜杠表示下一个字符不是特殊字符，应该按照字面理解。详情请参阅下文中的 "转义（Escaping）" 部分。 |
| 匹配输入的开始。 | |
| $ | 匹配输入的结束。 |
| (x) | 它会匹配 'x' 并且记住匹配项。 |
| . | （小数点）默认匹配除换行符之外的任何单个字符。 |
| * | 匹配前一个表达式 0 次或多次。 |
| ? | 匹配前面一个表达式 0 次或者 1 次。 |
| [^xyz] | 一个反向字符集。也就是说， 它匹配任何没有包含在方括号中的字符。你可以使用破折号（-）来指定一个字符范围。任何普通字符在这里都是起作用的。 |
| \d | 匹配一个数字。等价于[0-9]。 |
下面我们来用这些正则符号来写一个匹配模式pattern，比如 test1.fullstackcoding.cn/reactapp 这个请求，其中test后面是一个数字1～4，那么我们就可以通过以下匹配规则来匹配：
/^https:\/\/test\d\.fullstackcoding\.cn\/reactapp\/$/ http://localhost:8081/
如果需要把 test1.fullstackcoding.cn/reactapp/cs… 这个请求进行代理，其中reactapp可能没有这个中间路径，并且要把css这个静态文件夹的路径和后面的文件名带入到转发后的url之中，可以按照如下的匹配规则来进行匹配，operatorURI中的$2即为css这个静态文件夹的路径和后面的文件名，$1为第一个(reactapp/)这个括号捕获的，$0为整个表达式的内容：
/^https:\/\/test\d\.fullstackcoding\.cn\/(reactapp\/)?((?:js|css|images)\/(?:.*))/ http://localhost:8081/$2
如果想要实现charles中的Preserve host in header fields功能，需要在规则后面加上下面改写请求头的协议：
reqHeaders://`host=${url.host}`
这样就完成了前端请求的转发。
4 mock数据 最后mock数据已经非常简单了，只要把想要返回的json用记事本保存成txt文件，然后在whistle的规则里加上这样一条即可，如果想要区分每页的内容，也可以区分页码多加几个规则：
/.*\/apiname\?size=20&index=0&reqId=(.*)$/ file:///Users/dongyang/Desktop/test.txt
