微前端本地调试神器对比：Requestly、Redirector、Tampermonkey 该怎么选？
前言
在微前端项目开发过程中，经常会遇到这样的场景：
测试环境主应用
http://test-server:8080
↓ 点击菜单
用户中心
http://test-server:7101
订单中心
http://test-server:7102
报表中心
http://test-server:7103开发人员希望：
- 主应用继续使用测试环境
- 仅将某个子应用切换到本地开发环境
- 不修改测试环境配置
- 不影响其他开发人员
例如：
用户中心 → localhost:5173
订单中心 → 测试环境
报表中心 → 测试环境这时候浏览器端请求重写工具就派上用场了。
本文对比三款常用工具：
- Requestly
- Redirector
- Tampermonkey
帮助大家选择最适合自己的方案。
---
一、Requestly
简介
Requestly 是目前最流行的浏览器请求拦截与重写工具。
功能非常强大：
- URL Redirect
- Replace Response
- Modify Headers
- Mock API
- Delay Request
- Script Injection
可以理解为：
浏览器版 Charles
+
浏览器版 Fiddler
+
浏览器版 Mock Server---
使用场景
例如：
测试环境子应用：
http://test-server:7101/*重定向到：
http://localhost:5173/*配置一条规则即可：
Source:
http://test-server:7101/*
Destination:
http://localhost:5173/$1---
优点
功能最全面
不仅能重定向：
URL Redirect还能：
修改响应
修改请求头
模拟接口
Mock数据---
界面友好
所有配置均可视化。
不需要写代码。
适合：
- 前端开发
- 测试工程师
- 产品经理
---
支持团队共享
规则可以导出导入。
多人协作方便。
---
缺点
相对较重
插件体积较大。
功能很多但日常只用到一小部分。
---
规则管理复杂
项目多了以后：
规则A
规则B
规则C
规则D容易混乱。
---
适用人群
推荐指数：
★★★★★
适合：
- 企业项目
- 微前端项目
- API调试
- 测试环境联调
---
二、Redirector
简介
Redirector 是一个经典的 URL 重定向插件。
它只做一件事：
URL A
↓
URL B例如：
http://test-server:7101/*替换成：
http://localhost:5173/*---
优点
非常轻量
安装后几乎无感。
内存占用极低。
---
配置简单
一条规则即可：
Include:
http://test-server:7101/*
Redirect:
http://localhost:5173/$1---
性能好
没有额外功能。
执行效率极高。
---
缺点
只能改URL
不能：
修改Header
修改Response
Mock接口---
无法处理复杂逻辑
例如：
根据用户角色跳转
根据请求参数跳转做不到。
---
适用人群
推荐指数：
★★★★☆
适合：
- 微前端联调
- 本地替换资源
- 简单开发场景
---
三、Tampermonkey
简介
Tampermonkey（油猴）本质上是：
浏览器脚本执行平台通过 JavaScript 控制页面行为。
开发者可以编写脚本：
window.fetch
XMLHttpRequest
DOM
Cookie
LocalStorage全部可以控制。
---
使用场景
例如：
拦截 fetch：
const oldFetch = window.fetch;
window.fetch = function (...args) {
let url = args[0];
if (url.includes("http://test-server:7101")) {
args[0] = url.replace(
"http://test-server:7101",
"http://localhost:5173"
);
}
return oldFetch.apply(this, args);
};---
优点
灵活度最高
理论上：
浏览器能干的事
Tampermonkey都能干---
可以只针对某个站点
例如：
// @match http://test-server:8080/*只在当前系统生效。
---
可实现复杂逻辑
例如：
菜单A走本地
菜单B走测试环境
菜单C走预发布环境都能实现。
---
方便增加开关
const DEBUG = true;关闭即可恢复。
---
缺点
需要写代码
对于测试人员不太友好。
---
维护成本较高
项目升级后：
接口变了
页面变了
URL变了脚本可能失效。
---
调试困难
复杂脚本容易出现兼容问题。
---
适用人群
推荐指数：
★★★★★
适合：
- 高级前端开发
- 微前端架构师
- 需要高度定制的场景
---
三者对比
| 对比项 | Requestly | Redirector | Tampermonkey | | ---------- | --------- | ---------- | ------------ | | 学习成本 | ★☆☆☆☆ | ★☆☆☆☆ | ★★★★☆ | | 配置难度 | ★☆☆☆☆ | ★☆☆☆☆ | ★★★★☆ | | 灵活度 | ★★★★☆ | ★★☆☆☆ | ★★★★★ | | URL重定向 | √ | √ | √ | | 修改Header | √ | × | √ | | 修改Response | √ | × | √ | | Mock接口 | √ | × | √ | | 编程能力要求 | 无 | 无 | 有 | | 性能 | ★★★☆☆ | ★★★★★ | ★★★★☆ | | 微前端调试 | ★★★★★ | ★★★★☆ | ★★★★★ |
---
我的建议
如果你是普通前端开发：
首选 Requestly功能全面，开箱即用。
---
如果你只想：
测试环境子应用
↓
本地子应用简单替换 URL：
首选 Redirector轻量、稳定、够用。
---
如果你是高级开发人员，希望：
只替换某个菜单
动态切换环境
注入调试代码
修改接口返回那么：
首选 Tampermonkey自由度最高，没有天花板。
---
总结
对于微前端项目本地联调，我个人的选择顺序通常是：
- Redirector（简单场景）
- Requestly（团队开发）
- Tampermonkey（复杂定制）
一句话总结：
Redirector = 最轻量
Requestly = 最省心
Tampermonkey = 最强大根据团队规模和调试需求选择即可。
