标签 Whistle 下的文章

whistle 开源的请求调试工具,通过 NPM 安装,对前端程序员操作友好

它能做什么,常用功能?

可以通过设置网络代理, 调试所有设备上的网络请求

  • 抓包,可看到请求响应参数
  • 修改请求 or 响应,可以修改请求及响应的内容
  • 设置代理,可以将制定域名或者 ip 代理到本地机器调试
  • 移动端调试,内置了调试工具,可以将手机上网页的 DOM 结构,及 console 日志,输出在电脑上

whistle.png

安装及配置

安装 whistle 本体

npm install -g whistle
# 启动
w2 start

安装浏览器插件

安装 Whistle 第三方插件)

image-20200817162957076.png

配置移动端代理

无线局域网 > 选中使用的 WIFI 配置 > 配置代理 > 手动配置 > 填写你局域网 IP 及 w2 默认端口 8899

image-20200817163522590.png

配置HTTPS

上面配置已经可以抓到 HTTP 的包,对于HTTPS请求,需要安装 Whistle 提供的证书,否则会提示证书不安全

打开 Whistle 控制面板,点击顶部 HTTPS 二维码安装, 点这里 查看官方教程

注意:这一步很重要,关于本机 > 最底部证书信任设置 > 开启刚刚安装的证书

image-20200817164338083.png

常见规则配置

代理本地电脑 IP + 端口 到指定域名

192.168.13.73:3100 auth.juzisang.com

调试移动端指定域名 DOM 及 Console

# 在手机
auth2.txxy.com weinre://testDebug

替换响应内容

api.juzisang.com/account/status resBody://C:/Users/juzisang/Downloads/test.json

配置代理

注意,本地代理和 w2 是不能共存的,需要配置 w2 对应请求走代理

# 所有请求都走代理
/./ proxy://127.0.0.1:1081

# 根据 PAC 规则走代理
/./ pac://http://127.0.0.1:1082/pac/?103414

参考