跨平台web调试工具whistle怎么用

86次阅读
没有评论

共计 5780 个字符,预计需要花费 15 分钟才能阅读完成。

这篇文章给大家介绍跨平台 web 调试工具 whistle 怎么用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

whistle 是基于 Node 实现的跨平台 web 调试代理工具,类似的工具有 Windows 平台上的 Fiddler+Willow,基于 Java 实现的 Charles,及公司同事基于 Node 实现的 Livepool 等等;whistle 与所有的 web 调试代理工具一样,主要功能也是用于查看、修改 HTTP、HTTPS、Websockt 的请求响应或者作为 HTTP 代理服务器,但不同于 Fildder+Willow、Charles 和 Livepool 通过断点的方式修改请求响应,whistle 采用的是类似配置 Hosts 方式,通过配置修改请求响应,且提供规则分组功能及通过域名、路径、正则三种匹配方式 (系统的 hosts 配置只支持域名匹配),特别针对终端调试提供了 weinre,log 等功能,并支持通过 Node 模块进行扩展。

基本功能

Github 地址

安装启动

安装启动 whistle,需要以下四个步骤:安装 node、安装 whistle、启动 whistle、配置代理。

安装 Node(建议安装最新版本,LTS 版本或当前版本都可以,如果已安装可以忽略此步骤):https://nodejs.org/
安装 tnpm():

npm install @tencent/tnpm -g --registry=http://r.tnpm.oa.com --no-proxy
# Mac、Linux 用户可能需要加 sudo
sudo npm install @tencent/tnpm -g --registry=http://r.tnpm.oa.com --no-proxy

安装 whistle 及在公司网络访问外网需要用到的插件 txpac 插件:

tnpm install -g whistle @tencent/whistle.txpac
# Mac、Linux 用户可能需要加 sudo
sudo tnpm install -g whistle @tencent/whistle.txpac

启动 whistle
w2 start
whistle 默认端口为 8899,如果要修改端口号,可以这么启动:
w2 start -p 8888
重启 whistle:
w2 restart
关闭 whistle:
w2 stop
更多内容请查看命令行帮助:
w2 help

配置代理
whistle 需要手动配置浏览器代理或者系统代理 (代理的 ip 为 whistle 所在机器的 ip,如果是本机就填 127.0.0.1;端口号为启动时设置的端口号,默认为 8899):

配置浏览器代理 (推荐使用):
安装 chrome 代理插件:whistle-for-chrome 插件 或者 Proxy SwitchySharp
安装 firefox 代理插件:Proxy Selector

配置系统代理:
1) Windows
2) Mac

使用方法

安装 node、安装 whistle、启动 whistle、配置代理后可以开始使用 whistle,用 Chrome 浏览器打开 whistle 配置管理页面

界面相关操作参见界面功能;

配置模式

传统 hosts 的配置模式:

#  单个 host
ip hostname
#  组合 host
ip hostname1 hostname2 ... hostnameN
#  例如
127.0.0.1 www.example.com
127.0.0.1 a.example.com b.example.com c.example.com

whistle 的配置模式:

#  单个操作
pattern operator-uri
#  如果 pattern 和 operator-uri 不同时为域名或路径的一种组合,位置可以调换
operator-uri pattern
#  组合模式
pattern operator-uri1 operator-uri2 ... operator-uriN
# pattern1 和 operator-uri 不同时为域名或路径的一种组合,可以如下配置
operator-uri pattern1 pattern2 ... patternN

其中,pattern 可以为:

域名:www.test.com(所有该域名下的请求都会匹配 operator-uri)

路径:http://www.test.com/xxx(http://www.test.com/xxx  及其子路径的请求都会匹配 operator-uri),或不加协议 protocol://www.test.com/xxx,protocol 可以为 http、https、ws、wss(http://www.test.com/xxx 及其子路径的请求都会匹配 operator-uri)

正则:/^https?:\/\/([^\/]+)\/xxx/(http(s)://host:port/xxx 及其子路径的请求都会匹配 operator-uri,且在 operator-uri 中可以通过 $1, $2, …, $9 获取 url 里面的子匹配 )

operator-uri 由上述基本功能抽象成的形如 protocol://ruleValue 的 URI,whistle 会根据匹配的 operator-uri 的 protocol 及 ruleValue 修改请求或响应,protocol 和 ruleValue 的详细内容参见 whistle 帮助文档及协议列表。

例如:

#  修改 www.example.com 的响应 cors
www.example.com resCors://*
#  或
resCors://* www.example.com
#  同时修改多个自定域名或路径
resCors://* /example\.com/ a.test.com b.test.com
#  修改 www.test.com 的带端口 host、referer 和响应的 cors
www.test.com 127.0.0.1:8080 referer://http://www.example.com resCors://*

一些例子

拦截 HTTPS

不开启拦截 HTTPS,无法在 whistle 看到 HTTPS 和 Websockt 请求响应的明文,且只能通过 whistle 对 HTTPS 和 Websockt 设置 host、代理等有限的操作,要通过 whistle 完全操作 HTTPS、Websocket 请求响应,需要开启 HTTPS 拦截及在系统或浏览器安装 whistle 的根证书,具体参见:https://avwo.github.io/whistle/webui/https.html

配置 host

#  传统 hosts 配置
127.0.0.1 www.example.com #  等价于: www.example.com 127.0.0.1
127.0.0.1 a.example.com b.example.com c.example.com
#  支持带端口
127.0.0.1:8080 www.example.com #  等价于: www.example.com 127.0.0.1:8080
127.0.0.1:8080 a.example.com b.example.com c.example.com
#  支持通过域名获取 host
host://www.qq.com:8080 www.example.com #  等价于: www.example.com host://www.qq.com:8080
host://www.qq.com:8080 a.example.com b.example.com c.example.com
#  支持通过正则表达式匹配
127.0.0.1:8080 /example\.com/i #  等价于: /example\.com/i 127.0.0.1:8080
127.0.0.1:8080 /example\.com/ /test\.com/
#  支持路径匹配
127.0.0.1:8080 example.com/test #  等价于: example.com/test 127.0.0.1:8080
127.0.0.1:8080 http://example.com/index.html https://www.test.com/test

完整功能参见协议列表。

修改请求

以下功能都支持通过域名、路径、正则匹配方式,为方便只以域名匹配方式为例,其它同理:

#  修改 url 参数
www.qq.com urlParams://E:\test\params.json 
#  请求方法
www.qq.com method://post
#  添加请求头
www.qq.com reqHeaders://(x-a=1 x-b=a%20b)
#  修改 referer(修改 referer 快捷方法)
www.qq.com referer://http://ke.qq.com/
#  修改 cookie(修改请求 cookie 快捷方法)
www.qq.com reqCookie://{reqCookie.json}
#  修改请求表单
www.qq.com params://{form.json}

JSON 对象可以存在本地文件,或存在界面的 Values,也可以内联到 Rules 配置里面,具体参见实现原理、数据格式。
完整功能参见协议列表。

修改响应

以下功能都支持通过域名、路径、正则匹配方式,为方便只以域名匹配方式为例,其它同理:

#  修改响应状态码
www.qq.com statusCode://500 #  请求不会发送到后台服务器,可以用来模拟 4xx、5xx 请求
www.qq.com replaceStatus://404 #  请求返回后再修改 statusCode
#  添加响应头
www.qq.com resHeaders://(x-res-a=1 x-res-b=a%20b)
#  修改响应类型 (修改响应类型的快捷方法)
www.qq.com resType://text/plain #  或者: www.qq.com resType://text
#  请求替换
www.qq.com https://www.baidu.com
#  本地替换 (windows 中目录分割符可以用 `\`,也可以用 `/`)
www.qq.com file://E:\xxx #  等价于: file://E:/xxx www.qq.com
# Mac 或 Linux
www.qq.com file:///User/xxx/test
#  如果要让本地没有对应文件的请求继续请求线上,可以采用
www.qq.com xfile://E:\xxx
#  本地替换 jsonp
www.qq.com tpl://E:\xxx.json # xxx.json: {callback}({ec : 0})
www.qq.com xtpl://E:\xxx.json # xxx.json: {callback}({ec : 0})
#  注入 html、css、js(whistle 会自动根据响应类型封装后注入)
www.qq.com html://htmlFile
www.qq.com css://cssFile
www.qq.com js://jsFile

JSON 对象或注入的文本可以存在本地文件,或存在界面的 Values,也可以内联到 Rules 配置里面,

设置代理

以下功能都支持通过域名、路径、正则匹配方式,为方便只以域名匹配方式为例,其它同理:

# http 代理
www.qq.com proxy://127.0.0.1:8888 #  等价于: proxy://127.0.0.1:8888 www.qq.com
#  同时设置多个
proxy://127.0.0.1:8888 www.qq.com /google/ /facebook/
# socks 代理
www.qq.com scoks://127.0.0.1:1008 #  等价于: socks://127.0.0.1:8888 www.qq.com
#  同时设置多个
socks://127.0.0.1:1008 www.qq.com /google/ /facebook/
# pac 脚本
#  设置办公网 pac 脚本 (如果安装了 whistle.txpac,则无需设置)
/./ pac://http://txp-01.tencent.com/proxy.pac
#  设置办公网 pac 脚本 (如果安装了 whistle.txpac,则无需设置)
/./ pac://http://txp-01.tencent.com/proxy_devnet.pac

完整功能参见协议列表。

移动端调试

打开 whistle 配置界面右上角的 Online 按钮获取当前 whistle 的 ip 和端口,移动设备根据相应的 ip 和端口配置代理 (确保移动设备和 PC 要在同一网段);配置完后如果还是无法访问,可能需要关闭防火墙或者设置白名单。

# weinre(调试网页 DOM 结构)
www.qq.com weinre://test
# log(输出网页 console 打印的日志)
www.qq.com log://{test.js}

具体参见:weinre、log

完整功能参见协议列表。

其它功能

以下功能都支持通过域名、路径、正则匹配方式,为方便只以域名匹配方式为例,其它同理:

#  禁用缓存
www.qq.com disable://cache
#  忽略规则
www.qq.com filter://rule|host|https

完整功能参见协议列表。

插件扩展及应用

whistle 支持通过 Node 模块的方式扩展功能,具体参见:插件开发。

插件的一些应用:

HTTP 代理服务器功能:imweb 本地代理 imwebproxy(里面的 Pb 和 CMEM 的功能分别对应两个 whistle 插件 whistle.imwebproxy、whistle.cmem)

扩展协议功能:imweb 前端本地调试环境 whistle.imwebenv

扩展界面功能:whistle.websocket

关于跨平台 web 调试工具 whistle 怎么用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-08-03发表,共计5780字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)