whistle工具 | 邵预鸿|前端开发技术笔记

whistle能做什么？

Whistle 是基于 Node 实现的跨平台抓包调试工具，其主要特点：

完全跨平台：支持 Mac、Windows 等桌面系统，且支持服务端等命令行系统
功能强大（理论上可以对请求做任意修改）：
- 支持作为 HTTP、HTTPS、SOCKS 代理及反向代理
- 支持抓包及修改 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求
- 支持重放及构造 HTTP、HTTPS、HTTP2、WebSocket、TCP 请求
- 支持设置上游代理、PAC 脚本、Hosts、延迟（限速）请求响应等
- 支持查看远程页面的 console 日志及 DOM 节点
- 支持用 Node 开发插件扩展功能，也可以作为独立 npm 包引用
操作简单：
- 直接通过浏览器查看抓包、修改请求
- 所有修改操作都可以通过配置方式实现（类似系统 Hosts），并支持分组管理
- 项目可以自带代理规则配置并一键设置到本地 Whistle 代理，也可以通过定制插件简化操作

一键安装（Mac & Windows）

安装

1	npm i -g whistle && w2 start --init

使用启动命令后 Whistle 将设置系统全局代理，以及安装系统根证书，目前一键安装只支持 Mac & Windows 系统，其它系统按照下面 手动安装 的方式操作。

命令启动后将会看到如下界面

启动

1 2	w2 start //启动 w2 start -p 8000 //指定端口号

停止运行whistle

w2  stop

其它命令

status      Show the running status
add         Add rules from local js file (.whistle.js by default)
proxy       Set global proxy
ca          Install root CA
install     Install whistle plugin
uninstall   Uninstall whistle plugin
exec        Exec whistle plugin cmd
run         Start a front service
start       Start a background service
stop        Stop current background service
restart     Restart current background service
help        Display help information
proxy off   可以通过 w2 proxy off 关闭全局代理,如关闭whistle后，不能访问百度等，使用这个命令可关闭

tip: 其它命令可在界面UI上操作

其它系统如linux安装?

非 Mac & Windows 系统或一键安装失败可以按下面方式设置代理和安装根证书：

设置代理：https://wproxy.org/whistle/install.html
安装根证书：https://wproxy.org/whistle/webui/https.html

项目上实例点举例

解决跨域问题

Q：假定本地起了一个**前端项目(10.7.29.44:5500)，现在需要请求后台接口(10.7.29.44:18002)**，由于端口号不同且后台未设置允许跨域，前端项目请求后台接口将出现跨域。

A：解决跨域whitle有两种方法

修改响应的cors 【无需修改代码、推荐方式】

将接口地址修改为本地，思路为本地项目请求本地接口，再由whistle监听本地接口代理到远程服务器接口

前端项目(10.7.29.44:5500)，现在需要请求后台接口(10.7.29.44:18002/interface/api/v1/interfaceDataCheck/get)

1
2
3

//xhr.open('get', 'http://10.7.29.44:18002/interface/api/v1/interfaceDataCheck/get'); 后台真实地址
xhr.open('get', 'http://10.7.29.44:5500/interface/api/v1/interfaceDataCheck/get'); //将真实地址设置为本地项目地址
xhr.send();

在whistle中设置，将本地项目地址代理到后台真实地址

请求替换 注入线上资源CSS、JS定位问题

css:///tmp/replace.css 采用的是本地
css://{bg.css} 采用的是whistle UI 左侧values栏中新增的变量

bg内容可为css/js，例: body{background-color:red}

# 说明：注入style到这个页面中
http://mydomain.com  css://{bg}
http://mydomain.com  css:///tmp/style1.css

# 说明：注入js到这个页面中
http://mydomain.com  js://{js}
http://mydomain.com  js:///tmp/test.js

通过注入，实现本地去调试线上代码，并能实现实时调试 注入后效果图如下

文本类请求 append 内容、替换返回内容

# 说明：会把内容 append 到请求后面
http://mydomain.com/style.css resAppend://{myAppend.css}
http://mydomain.com/style.css resAppend:///本地
# 说明：完全替换请求内容
http://mydomain.com/style.css resBody://{myResBody.css}
http://mydomain.com/style.css resBody:///本地

替换请求

1 2	# 说明：请求百度的时候会返回京东的页面内容 https://baidu.com https://jd.com

请求接口数据替换

1 2	http://www.yuhongshao.cn/1.php file://{data} http://www.yuhongshao.cn/1.php file:///www/xx/1.json

替换线上数据为本地数据

其它

whistle github地址：https://github.com/avwo/whistle

whistle详细文档：https://wproxy.org/whistle/install.html