PocketMocker：一款“所見即所得”的瀏覽器端可視化 HTTP Mock 工具

前言：我們為什麼還需要另一個 Mock 工具？

在前端開發中，Mock 數據是一個繞不開的環節。但回看我們手頭的工具，似乎總在兩個極端之間搖擺：

重型平台 (YApi / Postman)：功能強大，但需要頻繁切換窗口，配置繁瑣，且很難與本地代碼緊密結合。
代碼級庫 (Mock.js / MSW)：雖然集成在項目中，但修改數據通常需要改代碼、保存、熱重載，反饋鏈路長，且對非靜態數據（如根據參數返回不同結果）的支持往往不夠直觀。

我們不禁思考：有沒有一種工具，能像 Chrome DevTools 一樣直接"生活"在瀏覽器裏？點開就能改，改完立即生效，而且不污染我的業務代碼？

這就是 PocketMocker 誕生的初衷。

什麼是 PocketMocker？

所見即所得的瀏覽器端可視化 HTTP 調試工具。

PocketMocker 是一款零侵入的前端 Mock 工具。與傳統的 Mock 方案不同，它直接嵌入在你的頁面中 （通過 Shadow DOM 隔離），讓你在開發時可以實時攔截 fetch 和 XMLHttpRequest，動態修改響應數據、模擬網絡延遲和異常狀態碼。

PocketMocker 界面演示

🔗 在線演示 : 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！

GitHub : https://github.com/tianchangNorth/pocket-mock

如果這個工具對你有幫助，哪怕只是一點點，也請給我們一顆 ⭐️ Star，這是對開發者最大的鼓勵！

Enjoy Mocking! 🚀