介绍

whistle(读音[ˈwɪsəl]，拼音[wēisǒu])基于 Node 实现的跨平台 web 调试代理工具，类似的工具有 Windows 平台上的 Fiddler，主要用于查看、修改 HTTP、HTTPS、Websocket 的请求、响应，也可以作为 HTTP 代理服务器使用，不同于 Fiddler 通过断点修改请求响应的方式，whistle 采用的是类似配置系统 hosts 的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过 Node 模块扩展功能

详细文档可以查看whistle

使用场景

whistle 作为一个非常强大的调试代理工具，基本上前端用的所有接口场景都可以通过 whistle 进行解决处理。

而且我认为 whistle 并不仅限于前端可以使用，同样后端人员也有很多的使用场景。

下面我列举一些内容并做介绍。

本地文件代理（类 Nginx 简单用法）

在开发过程中，有很多情况是需要开发人员在本地机器启一个 http 服务，代理到的目录下用于将本地文件使用 http 请求。

传统的做法会在本地启动一个 Nginx，创建配置文件*.conf，然后配置域名和代理路径，启动服务，修改本地 host。

whistle 的做法，只需要将请求代理至whistle（当然这一步如果已经做了就忽略）。

在 whistle 配置中加入一句类似 host 的配置，就可以直接通过访问进入到本地目录

www.homeapp.com file:///Users/yee.wang/Code/homeApp/dist

不同环境切换

正常开发过程中，每个团队都会需要在不同环境中切来切去，switchHost这个软件固然能解决很多人的问题，但 host 也同样有很多不足。

比如，在已经开启的页面中，切换 hosts 后并不能立马生效，因为浏览器是有 dns 的缓存的，当前域名已经有过解析后，并不会重新再去解析这一域名。当然这可以通过其他 Chrome 插件解决，但又多了一道步骤不是。

另外，在日常的 host 维护中，发现 host 会经常有变动，一旦有人对 host 有修改并不能迅速同步给所有团队开发人员。使用swichHost中的 remote 功能虽然可以解决这样的问题，但是同样需要不停的配置。

首先要在一个远端服务器中配置一个 request，能请求的到静态文本数据，然后在客户端配置这个静态地址和名称。一个环境就需要这样配置一次，开发、预发、测试、公共就需要这样配置 4 次。如果需要修改还需要去服务器进行修改，当然这可以通过一个 git+hook 的方式做到快速 CD，但只是维护一个 host 这样做显然很麻烦。

再看看whistle是如何解决呢，首先whistle是一个 node 项目，所以他可以在不全局安装的情况下使用npm run start的方式运行。其次，whistle的配置文件是可以在启动的时候指定目录的。

那么就可以分析得出，whistle的维护是完全可以放在 git 中进行的。当 host 有变动，只需要让团队的人重新拉一下项目就可以了。

对于 Tumax 团队，我们有使用一些自己的配置和开发的插件并维护在 gitlab 中。

gitlab 地址：http://repo.we.com/yee.wang/whistle

无侵入 mock 数据

对于 mock 数据的处理方式有太多办法，很难说清哪种方式是最好的。在这里我就大概讲一下我们团队的一些 mock 数据使用办法。

mock 数据我们这边会有两种：

动态 mock

所谓动态 mock，是指 mock 的数据返回是经过 mock.js 更具 config 或者 json schema 生成的。

这种也同样是最常用的，我们这边是使用 yapi 的方式生成 mock 数据。

如图，上面有一个未完成状态的接口，但接口的返回类型已经被定义。直接访问 yapi 提供的 mock 地址是可以得到返回结果。

该接口的真实地址可能是https://tumax.to8to.com/designer/model/fav-list
而 yapi 所提供的 mock 地址是http://yapi.tumax.we.com/mock/50/designer/model/fav-list

所以如果在正常情况下，会在该接口未完成的状态下将这个接口的地址改为 mock 地址，等接口完成后改为真是地址。

但是这就是一种侵入代码的方式，必须要在提测之前记得将地址修改过来。

而我们希望的是，就在代码中写真是的请求地址，而返回的内容却是 yapi 中提供的 mock 数据。

借助whistle，我只需要设置一行配置就可以完成上述功能。

^https://tumax.to8to.com/** http://yapi.tumax.we.com/mock/50/$1

甚至，我们可以单独对某个接口做 mock 数据

https://tumax.to8to.com/designer/model/fav-list http://yapi.tumax.we.com/mock/50/designer/model/fav-list

本地静态 mock

动态 mock 虽然能解决绝大多数的情况，但是还是有部分情况是无法解决的。比如…..断网。

因为某些不可抗拒的原因，在开发过程中，需要在无网络的情况下运行时，程序能否顺利请求到一些关键接口，继续运行不耽误开发呢。

在 tumax 项目中，我们在项目目录下有一个 mock 目录，mock 目录下会专门存放一些接口的返回数据，用于一些极端情况下调试某种特定的接口。

比如某份户型数据等等，而他的配置也很简单。

^http://flashapi.to8to.com/** file:///Users/yee.wang/Code/homeApp/mock/flashapi.to8to.com/$1

跨域问题

最常见的就是，跨域问题。

开发环境是非同源，线上环境却是同源的。为什么会这样我不知道，反正就是会这样。。。

此时后端认为开发环境返回的 Header 和线上如果不同，会对他们的维护带来困扰。

所以前端需要自己来解决这件事情。我知道看到这里，你们一定会有一大堆的办法，什么 Nginx，什么 Charles 等等。

我来介绍一下whistle是如何解决的：

*.to8to.com resHeaders://{Allow-Origin.json}

对于你要搞事情的域名，配置一条内容，让他把返回的 Header 中加入/替换 Access-Control-Allow-Origin: *，这再次请求就解决了以上问题。

给返回页面加入 JS

做过移动端的人应该都知道移动端的调试工作有多麻烦，前些年比较火的一个调试方式是在页面中引入vConsole

vConsole让页面出现一个绿色的按钮，展开后查看一些基本页面信息，我就不再此赘述。

当然对于Whistle还可以使用weinre直接在 PC 调试，但由于内容和此处无关，暂不描述，感兴趣可以移步利用 whistle 调试移动端页面

正常的我可以在代码中加入这一个库，然后使用，在提测时再注释掉。

但是通过whistle，同样的可以零侵入代码的进行调试，只需要配置：

m.baidu.com js://{vConsole.js}

这样就可以在返回的页面中直接注入一段 JS。甚至，如果感兴趣，你可以通过 JS 改掉 baidu 的 logo。

高级用法 - 解密插件

对于 Tumax 项目，我们的一些数据是经过crypto加密传输的，比如户型数据，模型数据等。

所以你看到的接口返回的数据就是，这样的：

如果此时，前端需要对某个接口进行调试，就变得非常非常不方便。

以前，都需要将返回的内容复制到我们内部做的一个解码器中查看。

想要开箱即用的使用postman，接口测试，这些都是不可能的事情。

那么，我们能否使用whistle来做请求中转，然后将得到的数据，在给某个指定的 Header 后，就直接返回解密好的数据呢？

答案是肯定的，对此我们专门开发一个whistle的插件：whistle.cryptojs。

只需要将在whistle的配置规则中加入

flashapi.to8to.com cryptojs://tumax

然后，在插件规则中配置对应的解密秘钥，和指定 Header 名，就可以对 tumax 的解密规则生效了。

而对于这一切繁复的配置，团队成员可以在零感知的情况下从 gitlab 中拉下来，开箱即用。

最终效果

总结

whistle 作为一个 node 开发的代理工具，在日常工作中已经可以解决我的全部代理需求，使用起来也非常便捷。

目前已经在 Tumax 团队中作为新人必装的一个工具。

希望我的分享能给各位同事带来帮助。