在进行前端开发过程中,我们常常需要对一些接口进行处理,以及当后端接口没有弄好需要我们mock一些假数据,针对这些场景,我们就可以使用 whistle 来解决。
首先,我们要知道能满足我们需求的工具有很多,例如:charles、fiddler等。但是这些工具有个非常不友好的点,那就是它们需要 付费使用,当然我们一般都是通过一些方法,来免费使用的。这里就不说了。
安装whistle
首先我们要确保我们有安装node。
node -v
出现以下内容,就说明我们本地有安装node。
反之,我们就需要对node进行安装
1. Windows或Mac系统,访问 https://nodejs.org/,安装 LTS版本的Node,默认安装即可。
2. Linux下推荐使用源码安装: 从 Node官网下载最新版的 Source Code(或者用wget命令下载),解压文件(tar -xzvf node-vx.y.z.tar.gz)后进入解压后的根目录(node-vx.y.z),依次执行./configure、./make和./make install。
tips:(Windows系统可能需要重新打开cmd)
使用包管理器安装
我们这里以npm为例,当然如果有安装yarn、pnpm等的话可以使用其他的包管理器进行安装。
npm install -g whistle
当我们使用 w2 help能有正常的信息展示就说明了,whistle安装成功了。
whistle命令
启动whistle:
$ w2 start
Tips: 如果要防止其他人访问,可以在启动时加上登录用户名和密码 -n name -w password。
重启whsitle:
$ w2 restart
停止whistle:
$ w2 stop
修改 whistle 监听的端口,默认为 8899
w2 start -p port
开启全局代理 (适用于无法安装Proxy SwitchyOmega等浏览器插件的朋友)
w2 proxy
关闭全局代理
w2 proxy off
配置whistle工作环境
浏览器插件安装Proxy SwitchyOmega
Tips: 若无法打开「chrome 应用商店」的朋友,可以使用上面的全局代理的方式进行启动whistle。
对插件进行配置
安装根证书(捕获HTTPS请求)
正常启动后使用本地端口打开即可
这里以mac为例
找到证书下载地方,点击进行安装。
打开证书管理界面,找到带有 whistle 的字样的证书并对其进行「始终信任」
简单配置规则进行实践
设置响应头,临时允许跨域(用于解决后端暂未配置cors的时候,临时调试)
# 自动添加cors头 可以在服务器没有配置cors的时候,进行临时调试
https://www.baidu.com/ resCors://{resCors.json}
对js增加一些调试信息(推荐使用VConsole,对H5、小程序以及移动端进行调试)
# 对一些页面预追加VConsole,便于移动端进行调试。
https://www.baidu.com/ jsPrepend://{log.js}
# https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js 将这个js保存然后
# 初始化VConsole
new VConsole();
手机端等的环境进行调试,可能就需要安装证书了。我们点击右上角的online 查看本地的 IPv4
然后,找到和当前电脑处于同一个局域网Wi-Fi的手机,对wifi进行配置
代理方式:手动
代理服务地址:10.*.*.*(上述代理的 IPv4)
代理端口:8899(重要,重要,重要,此处代理的是whistle的启动端口)
然后手机访问 rootca.pro 下载证书,进行安装
ios 下:设置 => 通用 => 证书信任设置,打开刚刚安装的证书的开关
安卓: 设置=> 搜索证书 => 从存储设备安装证书 =〉进行安装即可
mock响应json数据
# mock测试需要的一些接口实际还未好但是开发确需要的假数据
https://www.baidu.com/api resBody://{res.json}
线上js资源使用本地js进行替换
# a.js => b.js 其中b.js 可以是 http://localhost:4001/output/module/* 等形式
/passport.baidu.com/passApi/js/ {log.js}
当然,whistle还有很多调试的用法,这里就不一一列举了。