whistle使用不完全指北

杨老头儿
2,034 阅读5分钟

前言：

      在漫漫的前端发展的生涯中 我们不知道为了调试接口数据下了多少功夫、前有定位线上bug的插件Vconsole、后有测试环境抓包工具Charles、直到我发现了whistle 才知道什么是简单、快捷、方便、话不多说 直接开始！

安装：

npm install  -g  whistle  // 全局安装、当然你可以使用cnpm 

w2 -h  // 能打印出信息、证明你安装成功了。

启动：

对 你没看错 就这么简单。
w2 start

image.png

启动完成会有提示的信息、你可以通过三种方式来访问：

  • 域名访问 local.whistlejs.com/
  • 通过ip+端口来访问
  • 通过命令行参数 -P xxxx 自定义webui的端口(xxxx表示要设置的端口号)

修改端口

w2 start -p 8888

默认的端口号是 8899、如果本地被占用 可以用过-p进行修改，详情请看

image.png

浏览器配置代理：

希望是用的是Chrome,可以在商店搜索SwitchyOmega，当然这个需要科学上网的，如图：

image.png

安装完成之后，浏览器的右侧会有一个圆圈的一个东东。默认是黑色的 证明没有开启。

image.png

你可以通过修改名称来改变你的【情景模式】我的就修改成了【开启代理】、默认浏览器会代理当前的IP地址、其实跟whistle的IP端口一致，访问网页的时候直接点击上方的圆圈【开启代理】即可，这样的好处就是不用去修改当前的浏览器配置做到即配即用.

image.png

注意：每次修改配置的时候需要右下角【ACTIONS】=> 【应用选项】哦~

安装HTTPS证书

在可视化的whistle界面中点击【HTTPS】会弹出一个弹层，如图：

image.png

点击下载安装到本地即可。具体的操作请看安装启动，安装完成就抓取浏览的数据了，如图：

image.png

过滤请求：

有的时候需要过滤一些请求、比如我值抓取某个域名下面的数据：baidu.com 别的请求不需要、那么可以配置：在可视化的whistle界面中点击【Settings】 过滤请求。如图：

image.png

更多配置请参考【界面功能】

手动改变Header

在whistle中设置rules 添加以下规则：

    https://www.baidu.com reqHeaders://{CORSHeaders}

image.png

在whistle中设置values 添加以下规则： (value名称可以自定义)

X-Forwarded-For : 23.248.174.86 // IP根据测试的国家随时修改。

image.png

你会发现访问域名的时候所有的header都会带有X-Forwarded-For.

构造请求

利用 Componser 可以选中当前的的请求、进行修改请求主体进行重新发起请求，这个比较简单看一下 官网的动图就基本操作。

composer.gif

当前我们也可以通过设置不同的header的参数，如图

image.png

替换响应数据

利用whistle提供的resBody，可以配置不同的返回结果,

image.png

我们在Rules中新建一种规则，然后写下：

  //staging-dev1-api.com/api/v1/login-status resBody://{data.json}

然后在Vaules中新增一个数据文件，需要注意的是 名称尽量带上文件的后缀，比如：data.json

image.png

远程调试移动页面

whistle的 log 规则主要用于调试远程页面特别是移动端页面，可以通过此规则把远程页面 console 打印的信息展示出来，如下图

image.png

我们在Rules中新建一种规则，然后写下：

//www.baidu.com log://demo

就可以根据自己的需求来 定制log的类型了

image.png

其他域名代理到你本地IP

mac：//www.demo.com/ //10.232.72.142:18888/ resCors://enable

window：www.demo.com 10.232.72.142:18888 resCors://enable

image.png

这样的话就可以满足某些场景、手动线上的域名代理到你本地的IP地址来定位问题哦~、对于排查线上的问题及为有效， 关于resCors请狠狠点击我

手机配置代理：

Android：

1、需要手机root、这个是基本

2、在windows\mac 需要安装 两个指令进行证书的解析和桥接：openssl 、 adb windows 需要自行百度查询安装：windows 安装openssl windows 安装adb mac 自定安装homebrew 然后 进行 brew install adb || brew install openss

3、用数据线链接安卓手机后，在终端执行openssl x509 -subject_hash_old -in 你本地路径的rootCA.crt 文件 会得到：一个hash值。

image.png

4、指向以下脚本

adb devices # 测试adb是否安装成功，成功了会出现设备的hash值

adb root

adb push /Users/yangfan/Desktop/rootCA.crt /system/etc/security/cacerts/e2bbc20f.0 安装证书到安卓系统证书目录

IOS：

需要扫描可视化的whistle界面中点击【HTTPS】会弹出一个弹层的二维码进行证书的安装、拿IOS为例，【设置】=> 【信任证书】=> 【通用】=> 【描述文件与设备管理】选择信任； 然后在wifi进行【配置代理】手动代码IP即可。

如何在手机上调试localhost：

adb

其实这个问题对于苹果手机上并不难、只要链接代理直接进行whistle代理即可、相对于安卓比较简单、更多的情况是安卓手机大同小异、有的证书根本安装不上、那么可以试试adb；

举例一个场景： 我需要在安卓手机的浏览器上调试我本地的 http://localhost:18888/ 其实很简单、只要使用adb的反向代理即可：

1、电脑链使用数据线链接安卓手机、这里以MAC为例

2、在终端安装adb的指令、如何安装可自行百度、安装完成在终端执行以下代码：

 反向代理(主机端口给设备访问) 
 adb reverse tcp:8081<电脑端口> tcp:8081<手机端口> 
 adb reverse tcp:18888 tcp:18888 // 电脑IP跟手机IP保持一致

3、执行成功、在手机输入http://localhost:18888/ 即可、就可以通过代理的方式指向你的电脑浏览器：

chrome

当然也可以使用chrome的inspect、具体的场景还是具体分析喽~

image.png

最后：

以上利用上午翻阅文档整理的笔记，希望对大家有所帮助。

参考资料：

avatar
文章
阅读
粉丝