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

共计 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 怎么用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。