墨滴

sunilwang

V1

2022/09/09阅读：454主题：橙心

whistle非常好用的代理工具

whistle

作为一个前端程序员，开发的过程一定用到代理工具，但是在使用过程中，会碰到以下几个问题：

  • 开发一个需求或者重构一个项目的时候往往面对的是来自四面八方的服务方，每个服务方都提供自己的服务接入地址和端口以及环境等等，但是往往对应的域名都是一样的，调试开发的时候需要一个工具来统一调度这些环境。

  • 从开发到测试，在开发联调各个阶段都需要使用代理，存在各种环境变量的不同，包括系统的不同，代理工具不同，代理规则不同，如何统一这些代理规则，而不是各自维护。

为了解决大家在代理上碰到的问题，我在尝试过 Fiddler，Charles，whistle 等各种代理工具之后，给大家介绍一下，我觉得比较好的一款代理工具------whistle

Whistle 相关介绍

1. 它是什么

Whistle 基于 Node 实现的跨平台 web 调试代理工具，主要用于查看、修改 HTTP、HTTPS、Websocket 的请求、响应，也可以作为 HTTP 代理服务器使用，whistle 采用的是类似配置系统 hosts 的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过 Node 模块扩展功能。类似的工具有 Fiddler（据说很吃内存） 和 Charles（付费）。

2. 特点

  • 跨平台
  • 全配置
  • 配置共享
  • 对于开发者（尤其是前端开发）更友好（可以自定义插件）
  • 开源免费

3. 基本功能

  • 查看 HTTP、HTTPS 请求响应内容
  • 查看 WebSocket、Socket 收发的帧数据
  • 设置请求 hosts、上游 http/socks 代理
  • 修改请求 url、方法、头部、内容
  • 修改响应状态码、头部、内容，并支持本地替换
  • 修改 WebSocket 或 Socket 收发的帧数据
  • 内置调试移动端页面的 weinre 和 log
  • 作为 HTTP 代理或反向代理
  • 支持用 Node 编写插件扩展功能
功能脑图
功能脑图

Whistle 原理

1. 启动一个代理服务器

2. 在代理服务器上截获请求报文

3. 根据自定义规则响应

原理图
原理图

Whistle 安装

1. whistle 的安装【前置依赖——nodejs】

安装完Node后，执行命令——node -v，查看当前Node版本【如果能正常输出Node的版本号，表示Node已安装成功】

node安装
node安装

2. 再安装 whistle

执行npm install -g whistle【Mac 或 Linux 的非 root 用户需要在命令行前面加 sudo】

whistle安装完成后，执行命令 whistle help 或 w2 help，查看whistle的帮助信息【如果能正常输出whistle的帮助信息，表示whistle已安装成功】

whistle安装
whistle安装

3. whistle 的启动

  • 启动：w2 start或者whistle start
  • 停止：w2 stop 或者whistle stop
  • 运行状态：w2 status
  • 重启：w2 restart

4. 安装 chrome 代理插件：SwitchyOmega

chrome代理
chrome代理

5. 手机连接代理（PC 可跳过）

  1. chrome 输入：http://127.0.0.1:8899/#network
  2. 点击右上角 Online 按钮，将 IPv4 和 Port 分别设置成手机 wifi 中的代理主机名和端口

6. 安装 https 证书：勾选 Capture TUNNEL CONNECTs 选项

  1. Mac 安装证书后，需要手动信任证书，步骤如下
安装证书
安装证书
  1. 打开证书管理界面，找到带有 whistle 的字样的证书，如果有多个又不确定最新安装的是哪个，可以全部删除后重新安装
安装
安装
  1. 双击证书后，点击 Trust 左边展开选项，红色部分选择 Always Trust （总是信任），点击左上角关闭当前界面会要求输入密码；输入密码后可 以看到证书上面红色的图标 x 不见了，到这一步说明完成证书安装。
信任
信任

7. IOS

  1. 手机设置代理后，Safari 地址栏输入 rootca.pro，按提示安装证书（或者通过 whistle 控制台的二维码扫码安装，iOS 安装根证书需要到连接远程服务器进行验证，需要暂时把 Https 拦截功能关掉）

  2. iOS 10.3 之后需要手动信任自定义根证书，设置路径：Settings > General > About > Certificate Trust Testings

8. 安卓：点击工具栏的 https，扫码安装证书

安卓证书
安卓证书

Whistle 使用场景

场景 1：绑定 host

10.167.194.83 unionhy.58.com
10.167.180.5 unionhy.58.com

起到修改 host 配置文件的作用，但是又避免了 DNS 缓存的问题，可以立即生效，实际使用时可以配置多个规则，做到一键切换环境。

场景 2：模拟 https

https://m.58.com http://localhost:8080

访问线上的 https，实际访问的是本地的 http 服务，轻松本地模拟 https

场景 3：接口假数据 mock

/dataPackage/getPackageList/ tpl://{staffPost.json}

模拟假数据，在本地提前联调

场景 4：修改状态码

/dataPackage/getPackageList/ statusCode://502
/dataPackage/getPackageList/ statusCode://404

模拟各种状态码，方便做异常处理的调试

场景 5：往 html 中插入脚本或者样式

www.baidu.com  jsPrepend://{vConsole.min.js}
www.baidu.com  jsPrepend://{vConsole.js}
www.baidu.com  log://

m.baidu.com  jsPrepend://{vConsole.min.js}
m.baidu.com  jsPrepend://{vConsole.js}
m.baidu.com  log://

whistle.inspect 插件，更方便使用 vConsole 和 eruda。

在调试解决线上问题是往往插入一些调试代码就可以快速的定位解决问题，甚至可以插入一些类似 vConsole 这样的调试工具，对于移动端的开发特别有帮助。也可以直接使用

场景 6：重定向

https://baidu.com redirect://weibo.com/

重定向，移动端开发的时候我们想在端上看一个页面，但是没有入口，就可以用重定向某个页面来实现查看指定网页

场景 7：append 或者替换返回内容

# 说明：会把内容 append 到请求后面
https://j1.58cdn.com.cn/lbg/unionhy/css/chunk-vendors.e6a3bed3.css resAppend://{test.css}

# 说明：完全替换请求内容
https://j1.58cdn.com.cn/lbg/unionhy/css/chunk-vendors.e6a3bed3.css resBody://{test.css}

# 说明：将线上的带有 hash 的资源替换成本地开发生成的文件
/j1.58cdn.com.cn/lbg/unionhy/css/chunk-vendors.*.css/ /Users/a58/Desktop/code58/jiazheng-business/dist/css/AgentListView.css

场景 8：请求改写与接口 mock

https://unionhy.58.com/dataPackage/getPackageList ua://{wxua}

请求改写与接口mock，接口 mock 可以在后端接口还没有开发完成的时候进行，做到前后端并行开发 改写请求的 ua 模拟微信环境

Whistle 附属小功能

1. url 转换成二维码

  1. 我们开发的时候，有没有过，每次手机要访问某个地址，都要找草料二维码，但是在 Whistle 里面就自带这个功能。
  2. 路径：Network----Tools----QRCode
code
code

2. JSON 转换

  1. 我们开发的时候，后端有时候会返回压缩之后的 json，不方便我们查看层级，如果每次去搜索在线解压 json，是很麻烦的，但是在 Whistle 里面也自带这个功能。
  2. 路径：Network----Tools----JSONView
json
json

3. 图片转换 base64

  1. 我们开发的时候，一些小的图片有时候会用 base64 去展示，如果每次搜索在线转换，是很麻烦的事情，但是在 Whistle 里面依然自带这个功能。
  2. 路径：Network----Tools----Base64
img
img

总结

whistle 的功能很完备，足够满足日常的开发工作，你也可以自己定制 plugin 来满足一些特别的需求，对于开发人员很友好。而且还有很多有意思的小功能，集成在了这里面，是非常便于我们开发和测试的，大家可以使用起来，多多探索新功能。

其他类似工具

  • Wireshark - 网络数据包分析软件，网络协议栈的各个层的数据都可以很方便地查看。
  • Termshark - 「终端版」的 Wireshark
  • Charles - 一款老牌 HTTP/HTTPS 抓包调试工具
  • Fiddler - 又一款免费的 Web 调试工具
  • mitmproxy - 一款开源免费的交互式的 HTTPS 代理

参考文档

  1. whistle 官方文档[1]
  2. Weinre 入门手册[2]
  3. whistle 使用实践[3]
  4. Whistle 配置过程践[4]
  5. 一个更高级的 Resource Override[5]
  6. web 抓包与 debug 利器[6]
  7. whistle.vase[7]
  8. mock.js[8]
作者简介

郭晓慧：慧慧子，认真生活，热爱生活

参考资料

[1]

whistle 官方文档: https://wproxy.org/whistle/

 [2]

Weinre 入门手册: https://github.com/nupthale/weinre

 [3]

whistle 使用实践: https://aotu.io/notes/2017/08/29/an-introduction-to-whistle/index.html

 [4]

Whistle 配置过程践: http://iwiki.58corp.com/wiki/lbg/view/%E9%83%A8%E9%97%A8/LBGFE/%E5%B8%B8%E7%94%A8%E6%96%87%E6%A1%A3/%E5%B7%A5%E5%85%B7%E7%B1%BB/whistle%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3/

 [5]

一个更高级的 Resource Override: https://toutiao.io/posts/ez77oq/preview

 [6]

web 抓包与 debug 利器: https://juejin.im/post/6844903721730572302

 [7]

whistle.vase: https://github.com/whistle-plugins/whistle.vase

 [8]

mock.js: https://github.com/nuysoft/Mock

分类：

前端

标签：

工具介绍

作者介绍

sunilwang
V1