whistle – 跨平台(Win/Mac/Linux)的 Fiddler

web调试代理工具是web开发人员必备的工具,它在发起web请求的客户端与服务器之间充当中间人角色,可以用于查看、修改或替换HTTP、HTTPS、Websocket请求(响应)数据,协助我们做本地开发调试、构造数据、定位问题等等,业界已有一些比较优秀的web调试代理工具,特别是Windows上的Fiddler(http://www.telerik.com/fiddler),由于其出色的功能设计,俨然成为了web调试代理工具的代名词。但Fiddler只能在Windows系统上使用,当我们换上Mac或者开发环境限制必须使用Linux时,我们很难在这些平台上找到类似Fiddler的工具,这个时候可能被提起最多的是Charles (https://www.charlesproxy.com/),Charles是用Java实现的跨平台web调试代理工具,理论上可以在安装java虚拟机的桌面系统上使用,用过Fiddler的人普遍觉得Charles难用,不管是性能、体验、界面都无法跟Fiddler相提并论(事实上Fiddler本身也是很耗内存),更重要的是Charles不是免费的,价格也不菲,这也可能是因为在Mac、Linux平台上可以选择的web调试代理工具也不多,下面我要给大家详细介绍的是本文的主角,开源免费且持续在维护的whistle (https://github.com/avwo/whistle)–全新的跨平台web调试代理工具。

Note: 想了解调试代理工具的原理可以看这篇文章:HTTP 代理原理及实现   (https://imququ.com/post/web-proxy.html)。

whistle

Github: https://github.com/avwo/whistle

whistle  (https://github.com/avwo/whistle)是用NodeJS  (https://nodejs.org/en/)实现的跨平台web调试代理工具,可以安装部署在装有NodeJS的操作系统上(包括Windows、Mac、Linux等桌面或命令行系统),并可以通过Chrome浏览器访问本地或远程whistle的管理配置界面:

  • 查看、修改或替换HTTP、HTTPS、Websocket请求(响应)数据(包括url,host,方法,状态码,头部及内容等)
  • 设置延迟请求(响应)
  • 限制请求(响应)速度
  • 在Composer里面构造请求
  • 可以把请求代理到其它服务器(支持socks和http代理)
  • 查看请求列表的Timeline
  • 查看页面JS脚本执行过程中抛出的异常(可以用在调试终端页面或远程调试)
  • 查看JS中的console[info, log, warn, error, fatal](这些方法在IE也可以使用)打印出来的数据对象(可以用在调试终端页面或远程调试)
  • 利用whistle集成的weinre查看或修改页面的DOM结构(可以用在调试终端页面或远程调试)
  • 使用通过插件的形式扩展的功能(插件可以用来扩展whistle的功能,特别是集成本地开发环境,方便开发人员使用),如:处理combo请求 (https://github.com/whistle-plugins/whistle.tianma)

whistle借鉴了Fiddler的一些优秀的设计,比如请求列表及其详细内容的展示(即Network),但whistle不是Fiddler的复制品,除了请求列表的展示外,whistle在操作请求及功能扩展上有着自己独特的方式,让修改请求(响应)操作变得更简单,并集成了终端(远程)调试工具。

Note:为了让大家能对下面内容更好的理解及快速上手whistle,请先按步骤安装好whistle:安装node、安装whistle、配置代理、启动whistle  (https://github.com/avwo/whistle#%E5%AE%89%E8%A3%85)

规则原理

Fiddler修改请求(响应)的数据时,需要对每个请求设置断点后–>手动修改–>手动放开请求,如果是同时修改多个请求或者多次修改某个请求时,体验不是很好;而whistle把对请求(响应)的操作分类,每一类对应一种协议(如:替换本地文件 file://),每个具体操作要用到的参数值放到协议后(如:file:///User/xxx/test.html中的/User/xxx/test.html),这样whistle把每个操作抽象成一个uri

问题来了,如果参数值有空格或需要多个参数(比如修改头部的一些字段),这个whistle是怎么处理的?

上述问题包含两个问题:

  1. 如何参数值有空格的问题?
    在单参数情形下,如果是文件路径或者是下面第二个问题要提到的请求参数类型(如:file://filepathresAppend://filepathreqHeaders://test=a%20b&referer=test等),可以用%20来代替,其它情形,可以用{key}的形式把参数值存到whistle的Values系统,如:ua://{chrome-ua},whistle会自动到Values里面找chrome-ua对应的值。
  2. 如何处理多个参数的情形?
    为方便用户使用,whistle尽可能把一些常用的操作精简到只有一个参数的情形(如请求头部字段,可以用协议req这种多参数的形式来新增或修改,对里面常用的字段,如refererua等也可以用独立的协议(refererua)来设置),但不可能把把所有操作都抽象成单个参数的情形。对于多参数情形,有如下3种方式:

    • 直接用请求参数的方式转成单参数的情形: reqHeaders://test=a%20b&referer=test,如果里面有空格要用%20替换
    • 按问题1的方式,用key代替,把value写到whistle的Values里面(reqHeaders://{test-reqHeaders}),而Values里面reqHeaders的值也可以有两种方式具体参考:JSON格式  (https://github.com/avwo/whistle/wiki/JSON格式)
    • 直接把值写到本地文件(reqHeaders:///User/xxxx/test.json),文件/User/xxxx/test.json里面reqHeaders的值也可以有两种方式具体参考:JSON格式  (https://github.com/avwo/whistle/wiki/JSON格式)

上面解决了把每个对web请求的操作用一个uri来表示的问题, 现在我们把对web请求的操作都可以抽象成一个operator-uri,如何用这些operator-uri来操作具体请求呢?

处理这个问题,whistle扩展了传统hosts配置方式,采用匹配请求url到operator-uri的映射:

pattern可以以下三种方式:

  • 域名匹配:www.example.com operator-uri
  • 路径匹配:www.example.com/... operator-uri
  • 正则匹配:/example/ operator-uri

为了兼容hosts的配置方式:

whistle默认匹配顺序是从上到下,从左到右,多个匹配也可以写成:

如果whistle可以判断operator-uri不可能为web请求的url,即不是如下uri形式:

或者pattern为正则表达式,满足这两种情况下,patternoperator-uri的顺序是可以调换的:

上面讲了Rules的一些配置规则原理及Values的用途,包括:operator-uri设计原理,规则的匹配顺序(从上到下,从左到右),匹配方式,什么情况下可以对调等等。

一些例子

下面举一些例子,让大家快速上手whistle(规则中用#作为注释符号,如果要查看或修改HTTPS、Websocket的请求(响应)数据,要开启HTTPS拦截功能:启用HTTPS  (https://github.com/avwo/whistle/wiki/启用HTTPS)):

  • host
    host的配置方式不仅完全兼容系统自带的配置方式,而且支持路径、正则匹配:

  • 端口映射(下面举得例子都是用域名匹配的方式,其它方式同理)

  • 本地替换

上述配置,如果我们访问http://www.example.com/,则whistle会先找是否有/User/xxx/test这个文件,如果没有就会匹配/User/xxx/test/index.html;如果我们访问http://www.example.com/test.html,则whistle会先在找文件/User/xxx/test/test.html,再找/User/xxx/test/index.html/test.html,如果没就返回404

这里只是举了几个小例子,whistle还有非常多的功能,如:reqHeadersresHeaderslogdisablefilterweinre等等,而且还支持插件扩展,更多功能请参考:Wiki(https://github.com/avwo/whistle/wiki),功能列表(https://github.com/avwo/whistle/wiki/功能列表)

后续规划

whistle是我业余时间在维护且会长期维护的项目,一般来说新版本(如果有)的发布放在周日晚上(修复影响功能的bug的版本不受时间限制,有新版本发布界面中的About菜单现会有红点提醒或者大版本发布则是直接弹框提醒,大家按提示更新就可以),下面是一些后面的规划内容:

  1. 插件whistle.websocket  (https://github.com/whistle-plugins/whistle.websocket)开发:用于查看websocket的请求内容
  2. 插件whistle.img (https://github.com/whistle-plugins/whistle.img)开发:用于查看抓包到的图片内容
  3. 插件whistle.settings(https://github.com/whistle-plugins/whistle.img)开发:用于一键安装系统代理及安装根证书(如果根证书不能一键安装,至少要做到点击能弹出根证书的安装对话框),也为后面的客户端版本做准备
  4. whistle的客户端开发:有打算把一些自动化测试的功能集成进来,设想的交互功能也会比Node强很多,因为可以直接操作本地文件
  5. 官网http://wproxy.org及文档建设:打算用Gitbook把文档重新整理,然后再i18n下及官网陆续建立起来

上面面规划的功能都只是在业余时间做,所以不能给出确切的完成时间,前面两个插件会尽快开发出来,想关注进度可以 Follow me:https://github.com/avwo

PS:为什么不把websocket、img、settings这几个插件功能集成到whistle里面,而要以插件的形式单独存在?主要是考虑到这几部分功能用到的时候相对比较少,及减少安装whistle过程中出现错误及运行过程中的内存问题,像处理websocket用到的中间件体积比较大且需要本地编译,img功能有比较耗内存和硬盘,而且把这部分功能放在独立的页面可能体验更好,综上考虑没有把这部分功能集成到whistle里面,但后续的客户端版本会直接集成进来。

1-webp

文章分类 未分类

发表评论

电子邮件地址不会被公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

在线交流

数百位业内高手和同行在等你交流
Reboot运维开发分享