拒绝硬编码！我写了一个直接“住”在浏览器里的可视化 Mock 工具 (PocketMocker)PocketMocker

前言：为什么要造这个轮子？

做前端开发的同学一定都经历过这种痛苦时刻：

后端接口还没好，或者接口挂了，我们为了不阻塞开发进度，通常只有几种选择：

在组件里写死数据 (Hardcode)： 写的时候爽，删的时候火葬场，一不小心就带上线了。
用 Charles/Fiddler 抓包工具： 功能很强，但要配置 HTTPS 证书、配规则，切个环境又要重来，太繁琐。
用 MSW 等代码库： 适合做自动化测试，但在快速开发原型时，我想改个状态码都要去改代码、重启，缺乏一个直观的 UI 来随时切换。

我就想要一个简单的、可视化的、不需要配置代理的 Mock 工具，有那么难吗？

于是，PocketMocker 诞生了。它是一个零配置、可视化、且直接驻留在浏览器 Tab 中的轻量级调试工具。

在线体验 (Live Demo): tianchangnorth.github.io/pocket-mock… (无需安装，点开即玩)

GitHub 源码: github.com/tianchangNo…

核心亮点：它能干什么？

PocketMocker 的核心理念是：所见即所得，不打断开发流。

1. 可视化控制台 (Visual Dashboard)

它不依赖本地服务器，而是向你的页面注入一个小组件。点击右下角的悬浮球，就能打开 Mock 面板。基于 Svelte 和 Shadow DOM 开发，样式完全隔离，绝对不会污染你的页面 UI。

2. "一键 Mock" (Click to Mock)

这是我最喜欢的功能！工具会自动捕获网络请求。当你发现某个真实接口挂了，或者你想模拟它的报错状态：

在面板里找到这个请求。
点击 "Create Mock" 。
它自动变成了 Mock 规则！你只需要修改你想返回的数据即可。

3. 智能数据模拟 (Smart Data)

不需要手动敲几百行的假 JSON。它支持类似 Mock.js 的语法：

想要一个随机用户名？ "user": "@name"
想要一个随机头像？ "avatar": "@image(100x100)"
想要一个 10 条数据的数组？ "list|10": [...]

4. 动态逻辑支持

不仅仅是静态 JSON，你甚至可以写 JavaScript 函数来控制返回：

// 模拟特定 ID 才有权限
if (req.query.id === 'admin') {
  return { code: 200, role: 'admin' };
} else {
  return { code: 403, msg: '无权访问' };
}

5. 团队协作 (Vite 插件支持)

如果你使用 Vite，配合专用插件，你在浏览器里配置的规则会自动同步保存到项目的 /mock 文件夹中。这样你就可以把 Mock 数据提交到 Git，让团队成员直接复用你的规则，再也不用每个人都配一遍了。

技术实现 (Tech Stack)

对于对源码感兴趣的同学，这里简单介绍一下技术栈：

核心原理： 通过 Monkey-patching（猴子补丁）拦截 window.fetch 和 XMLHttpRequest，在请求发出前判断是否命中 Mock 规则。
UI 框架： Svelte。选择它是因为它编译后没有运行时依赖，体积极小，非常适合做嵌入式 Widget。
编辑器： CodeMirror 6，提供丝滑的代码编辑体验。
样式隔离： Shadow DOM，确保 Mock 工具的 CSS 不会影响宿主页面。

快速上手

这个项目是完全开源的（MIT 协议），欢迎试用！

1. 安装

Bash

npm install pocket-mocker -D

2. 初始化

在你的入口文件（如 main.ts 或 index.js）中引入：

import { pocketMock } from 'pocket-mocker';

// 建议只在开发环境下开启
if (process.env.NODE_ENV === 'development') {
  pocketMock();
}

3. (推荐) 配合 Vite 插件实现持久化

// vite.config.ts
import { pocketMockPlugin } from 'pocket-mocker/vite';

export default {
  plugins: [
    pocketMockPlugin() // 规则会自动保存到本地 mock/ 目录
  ]
}

结语

这个工具最初是为了解决我自己的痛点而开发的，现在开源出来希望也能帮到大家。

如果你也受够了在组件里写 if (true) return fakeData，或者不想配置复杂的代理工具，不妨试试 PocketMocker。

如果你觉得好用，欢迎来 GitHub 点个 Star ⭐️ 支持一下！

👉 GitHub 地址: github.com/tianchangNo…

有任何建议或 Bug，欢迎在评论区留言或者提 Issue，我会尽快回复！👋