PocketMocker：一款“所见即所得”的浏览器端可视化 HTTP Mock 工具
前言：我们为什么还需要另一个 Mock 工具？
在前端开发中，Mock 数据是一个绕不开的环节。但回看我们手头的工具，似乎总在两个极端之间摇摆：
- 重型平台 (YApi / Postman)：功能强大，但需要频繁切换窗口，配置繁琐，且很难与本地代码紧密结合。
- 代码级库 (Mock.js / MSW)：虽然集成在项目中，但修改数据通常需要改代码、保存、热重载，反馈链路长，且对非静态数据（如根据参数返回不同结果）的支持往往不够直观。
我们不禁思考：有没有一种工具，能像 Chrome DevTools 一样直接"生活"在浏览器里？点开就能改，改完立即生效，而且不污染我的业务代码？
这就是 PocketMocker 诞生的初衷。
什么是 PocketMocker？
所见即所得的浏览器端可视化 HTTP 调试工具。
PocketMocker 是一款零侵入的前端 Mock 工具。与传统的 Mock 方案不同，它直接嵌入在你的页面中 （通过 Shadow DOM 隔离），让你在开发时可以实时拦截 fetch 和 XMLHttpRequest，动态修改响应数据、模拟网络延迟和异常状态码。
🔗 在线演示 : https://tianchangnorth.github.io/pocket-mocker/ 🔗 GitHub 仓库 : https://github.com/tianchangNorth/pocket-mock
核心亮点
1. 所见即所得的可视化编辑
不再需要在代码里写一大堆 Mock 规则。PocketMocker 提供了一个内置的 智能控制台（基于 CodeMirror 6），支持 JS 语法高亮、格式化和深色模式。你可以像在 IDE 里一样编写 Mock 数据，保存即生效，无需刷新页面。
2. 动态响应 (Dynamic Response)
告别死板的静态 JSON！PocketMocker 支持编写 JavaScript 函数 来生成响应。这意味着你可以根据请求的 Query 参数或 Body 内容，返回不同的数据，甚至模拟复杂的业务逻辑。
(req) => {
// 模拟根据 ID 返回不同用户
if (req.query.id === 'admin') {
return { id: 1, name: "管理员", role: "admin" };
}
// 模拟 403 错误
if (!req.headers.token) {
return { status: 403, body: { msg: "未授权" } };
}
return { id: 2, name: "访客" };
}
3. 双模持久化：平衡个人与团队
PocketMocker 设计了独特的渐进式架构：
- 本地模式 (Local Mode) ：默认使用
localStorage。无需任何后端配置，适合个人开发、Demo 演示，刷新页面数据不丢失。 - 团队模式 (Server Mode) ：配合 Vite 插件 ，工具会自动将你在浏览器中编辑的规则同步保存到本地文件（如
mock/index.ts）。这样，Mock 规则就可以随 Git 提交，实现团队共享。
4. 智能数据生成与导入
内置了强大的 Mock 语法引擎，支持 @email, @image, @cname 等占位符，快速生成逼真的测试数据。同时，支持一键导入 Postman Collection 和 OpenAPI (Swagger) 规范，自动生成 Mock 规则。
5. 零侵入设计
为了不影响你的业务页面，PocketMocker 的 UI 完全封装在 Shadow DOM 中，样式绝对隔离。无论你的项目是用 React, Vue 还是原生 JS，它都不会污染你的 CSS。
快速开始
安装
npm install pocket-mocker --save-dev
方式一：零配置使用（推荐用于快速体验）
在你的入口文件（如 src/main.ts）中引入：
import { pocketMock } from 'pocket-mocker';
if (process.env.NODE_ENV === 'development') {
pocketMock();
}
启动项目，你会在右下角看到 PocketMock 的浮窗。
方式二：配合 Vite 插件（推荐用于生产级开发）
配置 vite.config.ts，解锁文件同步功能：
import { defineConfig } from 'vite';
import pocketMockPlugin from 'pocket-mocker/vite-plugin';
export default defineConfig({
plugins: [
pocketMockPlugin() // 自动检测并开启 Server Mode
]
});
技术实现细节
- 拦截原理 ：通过 Monkey Patching 技术重写了全局的
window.fetch和XMLHttpRequest原型链，实现对网络请求的无感拦截。 - UI 隔离：使用 Web Components (Shadow DOM) 封装调试台，确保样式沙箱化。
- 编辑器：集成了 CodeMirror 6，解决了在 Shadow DOM 下的样式和事件冒泡问题，提供了 IDE 级的编辑体验。
- 函数序列化：为了在 LocalStorage 中存储动态函数，我们实现了一套 String Hydration 机制，将函数序列化存储，运行时动态还原。
参与贡献
PocketMocker 是一个年轻的开源项目，我们非常欢迎社区的反馈和贡献。如果你在使用过程中遇到问题，或者有新的功能建议，欢迎提 Issue 或 PR！
如果这个工具对你有帮助，哪怕只是一点点，也请给我们一颗 ⭐️ Star，这是对开发者最大的鼓励！
Enjoy Mocking! 🚀
