Whistle 让你满意的代理工具

·  阅读 1023
Whistle 让你满意的代理工具

一、开发痛点

当我选择代理工具的时候,比较吸引的我是「代理能否支持 https 请求」「配置项是否简单方便」「能否满足我的代理需求」「界面是否符合我的审美」。如果你有这些考虑,那就选择 Whistle 吧,不会让你失望的。

二、Whistle 简介

Whistle 是一个支持 Windows、Mac、Linux跨平台的抓包工具,可以配置代理、抓取 https 请求、模拟 mock 接口数据、请求重定向、修改请求头响应头,修改 GET 请求的参数、页面中注入 js、css 等功能。目前还在不断迭代更新,维护者对社区的各种问题都能及时响应。界面如下:

image.png

三、whistle 的安装以及启动

  • 安装 node.js: 如果没有,自行安装
  • 全局安装 whistle: npm install -g whistle
  • 执行命令 whistle start 或者 w2 start

截屏2021-09-03 下午4.56.48.png

四、安装 whistle 代理(SwitchyOmega chrome 谷歌扩展程序)

  • 访问 链接,点击“添加至 CHROME”
  • 按照提示配置代理项

Tips: 情景模式名字可以自定义、代理服务器参数如图、不代理的地址列表清空、配置完点击左侧“应用选项”

截屏2021-09-03 下午5.05.jpg

  • 选中配置完的代理:点击 chrome 右上角的圆圈图标,切换成 whistle

截屏2021-09-03 下午5.08.36.png

  • 浏览器输入 local.whistlejs.com,能打开 whistle 的界面,说明 SwitchyOmega 的配置没有问题

五、支持抓取 https 的配置

  • 电脑端需要安装证书,选择上方导航 https 会出现如下界面,勾选下面两项,点击 Download RootCA 下载证书,添加证书,设置电脑始终信任状态
  • 添加证书遇到了问题,比如证书不被信任,解决办法:进入「钥匙串访问」->  找到该证书 ->  双击或者右键「显示简介」 -> 点开「信任」 -> 选择「始终信任」

WeChate7944b8b3e13ee7d52c2084464941962.png

六、常用的配置项

1 配 host

  • 将 baidu.com 映射到 127.0.0.1,你访问 www.baidu.com ,请求的是本地的 127.0.0.1
  • 也可以带上端口
  • 也可以是指定的路径

WeChat6efa19007101323c0d38ad44d50e740c.png

2 重定向

www.baidu.com/ 重定向到 www.qq.com/

WeChat0c12c0e8c07384e3630e97c0a9fca184.png

3 替换请求的数据

  • 替换成本地数据:例如我们想本地模拟接口数据等。
  • 可以直接替换为本地 json 文件

截屏2021-09-07 下午3.40.40.png

  • 可以放在 whistle 自带的 Values 里

如果不是 .json 结尾,whistle 不会在 Response Headers 里自动添加 content-type: application/json; charset=utf-8,请使用 .json 结尾的文件

截屏2021-09-07 下午3.31.39.png

截屏2021-09-07 下午3.31.51.png

4 修改返回状态码

截屏2021-09-07 下午3.45.12.png

5 修改返回状态以及数据

截屏2021-09-07 下午3.48.21.png

6 替换线上文件或者url

截屏2021-09-07 下午3.41.40.png

截屏2021-09-07 下午3.46.37.png

7 修改请求、响应的头部信息

可以利用 whistle 自带的 Values 模拟请求、响应的头部信息。响应头关键字为 resHeaders,请求头关键字为 reqHeaders。

截屏2021-09-07 下午4.00.57.png

截屏2021-09-07 下午4.01.07.png

8 其它

还有很多功能、例如插入js、处理 options 请求、移动端抓包等等,社区一直在维护,对于出现的问题,也积极回复,try it and love it。

分类:
前端
标签:
分类:
前端
标签: