Whistle-前端调试利器
欢迎使用学习Whistle
Whistle是一个基于node.js的跨平台调试工具,可以方便我们在pc、移动端或者mac,windows调试。刚开始学习的时候,参考了网上的资料,发现很多资料对于完全没有接触过的人来说,还是比较困难。下面我们一起来学习,从开始安装到可以实现我们日常常用的功能。
注意:本文主要介绍的是在mac上的安装
gitHUb链接:https://github.com/avwo/whistle
首先来介绍一点:关闭浏览器强制跳https,chrome浏览器打开
https:chrome://net-internals/#hsts,设置如下即可
安装和设置
1.安装nodeWhistle是基于node平台的开发工具,所以要确保你的电脑已经安装了node(安装Node v6以上的版本,否则可能在app和chrome上抓包会有问题)
$ node -v
v8.9.4
2.安装Whistle
$ npm install -g whistle
npm默认镜像是在国外,如果无法安装或者安装比较慢,可以使用淘宝的镜像安装
$ npm install cnpm -g --registry=https://registry.npm.taobao.org
$ cnpm install -g whistle
whistle安装完成后,执行命令 whistle help 或 w2 help,查看whistle的帮助信息
$ w2 help
Usage: w2 [options]
Commands:
status Show the running status of whistle
use/add [filepath] Set rules from a specified js file (.whistle.js by default)
run Start a front service
start Start a background service
stop Stop current background service
restart Restart current background service
help Display help information
3.启动Whistle
$ w2 start
重启Whistle
$ w2 restart
停止whistle:
$ w2 stop
调试模式启动whistle(主要用于查看whistle的异常及插件开发):
$ w2 run
3.配置代理
配置信息
1.代理服务器:172.0.0.1
2.默认端口:8899
代理配置方式
1.全局代理
2.浏览器代理(推荐)
。安装Chrome代理插件:推荐安装SwitchyOmega
在chrome网上应用商店搜索SwitchyOmega,安装打开代理即可
。配置代理
。 打开代理
通常情况下,代理是关闭的,需要打开,点击proxy,pc浏览器代理即可打开
4.访问配置页面
启动whistle及配置完代理后,用Chrome浏览器,如果能正常打开页面,whistle安装启动完毕,可以开始使用。
- 方式1:域名访问 http://local.whistlejs.com/
- 方式2:通过ip+端口来访问,形式如 http://whistleServerIP:whistlePort+1/ e.g. http://127.0.0.1:8900
5.配置host,配置成功后即可在页面访问
重新访问页面,查看抓包
到这里,恭喜你,pc端http代理就成功了
5.移动端代理
1.电脑和手机必须链接同一网络
2.配置手机代理
4.手机浏览器输入192.168.191.3:8899(这里我电脑的ip)
能看到以下页面,恭喜你,说明手机设置代理成功,可以开始手机测试了