一文搞定前端代理骚操作！再也不怕线上bug啦！

系统管理员 2022-10-18 04:53 430阅读 0赞

> 徐帅武，微医云服务团队前端工程师。一个热衷于周末“搞事情”的前端程序猿

![607082bc6b826c08114e5aefb9647631.png][]

## 前言 ##

为什么我们需要一个代理工具？一个灵活好用的代理工具对开发的作用有多大？

一个顺手的代理工具，可以让我们随心所欲的掌控我们的开发环境，当前环境前置服务挂了还要等重启？不！直接切一个可用环境接着我的开发。验证页面不同数据状态的流程还要造数据？不！直接代理修改数据走流程，省劲。特定机型线上问题抓耳挠腮不知如何定位？代理连上查看元素、远程 log 轻松定位问题所在......

使用代理不说能解决所有问题，但是至少可以在解决问题的流程上帮我们省大半的时间，而不是碰到环境问题就在那儿等重启![d3c5ace315734627e36f859b9e175645.png][]

## Whistle 介绍 ##

关于 Whistle 下面引用官方的

> Whistle(读音\[ˈwɪsəl\]，拼音\[wēisǒu\])基于 Node 实现的跨平台 web 调试代理工具，类似的工具有 Windows 平台上的 Fiddler，主要用于查看、修改 HTTP、HTTPS、Websocket 的请求、响应，也可以作为 HTTP 代理服务器使用，不同于 Fiddler 通过断点修改请求响应的方式，Whistle 采用的是类似配置系统 hosts 的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过 Node 模块扩展功能![8beb70e2208ecad948ff063da255599f.png][]

### 与 Charles 对比 ###

想必大部分人刚开始接触抓包代理的时候用的都是 Charles 和 Fiddler 这两个老牌抓包代理工具之一，笔者当初就是 Charles 入的门。但是后面了解到 Whistle 之后就毅然选择投入了它的怀抱。下面说一下笔者认为 Whistle 的几大优势。

*  开源免费，相比 Charles 的收费，开源的 Whistle 使用起来当然是更加的没有负担。
 *  易于安装，Whistle 基于 Node 实现，安装就是全局安装 npm 包，对于前端来说当然是更加的友好。
 *  配置集中灵活，Whistle 的各种功能都使用配置文件的方式集中管理，查看和修改都更加友好且易于分享。
 *  自由可编程，当内置功能都不能满足需求时，还可以使用 Npm 包的方式开发插件对于 JS 开发者来说更加的友好易用。

## 如何使用 ##

### 安装和使用 ###

因为是 npm 包，所以安装只需要一句话（Mac 或 Linux 的非 root 用户需要在命令行前面加 sudo，如：`sudo npm install -g whistle`）

# 安装
    npm install -g whistle
    # 启动
    w2 start
    # 重启
    w2 restart
    # 停止
    w2 stop

### 访问主界面 ###

一般情况下直接访问`http://localhost:8899/#network`这个地址即可，不使用默认端口的话，改为启动的端口号访问即可。界面如下：![cc4352e5e2033e2433cf186aa84d1602.gif][]

### 配置代理 ###

> **配置信息**
> 
> **代理服务器**：127.0.0.1 (如果部署在远程服务器或虚拟机上，改成对应服务器或虚拟机的 ip 即可)
> 
> **默认端口**：8899 (如果端口被占用，可以在启动时通过 -p 来指定新的端口，更多信息可以通过执行命令行 w2 help (v0.7.0 及以上版本也可以使用 w2 help) 查看)

由于 Whistle 不能自动设置系统代理，所以需要代理的内容需要手动配置

#### 系统代理 ####

这个不常用，各个系统设置系统代理方式不同,可自行查找设置方式

#### 浏览器代理（Chrome 为例） ####

虽然 Chrome 也可以设置代理，但是更推荐使用`SwitchyOmega`插件进行代理的管理，可以同时配置梯子的代理规则，不至于开了代理就不能访问 Google 了![1d82f3f9fac6b6ff8873fb7bbfe18f0b.png][]

#### 移动端代理 ####

移动端代理需要两个设备在同一 WiFi 下（网络互通），在设置中配置当前 Wi-Fi 的代理，以 iOS 为例：代理服务器为启动 Whistles 设备的 IP![743f1c09484568ad13db115844e78bf5.png][]

### https 证书 ###

**会配置或没有 https 需求的可跳过这一段**。

https 默认时不能查看其内容的我们需要安装自定义的根证书来进行 https 请求的查看，这部分内容没有什么特别的下面就直接把文档上的内容复制过来了。

下载根证书，开启捕获 HTTPS 请求：![fc36e16e86800e8325333913a311be64.png][]

#### 安装根证书 ####

> 证书按下面步骤安装后，如果还出现安全提醒，这个主要原因是之前你访问过该页面，导致长连接已建立，可以等段时间再访问、或重新打开浏览器，或重启下 Whistle：w2 restart

如上图下载完根证书后点击 rootCA.crt 文件，弹出根证书安装对话框。

**Windows:**

Installing a root certificate on Windows

![e848650f47639aca5a8320cc06f2e34f.png][]

下载证书后，双击证书，根据指引安装证书。证书安装过程，要确保证书存储到受信任的根证书颁发机构下。

**Mac:**

Mac 安装证书后，需要手动信任证书，步骤如下：

![bf5be7e44833ce682d83feb00a241112.png][]

打开证书管理界面，找到带有 whistle 的字样的证书，如果有多个又不确定最新安装的是哪个，可以全部删除后重新安装

![4dac7bfc04c06eb5cf7fd9e380813eda.png][]

双击证书后，点击 Trust 左边展开选项，红色部分选择 Always Trust （总是信任），点击左上角关闭当前界面会要求输入密码；输入密码后可 以看到证书上面红色的图标 x 不见了，到这一步说明完成证书安装。

![4f32a4f80a01ee4dc629beb9eedbcd38.png][]

**Firefox:**

菜单 > 首选项 > 高级 > 证书 > 证书机构 > 导入 -> 选中所有 checkbox -> 确定

**iOS**

手机设置代理后，Safari 地址栏输入 rootca.pro，按提示安装证书（或者通过 whistle 控制台的二维码扫码安装，iOS 安装根证书需要到连接远程服务器进行验证，需要暂时把 Https 拦截功能关掉） iOS 10.3 之后需要手动信任自定义根证书，设置路径：Settings > General > About > Certificate Trust Testings 具体可以看这里

**Android**

*  whistle 控制台二维码扫码安装，或者浏览器地址栏 rootca.pro 按提示安装
 *  部分浏览器不会自动识别 ca 证书，可以通过 Android Chrome 来完成安装
 *  android 6.0 之后的一些 app 在成功安装证书后仍然无法对 https 连接进行手抓包，有可能是该 app 没有添加信任用户自定义证书的权限。请确认该 app 是否有如下配置：

<base-config cleartextTrafficPermitted="true">
       <trust-anchors>
           <certificates src="system" />
           <certificates src="user" />
       </trust-anchors>
    </base-config>

这主要是因为 android 6.0 之后的版本默认配置发生了变化，更多请看 Android 开发文档。

#### 开启拦截 HTTPS ####

![a77729c1e8352755c6e522a4f2ccc012.png][]图中的打开的对话框有个 checkbox：

1.Capture HTTPS CONNECTs：开启 Https 拦截功能，只有勾上这个 checkbox 及装好根证书，Whistle 才能看到 HTTPS、Websocket 的请求

#### 自定义请求证书或根证书 ####

whistle 会自动生成根证书，并根据根证书对每个请求动态生成 https 证书，如果需要用自定义的证书，甚至根证书，可以有两种方式(只支持 .crt 格式的证书)：

把普通证书对 (如：test.crt 和 test.key、test2.crt 和 test2.key 等等) 或根证书 (名字必须为 root.crt 和 root.key)，放在系统的某个目录，如 /data/ssl，并在启动时添加启动参数 w2 start -z /data/ssl ，whistle 会自动加里面的证书 (v1.14.8 及以上版本支持) 把上述证书或根证书放在固定目录 ~/.WhistleAppData/custom\_certs/里面，whistle 会自动加里面的证书

> 优先级 -z dir > ~/.WhistleAppData/ > 内置证书

## 匹配规则 ##

Whistle 的匹配规则非常的多，这里介绍几种常用的匹配模式基本可以覆盖 90%的使用场景。详细规则可以查看【匹配规则】

**注：** 默认匹配规则都是下面这种形式：`pattern operatorURI`,匹配规则在左，操作规则在右。

### 域名匹配 ###

# 匹配域名 www.test.com 下的所有请求，包括 http、https、ws、wss，tunnel
    www.test.com operatorURI
    
    # 匹配域名 www.test.com 下的所有 http 请求
    http://www.test.com operatorURI
    
    # 匹配域名 www.test.com 下的所有 https 请求
    https://www.test.com operatorURI
    
    # 上述匹配也可以限定域名的端口号
    www.test.com:8888 operatorURI # 8888 端口
    www.test.com/ operatorURI # http 为 80 端口，其它 443 端口

### 路径匹配 ###

# 限定请求协议，只能匹配 http 请求
    http://www.test.com/xxx operatorURI
    http://www.test.com:8080/xxx operatorURI
    
    # 匹配指定路径下的所有请求
    www.test.com/xxx operatorURI
    www.test.com:8080/xxx operatorURI

### 通配符匹配 ###

通配符匹配以 ^ 开头，\* 为通配符，可以通过9 匹配通配符匹配的分组，$0 表示整个 URL。

# 通配符匹配必须以 ^ 开头
    # 访问 wy.guahao.com/abc/xyz/1.js 就会被映射到 /path/to/xyz/1.js
    ^wy.guahao.com/abc/***   /path/to/$1
    # 也可以用 $ 限制结尾
    # 只转发 index.js 结尾的 url
    ^wy.guahao.com/abc/***index.js$   /path/to/$1

\* 表示匹配到一个 / 就停下，而 \*\*\* 表示匹配多个

#### 域名通配符 ####

在域名中使用 \* 不需要用 ^ 开头，例如我们用`*.com operatorURI`时就是匹配 `guahao.com` 等，但是不匹配 `www.guahao.com`。而想要对所有子域名生效，可以用`***.com operatorURI`这样可以匹配 `wx.wy.guahao.com` 这样的域名

### 正则匹配 ###

对于非常灵活的匹配规则，可以使用正则匹配。

# 匹配所有请求
    /./ operatorURI
    # 匹配 url 里面包含多个关键字的请求
    /keyword/ operatorURI
    # 通过正则匹配，同样的 $1~$9 捕获分组，$0 表示整个 URL
    /(\d+).html/ operatorURI

## 常用功能 ##

### 绑定 Host ###

和 Host 文件写法相同，走代理的时候不会再查询本机的 Host 文件，修改这个 Host 配置没有缓存，立即生效

127.0.0.1 wy.guahao.com

### 替换请求 ###

调试一些有域名校验难以在本地查找的问题时（比如微信授权，微信 SDK 调用），可以将线上的页面代理到本地开发环境来进行问题排查。

针对一些非 Webpack 编译的资源可以将线上资源替换，达到直接调试线上的效果。前后端不分离的项目，本地环境难以配置时，可以在测试环境调试本地的 JS、CSS 文件。

# 本地替换线上
    127.0.0.1 wya.guahao.com
    https://wy.guahao.com http://wya.guahao.com:8080
    
    # 代理替换资源
    ^http://test.guahao-test.com/front/hps-h5-static/css/h5.min.css*** http://127.0.0.1:9091/front/hps-h5-static/css/h5.css
    ^http://test.guahao-test.com/front/hps-h5-static/js/h5.js*** http://127.0.0.1:9091/front/hps-h5-static/js/h5.js

### 替换返回内容 ###

文本类请求 append 内容、替换返回内容

# 说明：会把内容 append 到请求后面
    http://guahao.com/style.css resAppend://{myAppend.css}
    # 说明：完全替换请求内容
    http://guahao.com/style.css resBody://{myResBody.css}

### 注入 JS 脚本 ###

线上项目我们一般不会启用 vConsole，Eruda 之类的调试工具。出现问题时难以查看报错与其他信息。这时可以使用代理将 vConsole，Eruda 注入到页面中来查看问题。

# htmlAppend 操作即为在 html 部分最后注入 debugger 变量，变量内容在“Value”面板进行设置
    https://wy.guahao.com/ htmlAppend://{debugger}

**debugger 变量的内容：**

![7bc34f8f509582d8b880c18251fdd9b1.png][]![9947af0e70bd8898ff5ad8a2648e5178.gif][]

### 远程 Console.xxx 输出 ###

移动端调试的时候的痛点就是不能查看 log，及时我们用了上面的方法向页面注入 Eruda 之类的调试工具，也免不了两个设备来回切换的查看内容。Whistle 内部实现了类似浏览器的 Console 的远程 Log 平台，使用对应的规则就可以在 PC 端进行其他设备上 log 的查看

# wy.guahao.com 域名的网站远程打印 log
    # wy.guahao.com log://
    
    # 远程打印 log 同时注入脚本
    wy.guahao.com log://{injection-log}
    
    # --------- Value 部分 ------------
    # injection-log 内容
    console.log('-----------------start-------------------')
    console.log('远程 log')
    
    console.log('查看某个变量', window)
    
    console.log('-----------------end---------------------')

![e3788df87d6f89beecefe7ce3f5b5587.gif][]

### 集成 weinre 远程调试 ###

> Weinre 是 Apache 基础工程之一，是 WEb INspector REmote 的缩写。正如其名，它是和 Firebug 或浏览器调试工具类似，但是能够在远程运行调试 web 页面。所以如果你使用过火狐开发者工具或 Chrome 的调试工具，那么上手 Weinre 就会非常容易，非常自然。

但是使用 Weinre 的配置十分繁琐，Whistle 可以自动帮我们在页面注入 Weinre 的启动脚本，使我们使用 Weinre 变成了一句话的事情。

# 集成 weinre 的功能, key 为任意的字符串，主要用于区分页面
    wy.guahao.com weinre://[key]

![65e0280856681d24a7fa0018cbefec37.gif][]

## 小结 ##

上面就是开发过程中笔者常用的几个功能，Whistle 的功能远不止此。有兴趣的可以去 Whistle 文档查看详细内容，下面是它协议列表的一部分，可以看出功能非常的丰富。而且支持插件的编写，有自定义需求时还可以自己编写插件来实现所需的功能。![ecb21a38e74ae697ec2e361f1da646b2.png][]

往期推荐

[![47b1749a30b4dd3ccf5fbceee955aefc.png][]][47b1749a30b4dd3ccf5fbceee955aefc.png 1]

[Vite 太快了，烦死了，是时候该小睡一会了。][47b1749a30b4dd3ccf5fbceee955aefc.png 1]

[![0f8bed2ff3f15ed2fe1524e39c9265fd.png][]][0f8bed2ff3f15ed2fe1524e39c9265fd.png 1]

[如何实现比 setTimeout 快 80 倍的定时器？][0f8bed2ff3f15ed2fe1524e39c9265fd.png 1]

[![3c8837823a6f6e1dd4a2064080c5afbe.png][]][3c8837823a6f6e1dd4a2064080c5afbe.png 1]

[万字长文！总结Vue 性能优化方式及原理][3c8837823a6f6e1dd4a2064080c5afbe.png 1]

[![1939b91ae9c5c5bea0c250fd16478341.png][]][1939b91ae9c5c5bea0c250fd16478341.png 1]

[90 行代码的 webpack，你确定不学吗？][1939b91ae9c5c5bea0c250fd16478341.png 1]

### 最后    ###

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点个「**在看**」，让更多的人也能看到这篇内容（喜欢不点在看，都是耍流氓 -\_-）
2.  欢迎加我微信「huab119」拉你进技术群，长期交流学习...
3.  关注公众号「**前端劝退师**」，持续为你推送精选好文，也可以加我为好友，随时聊骚。
4.

![d9be1b1eae47eecb622cd4906b3656e2.png][]

点个在看支持我吧，转发就更好了

[607082bc6b826c08114e5aefb9647631.png]: /images/20221014/c477e7ec0632450f83480f7b2a7c606f.png
[d3c5ace315734627e36f859b9e175645.png]: /images/20221014/bbec7aab1f604042902d9f41e69bbdd0.png
[8beb70e2208ecad948ff063da255599f.png]: /images/20221014/5f3e176742464728aa34b09926813a20.png
[cc4352e5e2033e2433cf186aa84d1602.gif]: /images/20221014/e5058c03687c4334b5cfa999cb0eb02a.png
[1d82f3f9fac6b6ff8873fb7bbfe18f0b.png]: /images/20221014/3c7d73734c924de19a730ce956560f20.png
[743f1c09484568ad13db115844e78bf5.png]: /images/20221014/5187e992faed4a0bb9dbda18cf7208c8.png
[fc36e16e86800e8325333913a311be64.png]: /images/20221014/b4c821033f824533854d17a854117211.png
[e848650f47639aca5a8320cc06f2e34f.png]: /images/20221014/67e967659df84bae9251271865572466.png
[bf5be7e44833ce682d83feb00a241112.png]: /images/20221014/eebda4b8c816495284ec5f96a1ed132f.png
[4dac7bfc04c06eb5cf7fd9e380813eda.png]: /images/20221014/9960b2b7457340c0bcebeaa94d16e830.png
[4f32a4f80a01ee4dc629beb9eedbcd38.png]: /images/20221014/b7a5d4152b4248f59a353a9c6c9f8338.png
[a77729c1e8352755c6e522a4f2ccc012.png]: /images/20221014/890c633bf16a404eaec68f9302b782d1.png
[7bc34f8f509582d8b880c18251fdd9b1.png]: https://img-blog.csdnimg.cn/img_convert/7bc34f8f509582d8b880c18251fdd9b1.png
[9947af0e70bd8898ff5ad8a2648e5178.gif]: /images/20221014/69a07bb77ef24c7592ee5280be6678d1.png
[e3788df87d6f89beecefe7ce3f5b5587.gif]: /images/20221014/6008201fef5949c4b8d13e5838b39c2d.png
[65e0280856681d24a7fa0018cbefec37.gif]: /images/20221014/fd39a684c70349cb93e40d4bb68f8b8b.png
[ecb21a38e74ae697ec2e361f1da646b2.png]: /images/20221014/b34a5b63ed90403b86587f01a07097d0.png
[47b1749a30b4dd3ccf5fbceee955aefc.png]: /images/20221014/3ac7c2cedfe342cb869bc99308fe3db0.png
[47b1749a30b4dd3ccf5fbceee955aefc.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24fb1deb5c6a70410889666afec7da71e77e5ab4b17b7677a22a554fdc9ee2f3d97006322&idx=1&mid=2247487534&scene=21&sn=947df5483ab7508f8d2f9abd8c2f11a8#wechat_redirect
[0f8bed2ff3f15ed2fe1524e39c9265fd.png]: /images/20221014/487acd83c7474fbb9cae9996780b6a9f.png
[0f8bed2ff3f15ed2fe1524e39c9265fd.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c25151deb5d847686e17e267e9659124dd4250f9df681564ce87a55190625bfd49adc02661&idx=1&mid=2247487182&scene=21&sn=ae83a65d4e6a9ee8b3b98a4cbe20c96b#wechat_redirect
[3c8837823a6f6e1dd4a2064080c5afbe.png]: /images/20221014/a94143a2147345f997a3d57c2077b0d3.png
[3c8837823a6f6e1dd4a2064080c5afbe.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c251e2deb5d8f455c581ddaf84a503c912d4bc2def725105fdf7442af6df6c6af0dee01b7b&idx=1&mid=2247487101&scene=21&sn=92c60dd47cf94731829bf006cd2b5e36#wechat_redirect
[1939b91ae9c5c5bea0c250fd16478341.png]: /images/20221014/7f58bf491eef4d75bb0fbe00228ca50e.png
[1939b91ae9c5c5bea0c250fd16478341.png 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDU3NzM5Mg%3D%3D&chksm=e9c24f0adeb5c61c4c64564fa3ef07fae165e0ba9c115c5846db1a94cd97f5f101e764c9b604&idx=1&mid=2247487637&scene=21&sn=bb353093eee2f07cfcfc7e4ad460ce7f#wechat_redirect
[d9be1b1eae47eecb622cd4906b3656e2.png]: /images/20221014/629aebba7181495da3851e139586da82.png