前端调试利器 - whistle代理工具的安装与使用

834 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

whistle介绍

官方文档

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

安装

1. 安装node

whistle支持v0.10.0以上版本的Node,为获取更好的性能,推荐安装最新版本的Node。

2. 全局安装whistle

命令行键入 npm install -g whistle

npm install  -g  whistle

2.1. 启动与关闭whistle

打开命令行工具,输入 w2 start ( w2 stop 为停止)

w2 start

浏览器输入地址 127.0.0.1:8899/,开启whistle界面

浏览器输入地址127.0.0.1:8899/

3. 安装SwitchyOmega浏览器插件,将浏览器请求代理到whistle

安装SwitchyOmega

proxy代理

访问一个页面,在切换到whistle的network 面板查看,若有请求,则说明代理成功

whistle-network

点击某个请求,右边可以看到请求的详细信息

whistle-operator

4. 安装证书,抓取HTTPS请求

官方文档

4.1. 下载证书

下载RootCA

注意:勾选enable HTTP/2 可能会有以下提示,意思当前node版本不支持http/2,需要下载最新版,到官网下载即可。

下载RootCAa错误

4.2. 安装证书

4.2.1. 电脑证书安装

双击下载的证书

证书安装

4.2.2. 浏览器证书安装

浏览器证书安装

4.2.3. 验证

代理

4.2.4. 苹果手机证书安装

苹果证书安装

4.2.5. 安卓手机证书安装

由于安卓机型较多,不同机型安装可能存在差异,但是大体上都是:

  1. 链接局域网,并代理到whistle
  2. 扫码下载证书(部分浏览器可能无法下载,若无法下载,则换其他浏览器(目前测试过UC、QQ是可以的))
  3. 安装证书

安卓证书安装

使用

环境代理

使用代理来切换环境

规则重复时,越上面的规则优先级越高

image-20211011142016131

切换到network,查看请求的ServerIP是否正确(ServerIP查看是否代理到正确环境的IP)

ServerIP

线上文件代理到本地

对调试本地跑不起来的老项目和线上页面有很大的帮助

image-20211011144106619

更多使用方法可参考官方文档

log 和 weinre对调试H5页面很有用(必读)

image-20211011143026763