快速上手

优质

小牛编辑

130浏览

2023-12-01

推荐看这篇文章：whistle工具全程入门

按上述方法安装好whistle后，用Chrome浏览器打开配置页面: http://local.whistlejs.com

如图Rules，whistle的Rules配置页面有一个默认分组Default，用户也可以通过上面的菜单栏按钮Create、Edit、Delete分别创建、重命名、删除自定义分组，whistle先在选中的用户自定义分组中从上到下依次匹配，然后再到Default中匹配(如果Default分组被启用的情况下)。

点击页面上方菜单栏的Create按钮，新建一个名为test的分组，并参照下面例子输入对应的规则配置。

设置hosts
指定www.ifeng.com的ip:
```
www.ifeng.com 127.0.0.1
# or
127.0.0.1 www.ifeng.com
```
指定www.ifeng.com的ip和端口，把请求转发到本地8080端口，这个在平时开发中可以用来去掉url中的端口号:
```
# www.ifeng.com 127.0.0.1
www.ifeng.com 127.0.0.1:8080
# or
127.0.0.1:8080 www.ifeng.com
```
也可以用某个域名的ip设置hosts
```
www.ifeng.com host://www.qq.com:8080
# or
host://www.qq.com:8080 www.ifeng.com
```
更多匹配模式参考：匹配模式
本地替换
平时开发中经常会用到这个功能，把响应替换成本地文件内容。
```
# Mac、Linux
www.ifeng.com file:///User/username/test
# or www.ifeng.com file:///User/username/test/index.html

# Windows的路径分隔符可以用 \ 或者 /
www.ifeng.com file://E:\xx\test
# or www.ifeng.com file://E:\xx\test\index.html
```
http://www.ifeng.com/会先尝试加载/User/username/test这个文件，如果不存在，则会加载/User/username/test/index.html，如果没有对应的文件则返回404。
http://www.ifeng.com/xxx会先尝试加载/User/username/test/xxx这个文件，如果不存在，则会加载/User/username/test/xxx/index.html，如果没有对应的文件则返回404。
也可以替换jsonp请求，具体参见tpl
更多匹配模式参考：匹配模式
请求转发
www.ifeng.com域名下的请求都替换成对应的www.aliexpress.com域名
```
 www.ifeng.com www.aliexpress.com
```
更多匹配模式参考：匹配模式
注入html、js、css
whistle会自动根据响应内容的类型，判断是否注入相应的文本及如何注入(是否要用标签包裹起来)。
```
# Mac、Linux
www.ifeng.com html:///User/xxx/test/test.html
www.ifeng.com js:///User/xxx/test/test.js
www.ifeng.com css:///User/xxx/test/test.css

# Windows的路径分隔符可以用`\`和`/`
www.ifeng.com html://E:\xx\test\test.html
www.ifeng.com js://E:\xx\test\test.js
www.ifeng.com css://E:\xx\test\test.css
```
所有www.ifeng.com域名下的请求，whistle都会根据响应类型，将处理好的文本注入到响应内容里面，如是html请求，js和css会分别自动加上script和style标签后追加到内容后面。
更多匹配模式参考：匹配模式
调试远程页面
利用whistle提供的weinre和log两个协议，可以实现修改远程页面DOM结构及自动捕获页面js错误及console打印的信息，还可以在页面顶部或js文件底部注入指定的脚步调试页面信息。
使用whistle的功能前，先把要相应的系统代理或浏览器代理指向whistle，如何设置可以参考：安装启动
weinre：
```
www.ifeng.com weinre://test
```
配置后保存，打开www.ifeng.com，鼠标放在菜单栏的weinre按钮上会显示一个列表，并点击其中的test项打开weinre的调试页面选择对应的url切换到Elements即可。
log:
```
 www.ifeng.com log://{test.js}
```
配置后保存，鼠标放在菜单栏的weinre按钮上会显示一个列表，并点击其中的test.js项，whistle会自动在Values上建立一个test.js分组，在里面填入console.log(1, 2, 3, {a: 123})保存，打开Network -> 右侧Log -> Page，再打开www.ifeng.com，即可看到Log下面的Page输出的信息。
更多匹配模式参考：匹配模式
手机设置代理

iOS

Android

更多功能请参考：协议列表