浏览器抓包和代理工具

扶摇而上
266 阅读2分钟

在前后端分离的背景下，前端本地没有服务端环境和代码，很多时候前端调试接口时不是很方便，通过抓包的方式在开发时对于某些场景可以更方便的调试

whistle抓包工具

官网

  1. 使用npm全局安装
npm install -g whistle

2. 启动whistle

w2 start

如果成功启动应该是这样

image.png

  1. 接下来我们访问http://127.0.0.1:8899/ ，就能看到whistle的可视化界面

image.png

  • network是网络请求监控页面，在这里可以看到所有请求
  • rules是配置规则页面，可以配置拦截请求或响应的规则
  • 其他有兴趣可以自行探索
  1. 如果需要监控https请求，需要安装证书
  • 点击https

image.png

  • 勾选第一个选项并点击二维码下载证书

1739341469768.png

  • 安装时一定要选择“受信任的根证书颁发机构”

1739341555969.png

1739341588043.png

  • 安装完成后，重启whistle
w2 restart

到这里就完成了第一步whistle的安装。接下来我们要将页面的请求代理到whistle，以chrome浏览器为例，我们使用Proxy SwitchyOmega插件

SwitchyOmega代理工具

  1. 进入chrome插件商店安装完成后看到如下界面

image.png

  1. 新建一个情景模式

image.png

  1. 配置whistle地址并应用选项

image.png

  1. 使用
  • 这里我们使用vscode open with live server启动一个页面。使用本地IP访问页面，使用localhost无法走代理

image.png

  • 在chrome浏览器右上角点击插件

image.png

  • 选择应用对应的情景模式

image.png

配置完成

  • 我们可以在whistle的network窗口看到对应的网络请求

image.png

  • 尝试拦截一下页面html的请求

1739342919275.jpg

1739342919284.jpg

这里我们将h1的内容改为AAAA

1739342919288.jpg

拦截成功

image.png

  • 应用示例

image.png

总结

我这里只介绍了工具的基础用法，更多用法就等大家自己去发现

avatar
文章
阅读
粉丝