前端必看的抓包工具~

740 阅读2分钟

网页抓包

推荐 whistle + SwitchyOmega 对网页进行抓包

whistle

github.com/avwo/whistl…

image.png

安装whistle

npm install -g whistle

npm默认镜像是在国外,有时候安装速度很慢或者出现安装不了的情况,如果无法安装或者安装很慢,可以使用taobao的镜像安装:

$ npm install cnpm -g --registry=https://registry.npm.taobao.org
$ cnpm install -g whistle

或者直接指定镜像安装:
$ npm install whistle -g --registry=https://registry.npm.taobao.org

启动whistle:

最新版本的whistle支持三种等价的命令whistlew2wproxy

$ w2 start

Note: 如果要防止其他人访问配置页面,可以在启动时加上登录用户名和密码 -n yourusername -w yourpassword

重启whsitle:

$ w2 restart

停止whistle:

$ w2 stop

调试模式启动whistle(主要用于查看whistle的异常及插件开发):

$ w2 run

启动完whistle后,最后一步需要配置代理

配置代理

配置信息
  1. 代理服务器:127.0.0.1 (如果部署在远程服务器或虚拟机上,改成对应服务器或虚拟机的ip即可)
  2. 默认端口:8899 (如果端口被占用,可以在启动时通过 -p 来指定新的端口,更多信息可以通过执行命令行 w2 help (v0.7.0及以上版本也可以使用w2 help) 查看)

SwitchyOmega

安装SwitchyOmega: chrome.google.com/webstore/de…

image.png

安装完安装SwitchyOmega后讲代理设置到下图即可 port要与whistle启动时的端口同步

image.png

访问配置页面

启动whistle及配置完代理后,用Chrome浏览器(由于css兼容性问题界面只支持Chrome浏览器) 访问配置页面,如果能正常打开页面,whistle安装启动完毕,可以开始使用。

可以通过以下两种方式来访问配置页面:

  • 方式1:域名访问 local.whistlejs.com/
  • 方式2(推荐):通过ip+端口来访问,形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
  • 方式2:通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号),自定义端口支持上述两种方式访问,也支持 http://127.0.0.1:xxxx

安装根证书

安装证书请参考文档: wproxy.org/whistle/web…

localhost抓包

localhost下抓包可以通过ifconfig找到自己的ip 通过ip访问自己的项目来抓包

image.png

Charles 抓包

image.png

详细介绍可以参考:www.jianshu.com/p/dd6a24f0c…