抓包分析、跨域处理、mock 数据、线上替换、资源注入、vconsole、日志调试
我们前端代理经常使用的是 webpack 或者 vite 的 devServer proxy 来代理本地开发，最近被安利了 whistle：它不仅仅可以设置代理，也可以进行抓包分析、手机端抓包等等。下面就介绍下 whistle 的安装配置及场景。
文档地址：whistle 官方文档（可访问 https://wproxy.org/whistle/ 查阅）
whistle 是基于 node 的，所以你要先下载 node 并全局安装 whistle：
npm install -g whistle // 全局安装
w2 start // 启动whistle此时启动成功则展示启动信息：
我们打开对应的链接 http://127.0.0.1:8899/ 即可打开 whistle 的配置页面。
在 whistle 配置页下载证书并双击运行安装。
设置代理配置，这里就填 whistle 的启动代理地址（127.0.0.1:8899），然后应用此配置。
点击浏览器插件图标，可以将此插件固定到标签栏，选择 whistle 运行（没有出来的话多点击几次或者重启电脑浏览器）。
此时我们都配置成功了，所有的浏览器访问都会经过我们启动的 whistle 服务地址 127.0.0.1:8899 进行转发，可以在浏览器打开 http://baidu.com，看下是否能抓包。
简单写一个后端模拟接口，我们后端端口在 3000，写个模拟接口：
const express = require('express');
const app = express();
app.get('/list', (req, res) => {
res.send({
code: 200,
data: [
{id: 1, name: 'apple'},
{id: 2, name: 'banana'},
{id: 3, name: 'orange'}
]
});
});
app.listen(3000, () => {
console.log('Example app listening on port 3000!');
});查看本地的 ip 打开此接口，如本地 IP 和接口地址如下 http://10.56.181.203:3000/list，打开可以显示接口数据（cmd 执行 ipconfig 查看本地 ip）。
如果我们的前端服务地址是 5173 端口，请求这个地址就会跨域：
<template>
<div>
<h1>用户信息</h1>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const user = ref(null);
onMounted(async () => {
try {
const response = await fetch('http://127.0.0.1:3000/list');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log(data);
// 可以在这里将数据赋值给 user 变量
// user.value = data;
} catch (error) {
console.error('请求出错:', error);
}
});
</script>打开 http://127.0.0.1:8899/#rules 面板配置：
http://10.56.181.203:3000/list resCors://* // 这是设置了 access-control-allow-origin: * 允许跨域保存并且再次执行刷新页面，接口已经不再跨域。
也可以设置 enable 解决跨域：
http://10.56.181.203:3000/list resCors://enable依然可以整个端口设置而不是某一个接口：
http://10.56.181.203:3000 resCors://*我们可以增加配置，如上方的接口地址，配置返回的结果可以是自己自定义本地文件：
http://10.56.181.203:3000/list C:\Users\Administrator\Desktop\wh\test.json重新请求接口看返回如下，这是自己本地的 json 文件，基于此我们可以进行自定义的 mock 数据。
加入我们有一个文件上线报错，我们无法线上调试，可以将线上的文件替换为本地文件，在本地调试。如找任何一个线上的 js 替换为本地 js（如百度地址的任意一个 js，本地创建一个 alert）：
https://pss.bdstatic.com/static/superman/js/lib/esl-d776bfb1aa.js C:\Users\Administrator\Desktop\wh\test.js可以看到线上的 js 已经替换为本地的，你可以修复查找问题。
我们可以为线上环境注入资源，如注入本地的 css 改变线上的样式，本地开发的时候直接看线上效果，方便生产环境部署。为百度注入一个 css，颜色设置为绿色：
//color.css
* {
color: green !important;
}https://www.baidu.com css://C:\Users\Administrator\Desktop\wh\color.css跟场景 1 效果类同，可以做代理转发，也可以做 IP 转发：访问 http://aaa.com 会被转发到 http://www.baidu.com，可借助此实现跨域代理。
http://aaa.com http://www.baidu.com首先 values 创建引入及执行的代码段：vconsole.js 是源码，newconsole.js 实例化。
// newconsole.js
new VConsole();rules 做如下配置：
https://www.baidu.com jsPrepend://{vconsole.js} # 本地引入
https://www.baidu.com jsPrepend://{newconsole.js} # 实例化执行可以看见给百度增加了 vconsole，借助此可以很方便地调试线上及移动端。
除了上面的注入 vconsole，我们可以开启日志功能，在 whistle 看见所有的请求，也起到了线上移动端调试作用：
https://www.baidu.com log://可在 network 查看到请求，console 也可以打印出来。
| 场景 | 规则写法 | 用途 |
|---|---|---|
| 跨域处理 | url resCors://* | 接口添加跨域响应头 |
| 本地 mock | url C:\path\test.json | 接口返回改为本地文件 |
| 替换线上文件 | 线上url 本地文件 | 线上 js 替换为本地调试 |
| 注入资源 | url css://本地文件 | 线上注入本地样式 |
| 请求转发 | urlA urlB | 代理 / IP 转发 |
| 注入 vconsole | url jsPrepend://{file} | 移动端 / 线上调试 |
| 日志抓包 | url log:// | 请求日志与打印输出 |
我们介绍了如何安装 whistle，也介绍了使用场景，如设置代理、注入资源等等。