Whistle 应用文档

跳跳虎的小仓库
688 阅读4分钟

一、背景

  • 背景：客户端各种改配置步骤繁琐，通过简单配置 whistle 一劳永逸
  • 技术定位：初级/中级/高级
  • 目标群体：前端开发
  • 技术应用场景：请求网页直接代理到本地，mock数据，修改接口状态，注入内容
  • 整体思路：

二、操作步骤

2.1 开发前的准备工作

安装 whistle

$ npm install -g whistle

启动 whistle

  • 启动whistle:
$ w2 start
  • 重启whsitle:
$ w2 restart
  • 停止whistle:
$ w2 stop

关闭 whistle 服务后关闭本机全局代理

配置代理

Whistle v2.9.14 版本开始支持通过命令行 w2 proxy ... 设置系统的全局代理，以及 w2 ca ... 安装系统根证书（目前只支持 Windows 和 Mac 平台）

一般执行 w2 proxy 或 w2 ca 即可，Mac 平台上可能要输入开机密码或指纹

w2 proxy

设置系统全局代理命令，目前只支持 Mac 和 Windows 系统：

  1. 设置本机默认 Whistle 实例的代理：
 w2 proxy

设置系统代理 127.0.0.1:PORT，PORT 为当前系统运行的 Whistle 端口（如果没有取默认值 8899）

  1. 指定端口：
 w2 proxy 8888

设置系统代理 127.0.0.1:8888

  1. 指定域名（或IP）及端口：
 w2 proxy xxx.domain.com:8888

设置系统代理 xxx.domain.com:8888，xxx.domain.com 可为域名或 IP

  1. 指定不代理域名1：
 w2 proxy -x "www.test.com, www.abc.com, *.xxx.com"

设置默认代理，并设置不代理请求域名（www.test.com, www.abc.com, *.xxx.com）

  1. 指定不代理域名2：
 w2 proxy xxx.domain.com:8888 -x "www.test.com, www.abc.com, *.xxx.com"

设置系统代理 xxx.domain.com:8888，xxx.domain.com 可为域名或 IP，并设置不代理请求域名（www.test.com, www.abc.com, *.xxx.com）

  1. 关闭代理：
 w2 proxy off

注意，Mac 系统需要输入开机密码：

配置信息

代理服务器：127.0.0.1 (如果部署在远程服务器或虚拟机上，改成对应服务器或虚拟机的ip即可)

  1. 默认端口：8899 (如果端口被占用，可以在启动时通过 -p 来指定新的端口，更多信息可以通过执行命令行 w2 help (v0.7.0及以上版本也可以使用w2 help) 查看)

勾选上 对所有协议均使用相同的代理服务器

  1. Windows: 菜单 > 设置 > 网络和Internet > 代理

  1. Mac: 系统偏好设置 > 网络 > 高级 > 代理 > 网页代理(HTTP) 和 安全网页代理(HTTPS)

注意设置完以后返回上一层点击应用

安装根证书

安装证书请参考文档: wproxy.org/whistle/web…

2.2 进入开发阶段

  • 设置新规则，右侧内容添加 .eeo.cn/client localhost:8000/client（意思是访问https://.eeo.cn域名时代理到本地起的项目中）

    • **.eeo.im/client/lms localhost:8000/client/lms
    • **.eeo.im/dev-server localhost:8000/dev-server
    • **.eeo.im/app wdevlt001.eeo.im/lms/app
    • **.eeo.im/client log://

注意修改完成保存应用规则 （mac command + s, win ctrl + s）

  • 客户端显示

三、线上调试bug实战

Mac PC

3.1 开启本地项目，无关环境

客户端使用 debug 版本，需要屏蔽掉客户端本身的代理

3.2 开启 whistle，设置代理规则

以线上调试作业为例子，劫持线上地址到我本地开启的项目地址上

3.3 开始调试

可以打断点或者添加log，可以通过 whistle 本身的 log 查看，也可通过 127.0.0.1:7777 查看 log 和断点

移动端配置

  1. 计算机开启 whistle
  2. 计算机本地开启项目
  3. 计算机设备需要和移动设备处于同一局域网。受运维限制影响，我们的 eeo 网络并不能访问计算机设备，可以通过连接有线然后开启热点让手机和计算机处于同一局域网内
  4. 手机连接 wifi 热点，设置代理，ios 直接点击无线网，安卓长按选择修改网络。代理设置为计算机的ip地址

  1. 访问 rootca.pro 下载证书
  2. 按提示安装证书（或者通过 whistle控制台的二维码扫码安装，iOS安装根证书需要到连接远程服务器进行验证，需要暂时把https拦截功能关掉）
  3. ios通过 设置-通用-关于本机-证书信任设置 信任 whistle 的证书。安卓通过文件管理器找到下载的证书文件，点击按步骤安装，有的需要在设置中的安全选项中安装
  4. 打开 https 拦截功能，此时访问客户端，之前设置好的 rules 就能生效了

我们可以随意切换客户端环境，只要域名拦截正确，都可以直接代理到本地进行调试

最后，推荐安装 whistle inspect 插件，当 出现如图所示的 vConsole 时表示我们代理成功，可以通过 vConsole 查看日志输入已经 network 相关的信息

配置形如：

参考文章：

whistle 官方文档

whistle inspect 插件

avatar
文章
阅读
粉丝