We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
whistle 是基于Node实现的跨平台web调试代理工具,主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应,也可以作为HTTP代理服务器使用,基本上可以操作web请求的方方面面,且可以通过Node模块扩展功能。
npm install -g whistle
安装完成后,执行whistle help或 w2 help,可以查看whistle的帮助信息。
whistle help
w2 help
最新版本的whistle支持三种等价的命令whistle、w2、wproxy
w2 start //启动 w2 restart //重启 w2 stop //停止
whistle的启动命令非常友好,执行后会根据实际环境提示如何访问配置页面。如果能正常打开,whistle安装启动就完成了。
配置浏览器代理比较简单,不再赘述,也可以参考配置代理。
为了方便切换,Chrome下推荐安装Proxy SwitchyOmega插件来提高切换效率,可以一键切换代理。
whistle 的所有操作都可以通过类似如下规则实现: pattern operatorURI
pattern operatorURI
pattern为匹配请求url的表达式,可以为:域名,路径,正则及通配符等多种匹配方式。完整内容参见:匹配模式
operatorURI为对应的操作,由操作协议+操作值组成(operatorURI = opProtocol://opValue):
operatorURI = opProtocol://opValue
opProtocol(操作协议),对应某类操作,如:
# 设置请求服务器IP--host pattern host://opValue # 本地替换--file协议 pattern file://opValue
opValue(操作值), 对应具体操作的参数值,如:
# 设置请求服务器IP--host协议 pattern host://127.0.0.1:6666 # 或 pattern 127.0.0.1:6666 # 本地替换--file协议 pattern file:///User/test/dirOrFile # 或 pattern /User/test/dirOrFile pattern file://E:\test\dirOrFile # 或 pattern E:\test\dirOrFile
完整内容参见:操作值
pattern 和 operatorURI 在多数情况下位置可以调换,且支持组合模式,具体参见:配置方式
采用 # 为注释符号
#
HTTPS、Websocket需要开启HTTPS拦截才可以正常抓包及使用所有匹配模式,否则只能用域名匹配。
安装好根证书(只需要在浏览页面的一端安装就行)以及勾选"Capture TUNNEL CONNECTs"才能正常查看HTTPS、Websocket请求。
whistle内部实现了类似浏览器console的远程Log平台,只需配置简单的whistle规则即可捕获页面错误及console输出。
如果查看https页面,需要先开启https拦截。
以https://www.baidu.com 为例。规则配置如下:
Network查看console输出:
log协议还可以在查看页面原有的console输出时,注入自己的console信息
m.baidu.com log:// # 如果你想同时注入js脚本,可以用下面一种方式 # 在mac或linux加载本地js文件/User/xxx/test.js # m.baidu.com log:///User/xxx/test.js # 在windows上加载本地js文件D:\xxx\test.js # m.baidu.com log://D:\xxx\test.js # 直接从whistle的Values配置的key-value里面获取脚本 # m.baidu.com log://{test.js}
key-value方式获取脚本:
往content-type为html或js的响应内容后面追加数据,如果是html,则会自动加上 script 标签在追加到响应内容,如果是js,则会自动追加到js文本后面
在有些资料上会提到 js 协议,whistle最新版本建议使用 jsAppend 代替
以在 https://xw.qq.com 中注入vConsole为例
# 直接从whistle的Vaules配置的key-value获取vconsole xw.qq.com jsAppend://{vconsole.js}
类似的,通过htmlAppend、cssAppend可以注入html、css
whistle集成了weinre的功能,只需简单配置pattern weinre://id即可通过Weinre查看修改页面的DOM结构及其样式:
pattern weinre://id
Weinre查看页面DOM结构及样式
注意: vConsole和weinre不能同时使用
www.weiyun.com host://127.0.0.1:12345 h5.weiyun.com host://127.0.0.1:12345 /wy/(.+)/ file:///Users/xxx/code/wy/$1
tpl基本功能跟file一样可以做本地替换,但tpl内置了一个简单的模板引擎,可以把文件内容里面{name}替换请求参数对应的字段(如果不存在对应的自动则不会进行替换),一般可用于mock jsonp的请求。
xxx.jsonp?callback=jsonpcallbackfn tpl://{jsonp.json}
//jsonp.json {callback}({code:200,data:{}})
上述jsonp的请求最终会返回 jsonpcallbackfn({code:200,data:{}})
jsonpcallbackfn({code:200,data:{}})
当tpl协议用于非jsonp请求时,可能会出现跨域的问题,可以通过对响应头增加CORS来解决。
xxx.com/headerAjax?cityId=1 tpl://({code:200,data:{}}) resHeaders://{cors}
//cors Access-Control-Allow-Credentials: true Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With,vtoken Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE Access-Control-Allow-Origin: *
whistle对http请求具有强大的修改能力,具体功能可能查看:协议列表
利用whistle调试移动端页面 利用whistle调试WebSocket和Socket请求 抓包调试protobuf请求 轻松篡改WebSocket数据包 使用whistle模拟cgi接口异常:错误码、502、慢网速、超时 whistle真机调试
The text was updated successfully, but these errors were encountered:
No branches or pull requests
whistle-基于Node实现的跨平台web调试代理工具
准备工作
安装
安装完成后,执行
whistle help
或w2 help
,可以查看whistle的帮助信息。启动
访问配置页面
whistle的启动命令非常友好,执行后会根据实际环境提示如何访问配置页面。如果能正常打开,whistle安装启动就完成了。
设置浏览器代理
配置浏览器代理比较简单,不再赘述,也可以参考配置代理。
为了方便切换,Chrome下推荐安装Proxy SwitchyOmega插件来提高切换效率,可以一键切换代理。
规则(Rules)
whistle 的所有操作都可以通过类似如下规则实现:
pattern operatorURI
pattern为匹配请求url的表达式,可以为:域名,路径,正则及通配符等多种匹配方式。完整内容参见:匹配模式
operatorURI为对应的操作,由操作协议+操作值组成(
operatorURI = opProtocol://opValue
):opProtocol(操作协议),对应某类操作,如:
opValue(操作值), 对应具体操作的参数值,如:
完整内容参见:操作值
pattern 和 operatorURI 在多数情况下位置可以调换,且支持组合模式,具体参见:配置方式
采用
#
为注释符号常用功能
查看https请求
安装好根证书(只需要在浏览页面的一端安装就行)以及勾选"Capture TUNNEL CONNECTs"才能正常查看HTTPS、Websocket请求。
log协议查看页面console输出和js错误
whistle内部实现了类似浏览器console的远程Log平台,只需配置简单的whistle规则即可捕获页面错误及console输出。
如果查看https页面,需要先开启https拦截。
以https://www.baidu.com 为例。规则配置如下:
Network查看console输出:
log协议还可以在查看页面原有的console输出时,注入自己的console信息
key-value方式获取脚本:
jsAppend协议注入js
在有些资料上会提到 js 协议,whistle最新版本建议使用 jsAppend 代替
以在 https://xw.qq.com 中注入vConsole为例
类似的,通过htmlAppend、cssAppend可以注入html、css
weinre协议查看、修改页面DOM结构及其样式
whistle集成了weinre的功能,只需简单配置
pattern weinre://id
即可通过Weinre查看修改页面的DOM结构及其样式:Weinre查看页面DOM结构及样式
host协议映射、file协议本地文件替换
tpl协议mock接口数据
上述jsonp的请求最终会返回
jsonpcallbackfn({code:200,data:{}})
resHeaders协议修改响应头
当tpl协议用于非jsonp请求时,可能会出现跨域的问题,可以通过对响应头增加CORS来解决。
whistle对http请求具有强大的修改能力,具体功能可能查看:协议列表
参考资料
利用whistle调试移动端页面
利用whistle调试WebSocket和Socket请求
抓包调试protobuf请求
轻松篡改WebSocket数据包
使用whistle模拟cgi接口异常:错误码、502、慢网速、超时
whistle真机调试
The text was updated successfully, but these errors were encountered: