前端代理工具之whistle介绍

枫荷
24 阅读1分钟

whistle

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

安装whistle

# 建议使用node 16 版本
 npm install -g whistle

启动

w2 start

安装chrome插件

image.png

配置插件代理

image.png

安装https证书

image.png

设置信任证书 image.png

配置代理

image.png

访问测试（www.baidu.com => bing）

image.png

rules配置

常见使用场景

排查线上问题

  1. 代理页面到本地
  2. api仍然使用服务器的

image.png

添加请求头

  1. 在values中添加请求头信息 image.png
  2. 在rules中使用vaules配置 image.png
  3. 查看结果（request header的改变只能在whistle控制台中查看，浏览器中并不能看到，因为请求是由浏览器先发出，再经过代理） image.png

修改responseHeader

  1. 在values中添加返回头信息

image.png 2. 在rules中使用

image.png 3. 查看结果（这里浏览器总可以直接看的，因为请求结果会先经过 whistle） image.png

修改请求参数

  1. 在values中添加配置 image.png
  2. 在rules中使用

image.png

  1. 在whistle中查看 image.png

修改返回值

  1. 在values中添加配置 image.png
  2. 在rules中使用 image.png
  3. 在浏览器中查看结果 image.png

参考文档

whistle

avatar
文章
阅读
粉丝