介绍
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 团队中作为新人必装的一个工具。
希望我的分享能给各位同事带来帮助。