whistle

一、业务场景

前端本地开发，我们往往需要频繁的改动代码，并且实时的看到改动效果，往往有以下情景 :

• 有开发环境，则本地使用webpack-dev-server开发服务器代理build的文件
• 没有开发环境，即线上进行调试，则需要将线上网站的请求(js、css)等，使用fiddle或whistle或查尔斯等真机抓包工具拦截特定请求并将它替换为本地文件

二、为什么使用whistle

因为fiddler功能强大但是容易内存泄漏，whistle也能替代fiddler完成我们日常的开发工作。

三、起步

安装 :

cnpm i whistle -g

启动 :

w2 start -p 8899 // 不设置端口默认使用8899

image-20201012222920962.png

打开 http://127.0.0.1:8899/，即可以看到如下界面

image-20201012223104460.png

此时还不能抓取包，我们需要配置代理，需要在谷歌商店安装whistle插件

image-20201012224544524.png

安装完成后，开启代理状态

image-20201012224737912.png

接下来，开启Https，在whistle上，下载证书，并在chrom上导入证书

image-20201012225856252.png

将下载好的证书导入，记得将证书存储类型设置为

image-20201012225953347.png

这样就可以抓取https请求了。

四、基础功能

whistle有两大常见功能，分别是

• NetWork 抓包
• Rules 设置代理

A. 设置代理

我们可以在Rules选项卡中的default设置代理，例如现在有一个需求 : 将我的首页的一个js文件代理为本地硬盘的一个文件。

image-20201012230643142.png

那么我们可以在Rules页面上

! image-20201012230832084.png

再次刷新页面， 则可以看到警告提示窗口了，因为test.js只有一行alert(1)，则说明代理成功了

image-20201012231007479.png

B. 匹配模式

whistle有以下几种匹配模式，以下几种模式均只能用于左侧，即要被代理的地址，而不能用在右侧

a. 基本匹配

www.zdxhyangyan.cn  file://D:\Github\koa # 匹配域名下的所有请求到本地目录下
http://www.zdxhyangyan.cn file://D:\Github\koa # 匹配域名下的http请求到本地目录下
https://www.zdxhyangyan.cn file://D:\Github\koa # 匹配域名下的https请求到本地目录下
https://www.zdxhyangyan.cn:8080 file://D:\Github\koa # 限定端口号以及协议
http://www.zdxhyangyan.cn/gitbook file://D:\Github\koa # 限定具体的路径
$https://www.zdxhyangyan.cn/gitbook/dataConstruct/ # 精确匹配

b. 正则匹配

/http:\/\/(.*)/ log:// # 与javascript的正则表达式定义一样

c. 通配符

^www.zdxhyangyan.cn/test/*** file://D:\Github\koa # 以^开头，*为通配符
*.com file://D:\Github\koa # 通配符域名匹配
# 匹配二级域名以.com结尾的所有url，例如test.com、abc.com，但不会匹配*.xxx.com
//*.com file://D:\Github\koa 

# 通配符路径匹配
*/ file://D:\Github\koa
*/xxx file://D:\Github\koa

C. 跨域处理

whistle可以给请求设置跨域头，解决浏览器拦截跨域请求的问题。

*.zdxhyangyan.cn resCors://*

D. 插入JS

whistle 可以通过设置规则，在访问特定网站时插入本地的JS、CSS等文件。例如

*.zdxhyangyan.cn/product/ jsAppend://D:\test.js
*.zdxhyangyan.cn/product/ cssAppend://D:\test.css