# whisle 使用实践

whistle是一款用node实现的跨平台的web调试工具,支持查看修改http(s)Websocket连接的请求和响应内容。简而言之就是 Node 版的 Fiddler、Charles,不过这个工具能远比后两者更加适合Web开发者、使用更简单、功能也更加实用,而笔者使用了 1 个月后发现完全可以代替 FiddlerCharles

whistle 总结文档:http://wproxy.org/whistle/

# 安装&运行

whistle运行时会监听一个端口,把Chrome(或其他程序)转发到该端口的数据处理后再返回,而在Chrome里则通过一个代理层把请求转发到相应端口。

1.Chrome 插件SwitchyOmega

# 安装
sudo npm i -g whistle

# 运行
w2 start
copy success
Copy successed

最后,打开http://local.whistlejs.com/#network即可进入控制台界面

# 常用功能一览

  • 绑定host
# 说明:相当于浏览器层的host文件,如果找不到再去查找本机的host文件
10.255.223.117  e.dangdang.com
copy success
Copy successed
  • 替换请求
# 说明:请求百度的时候会返回京东的页面内容
https://m.baidu.com  https://wq.jd.com
copy success
Copy successed
  • 修改返回码
# 说明:使http返回404
https://m.baidu.com  statusCode://404
copy success
Copy successed
  • 往 html 插入脚本
# 说明:会在网页最后以 script 标签的形式插入,花括号的值是内置编辑器保存的文件,在主菜单 "value" 下可找到
https://wq.jd.com  js://{test.js}
https://wq.jd.com  js:///Users/Vino/Document/test.js
copy success
Copy successed
  • 往 html 插入样式
# 说明:在网页里以 style 标签的形式插入
http://wq.jd.com  css://{test.css}
copy success
Copy successed
  • 文本类请求 append 内容、替换返回内容
# 说明:会把内容 append 到请求后面
http://mydomain.com/style.css  resAppend://{myAppend.css}
# 说明:完全替换请求内容
http://mydomain.com/style.css  resBody://{myResBody.css}
copy success
Copy successed
  • weinre 调试页面
# 说明:为 https://wq.jd.com 页面快速添加一个 weinre 调试脚本,点击 http://local.whistlejs.com/weinre/client/#debug_mypage 或界面主菜单 “Weinre” 可打开 inspect 界面调试该页面
https://wq.jd.com  weinre://debug_mypage
copy success
Copy successed

更多的使用方法可以参考 whistle 协议列表

# 小结

从上面可以看出 whistle 的大致工作流程:

  1. 配置需要修改的 url 地址
  2. 编写 URI 协议,如 statusCode://
  3. 编写协议对应的参数,如 statusCode://404

可以看出 whistle 的操作都是通过文本配置去实现,比较符合程序员的思维。

whistle 可操作的资源的 requestrespondheaderbody,其中 header 里面的queryuacookiestatus Code 等数据对前端来说非常熟悉,也都有相应的协议去操作这些数据。

另外,whistle 很多操作协议都是针对前端开发友好的,比如 htmljscss 等类型请求的修改协议对于前端程序员来说都非常亲切。

# 使用建议

# 1.代替本地的 host 文件

由于 whistle 兼容操作系统的 host 语法格式,所以在浏览器层面的 host 配置可轻松代替本地的 host 文件。这样做的主要好处是无缓存,切换时生效更快

有一个技巧就是在 “Rules” 界面下,可配多套 host 配置,比如 devgamma 等满足开发需求。

tool1.5-1

# 2.多终端代理

  • 手机的 wifi 设置里,打开代理,连接本机 ip 和 8899 端口即可查看手机的网页请求
  • 电脑其余程序的代理设置,也可通过本机 ip 和 8899 端口的形式使用 whistle 查看请求,比如微信 web 开发者工具

注意

以上操作均需要在同一个局域网内

# 3.转换 http 协议

转发协议+域名转发,轻松本地模拟 https ,访问线上的 https 域名实际上指向的是本地的 http 调试地址。

https://wq.jd.com  http://localhost:9000
copy success
Copy successed

注意

涉及到 https 的请求都需要您的电脑和手机等都安装 whistle 提供的证书,详情可看文档。

# 4. mock 数据

whistle 提供了一个强大的 mock 数据的插件,强大之处是可以结合 js 语句 + mock 语法去生成数据。举一个简单的例子说明用法:

先安装插件:

npm i -g whistle.vase
copy success
Copy successed

在 “Plugins” 菜单打开 vase 的界面,新建一个名字为 “mock_json_demo” 的配置,并选择模板为 mock 。输入如下内容:

{
    "list |10": [{
     	"name": "@string",
      	"avatar": "http://lorempixel.com/100/100/",
      	"id |+1": 10000,
      	"list |3": [{
            "name": "@string",
            "id |+1": 100
        }]
    }]
}
copy success
Copy successed

不熟悉 mock 语法的朋友可以到这里了解一下

tool1.5-2

在 “Rules” 下配置一条 vase 的规则:

http://mock.local/data.json  vase://mock_json_demo
copy success
Copy successed

打开测试地址 http://mock.local/data.json ,即可看到模拟的数据。

tool1.5-3

有读者可能会问,如果想更自由度更高一点,用 js 去生成数据是否可行?

当然可行,vase 提供了一种 “script” 模板可实现这种需求,里面可以写一些简单的 javascript API,还提供了 req(request)等内置数据对象,可以获取如请求的 headersmethodbodyqueryurl 等数据。

既然这些数据都有了,是不是可以搞事情了?我有一个大胆的想法,请看下面的例子:

vase 界面新建一个名为 “json_engine_script” 数据模板,并选择 “script” 模板引擎。

var json = merge({
  	page: req.query.pi, // 取url查询参数的分页字段,加到要返回的数据里,达到模拟分页数据的效果
  	total: 60
}, render('mock_json_demo', null, 'mock')); // render 可以渲染上文提到名为“mock_json_demo”的数据模板,返回一个json

if (req.query.callback) { // 如果查询参数带了callback,则返回jsonp
	out(header('content-type', 'application/javascript; charset=utf8'));
	var json_text = join([req.query.callback+'(', json, ')']); // join是内置方法,可合并一组数据
	out(json_text); // 向body输出数据
} else { // 没有callback则返回json
	out(header('content-type', 'application/json; charset=utf8'));
	out(json);
}
copy success
Copy successed

在 “Rules” 输入以下配置:

http://mock.local/data.json  vase://json_engine_script
# 注释掉上一条配置
# http://mock.local/data.json  vase://mock_json_demo
copy success
Copy successed

打开 http://mock.local/data.json?callback=cb&pi=1 ,可尝试改变、删除 callbackpi 参数,会发现返回的数据会随之改变。

tool1.5-4

至此就完成了一个简单的、有一定扩展性的 restful 数据接口模拟。

点个Star支持我一下 ~