MockMonkey: 前端开发神器！浏览器本地 Mock API，再也不用等后端接口了前端开发总是等后端接口？试试 M

前端开发神器！浏览器本地 Mock API，再也不用等后端接口了

零依赖、零侵入、可视化界面 —— 让前端开发不再等接口！

前言

作为前端开发，你是否遇到过这些场景？

🔥 后端接口还没开发好，只能硬等，前端项目进度卡壳
😤 联调时接口频繁变动，返工重来
🤔 想测试各种边界情况，但后端返回的数据太单一
📱 需要在无网络环境下开发演示

传统的解决方案各有痛点：

写死前端数据 → 代码里到处是 if (mock)，污染代码
使用 Mock.js 等库 → 需要侵入式改造项目代码
搭建 Mock 服务器 → 部署麻烦，团队协作成本高
使用 Charles/Fiddler → 配置复杂，不够直观

今天给大家推荐一款浏览器原生 Mock 工具 —— MockMonkey，无需后端服务、零侵入、可视化操作，让前端开发不再等接口！

什么是 MockMonkey？

MockMonkey 是一个基于 Tampermonkey 的油猴脚本，可以在浏览器中直接拦截和 Mock XHR/Fetch 请求。

核心特性

🎯 请求拦截 - 拦截 XMLHttpRequest 和 Fetch 请求
🔧 可视化界面 - 直观的管理面板，无需控制台命令
🔁 规则持久化 - 规则自动保存到 localStorage，刷新不丢失
🎭 Mock.js 集成 - 内置 @name、@email 等占位符生成随机数据
🔌 网络监控 - 实时请求日志，一键从请求创建 Mock 规则
📥📤 导入导出 - 批量备份和恢复规则

技术栈：TypeScript 5.7 + Vite 6.0 + Vitest，代码质量有保障！

快速上手

安装步骤

安装篡改猴 (如果没有的话)

按照 www.tampermonkey.net/ 说明安装浏览器插件。

安装后需要在浏览器“管理扩展程序”中打开在“开发者模式”，已经在插件上“允许运行用户脚本”。详见 zhuanlan.zhihu.com/p/191822159… （同样使适用chrome）

安装MockMonkey脚本

点击 github.com/ikaven1024/… 链接，自动进入篡改猴安装界面。

使用方法

安装后，访问任意网页，你会看到右下角出现一个猴头按钮：

点击打开管理面板
可拖拽调整按钮和面板位置（自动保存）

面板有三个标签页：

📋 规则管理页

查看所有 Mock 规则
启用/禁用规则（点击 🟢/⚫ 图标）
编辑/删除规则
导出/导入规则

➕ 添加规则页

配置 URL 模式（支持字符串和正则）
设置响应数据（支持 Mock.js 占位符）
配置延迟、状态码、响应头

🌐 网络监控页

实时显示所有网络请求（最多 500 条）
查看请求方法、URL、状态码、耗时
点击请求快速创建 Mock 规则

实战案例

github.com/ikaven1024/… 在Swagger Petstore演示了如何快速创建mock。

与其他方案对比

方案	侵入性	配置复杂度	网络依赖	可视化
写死数据	高（污染代码）	低	无	无
Mock.js	高（改造项目）	中	无	无
Mock 服务器	低	高	有	部分支持
Charles/Fiddler	低	高	有	中
MockMonkey	零侵入	低	无	✅

技术实现原理

核心架构

MockMonkey/
├── core/
│   ├── MockManager.ts      # Mock 规则管理器
│   ├── Interceptor.ts      # 请求拦截器
│   └── RequestRecorder.ts  # 网络请求记录器
├── ui/
│   └── Panel.ts            # 可视化管理面板
├── types/
│   └── index.ts            # TypeScript 类型定义
└── index.ts                # 入口文件

拦截原理

劫持原生方法：覆盖 window.XMLHttpRequest 和 window.fetch
URL 匹配：根据配置的 URL 模式（字符串或正则）匹配请求
响应拦截：匹配成功则返回 Mock 数据，否则放行原请求
持久化存储：规则和请求记录存储在 localStorage

关键代码

// 拦截 XMLHttpRequest
const originalXHR = window.XMLHttpRequest;
window.XMLHttpRequest = class extends originalXHR {
  open(method: string, url: string) {
    // 检查是否匹配 Mock 规则
    const mockRule = mockManager.match(url);
    if (mockRule) {
      this._mocked = true;
      this._mockData = mockRule;
    }
    super.open(method, url);
  }

  send() {
    if (this._mocked) {
      // 返回 Mock 数据
      this._triggerMock();
    } else {
      // 发送真实请求
      super.send();
    }
  }
};

团队协作

导出规则分享

在「规则管理」页点击「导出规则」
复制导出的 JSON 数据
分享给团队成员，他们导入即可

Git 配合（推荐）

将 Mock 规则配置文件提交到项目仓库：

// mock-rules.json
[
  {
    "url": "/api/user/info",
    "response": { "code": 200, "data": { "name": "@name" } },
    "delay": 0,
    "status": 200
  }
]

团队成员导入后即可统一使用相同的 Mock 数据！

性能优化

请求记录最多保留 500 条，避免内存溢出
使用 localStorage 持久化，性能影响极小
支持「禁用所有规则」开关，一键切换真实/Mock 环境

总结

MockMonkey 是一款轻量、强大、零侵入的浏览器 Mock 工具，完美解决了前端开发中的接口等待问题。

适用场景： ✅ 前端先行开发，后端接口未就绪 ✅ 接口联调时快速定位问题 ✅ 测试各种边界情况和异常状态 ✅ 演示 Demo 开发，无需真实后端

不适用场景： ❌ 需要复杂业务逻辑的 Mock ❌ 需要与其他系统交互的接口

互动环节

你在前端开发中遇到过什么 Mock 相关的痛点？欢迎在评论区讨论！

相关阅读：

MockMonkey: 前端开发神器！浏览器本地 Mock API，再也不用等后端接口了