whistle: web代理调试工具

一、背景

前端同学日常在本地开发联调或者线上问题排查等场景中，需要查看网络请求（Request & Response）、特定场景数据Mock、域名映射等一系列操作；特别在移动端场景开发时，更是需要经常抓包和请求Mock。单独的本地开发工具（如webpack的proxy）及Chrome调试不能满足需求，需要灵活的借助于一些请求代理工具来辅助我们日常开发工作。比如Mac下常用的便是Charles，能帮助我们拦截请求、篡改请求、本地代理转发等开发调试工作。

二、常规代理工具

名词解释

抓包：包，是指网络数据包，包括客户端发送的请求和服务端返回的数据。PC 端，可以通过 chrome 直观的看到网络状态，但是 App 抓包则需要专门的抓包工具了。

代理：是指一个中间角色，它可以在本地调试时不需要经过鉴权或者其他限制的情况下，直接代理 url 请求，可以代理请求，也可以代理响应

什么是 HTTP 代理

代理是客户端到服务端的中转服务。它的基本工作原理如下：

其中：

1. 不经过代理的请求：客户端和服务端直接建立连接后，即可开始交换数据。
2. 经过代理的请求：客户端不与服务端直接建立连接，而是先跟代理建立连接后，将目标服务器的地址发送给代理，通过代理再跟服务端建立连接，这里如果代理服务为 HTTP Server，则称为 HTTP 代理。

Charles

charles 通过把自己设置成系统网络代理服务器，使得所有系统发出的网络请求通过它来完成，从而实现网络的截取和分析。

使用方式

• 下载对应的安装包，https://macwk.com/soft/charles

• Proxy->macOC Proxy勾选，默认8888端口
  代理状态以网络状态里面为准，Charles某些时候会展示不正确

  

即可数据抓包

• https请求需要安装并信赖Charles颁发的证书
  • Help->SSL proxying-> install xxx
  • 安装后，需要去钥匙串将该证书设置为根证书
• 其他：
  • 手机等移动端代理类似
  • Charles和其他翻墙工具冲突时解法
  • Proxy SwitchyOmega
  • Charles自带的external Proxy settings

常用功能

1. 请求查看

2. Map Local（本地代理）

• 使用本地mock数据模拟场景数据，无侵入代码

  

3. Map Remote（远端代理）

• 使用远端域名，实际请求是指定链接（可以是本地服务也可以是远端地址）

4. Breakpoint/Rewrite等

• 接口断点
• 修改或新增请求Request/Response的Header头等

三、为什么使用whistle

对比成名已久的 Fiddler 和 Charles，今天介绍的 whistle 作为后起之秀，优势很明显。

过程中使用到的问题：

• Charles/Fiddler占用内存很大，长期不使用导致内存不够

• 工具使用上流程偏繁琐，且配置不能互相共享

而whistle是更加适合 Web 开发者、使用更简单、功能也更加实用。

四、whistle是什么及使用方式

功能介绍

基于Node实现的跨平台web调试代理工具，类似的工具有Windows平台上的Fiddler，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能。

可编程、插件强大的抓包代理工具🐂🍺

• 前端友好型
• 万物皆配置

使用方式

handbook：https://wproxy.org/whistle/

1. 安装及启动

• 安装：npm install -g whistle
• 启动：w2 start

2. 配置代理

1. 全局代理 (推荐)，可通过命令行设置参考*设置代理*（即w2 proxy），也可以手动配置：

   Mac: System Preferences > Network > Advanced > Proxies > HTTP or HTTPS

   

2. 浏览器代理 (推荐)：安装浏览器代理插件

• 安装Chrome代理插件：推荐安装SwitchyOmega

移动端需要在设置中配置当前Wi-Fi的代理，以 iOS 为例：

3. 访问配置页面

• 启动服务可访问：http://127.0.0.1:8899/ or http://local.whistlejs.com/

4. 安装根证书

http://wproxy.org/whistle/webui/https.html

配置与匹配

whistle的所有操作都可以通过配置实现。配置方式扩展于系统hosts配置方式(ip domain或组合方式ip domain1 domain2 domainN)，具有更丰富的匹配模式及更灵活的配置方式。

配置方式

whistle将请求url与pattern匹配，如果匹配到就执行operatorURI对应的操作

pattern opdratorURI   

匹配规则

而whistle的匹配模式(pattern)大体可以分成 域名、路径、正则、精确匹配、通配符匹配：

域名匹配 & 路径匹配：

ecom.meishi.test.meituan.com operatorURI 
ecom.meishi.test.meituan.com/meishi/gw operatorURI 

精确匹配：与上面的路径匹配不同，路径匹配不仅匹配对应的路径，而且还会匹配该路径下面的子路径，而精确匹配只能指定的路径，只要在路径前面加$即可变成精确匹配

通配符匹配：

# 通配符匹配，以 ^ 开头(如果需要限制结束位置可以用 )，* 为通配符，支持通过0...9获取通配符匹配的字符串，其中$0表示整个请求url
^www.example.com/test/*   operatorURI

# 通配域名匹配：
# 匹配二级域名以 .com 结尾的所有url，如: test.com, abc.com，但不包含 *.xxx.com
*.com   operatorURI

优先级：相同协议规则的默认优先级从上到下，即前面的规则优先级匹配高于后面

常用功能

1. host转发

相当于浏览器层的host文件，如果找不到再去查找本机的host文件。whistle不仅支持传统的host配置，还支持子路径和端口的host转发配置

配置方式：Rules -> create- > host

test.meituan.com     127.0.0.1         # 域名映射
test.meituan.com     127.0.0.1:3000    # 端口映射
test.meituan.com/api 127.0.0.1:3000    # 路径匹配
test.meituan.com     host://www.qq.com # CNAME

如果我们的 API 是同源的，并且我们只想将静态资源的请求替换为本地开发中的，还可以这样配置：

example.com/api example.com/api  # 假设所有 API 路径为 /api，仍然走实际地址 
example.com localhost:8000       # 其他请求到本地 

2. local files replacing（本地替换）

把响应替换成本地文件内容

ecom.meituan.com/meishi/gw/account/biz/getUserInfo file:///Users/jiangpeng/Downloads/getUserInfo.txt

3. req && res（修改请求和响应）

ecom.meituan.com reqHeaders://{req-headers} // 添加请求头
ecom.meituan.com reqCookie://{reqCookie.json} // 添加cookie
ecom.meituan.com urlParams://{reqCookie.json} // 添加url参数

ecom.meituan.com resHeaders://{res-headers} // 添加响应头
ecom.meituan.com resDelay://3000  // 响应延时

4. Inject html、js、css（注入html、js、css）

ecom.meituan.com jsAppend:///Users/jiangpeng/workspace/repo/merchant-customer-platform/src/index.js
ecom.meituan.com htmlAppend://{add.html}

5. and More

插件

为了满足一些特定业务场景的需要，whistle提供了插件扩展能力，通过插件可以新增whistle的协议实现更复杂的操作、也可以用来存储或监控指定请求、集成业务本地开发调试环境等等

【👍🏻👍🏻👍🏻墙裂推荐】whistle.inspect：集成 eruda、vConsole、mdebug 等调试H5页面工具的插件

【👍🏻👍🏻👍🏻墙裂推荐】whistle.script：Custom extension script for whistle

【👍🏻👍🏻👍🏻墙裂推荐】whistle.chii：与 weinre 一样的远程调试工具，主要是将 web inspector 替换为最新的 chrome devtools frontend

• 安装：w2 install whistle.inspect whistle.script

利用whistle自由发挥万能的JS

whistle.script是whistle的一个扩展脚本插件，可以直接在界面上引用全局安装的Node模块及Node的内容模块编写脚本操作请求及其响应，所有正常Node程序可以实现的功能

• 动态设置whistle规则
• 拦截请求响应
• 控制请求响应速度
• 修改请求url、请求方法、请求头、请求内容
• 修改响应状态码、响应头、响应内容
• 在插件界面的Console上显示脚本程序 console.xxx 的内容，如果可以打印响应的内容或调试信息等

比如：

• 拼接sourceMap/改接口数据/格式化显示数据/...

六、后话

除了本文提到的代理调试，还有云真机、Android真机插线调试、不插线调试、全链路Mock测试等等方式；

可见，单一的工具绝不是万能的，选择合适的工具或组合解决自己面临的问题、提升自己的调试效率及开发体验就是正解。