whistle -- 每天都要用的调试抓包小能手

·  阅读 999
whistle -- 每天都要用的调试抓包小能手

关于

whistle是基于Node实现的跨平台web调试代理工具

类似工具:fiddler

优点:

  1. 基于Node,跨平台
  2. 操作方便
  3. 功能强大,基本覆盖了所有抓包调试代理可以实现的功能,且所有操作都可以通过类似配置hosts的方式实现

安装与启动

  1. 安装Node

  2. 安装whistle npm install -g whistle

  3. 启动whistle w2 start

  4. 配置代理 默认代理服务器地址 127.0.0.1,代理端口8899

    4.1 web端 推荐Chrome使用SwitchOmega(国内访问不了配置代理服务器即可)

SwitchOmega

4.2 IOS 点击WiFi旁边的蓝色感叹号,最下面配置代理,设置为手动,服务器地址为电脑IP,端口8899 前提条件:电脑和手机网络要在同一个域下面

  1. 安装根证书,开启捕获HTTPS请求

    5.1 windows

image.png

5.2 IOS:设置证书信任:通用 -- 关于本机 -- 证书信任设置

配置与使用

抓包

以上均配置好了以后,移动端或者web端访问的请求均可被抓包并查看详情

image.png

配置代理转发

直接在Rules里面配置代理的转发,本地的项目地址为127.0.0.1:8080,下面的配置将其转发到www.test.com, 访问 www.test.com即可访问到本地项目 一般采用匹配模式代理转发

image.png

本地替换

可以在访问某个请求的时候将返回值替换为本地的文件,表示接口为*.myysq.com.cn/park/get-park-info的返回内容匹配本地的base-info.json文件,可以替换数据,mock我们想要的结果

image.png

同理,可以替换接口a的返回结果为接口b的返回接口,也可以替换html,css,js文件

注入代码

在Values中编写需要注入的代码,例如手机端vconsole调试台

1.vconsole源码

image.png

2.编写逻辑

image.png

3.Rules中注入代码,所以匹配到的网页下面都会出现vconsole控制台

image.png

4.成功后页面显示

image.png

问题

使用了很长一段时间后突然有一天nvm切换了一次npm版本,手机代理就再也连不上网,不知道什么原因。。。

解决1:

卸载所有node环境重新安装了一次,问题解决,原因可能是Windows系统的锅。。。

注意:一定要使用node稳定版,目前使用v12.16.1

解决2:

官方文档解决方案 wproxy.org/whistle/ins…

image.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改