告别Fiddler！用油猴脚本实现前端接口调试与Mock数据（附完整代码）-程序员充电站

浏览器内建调试利器：油猴脚本实现零成本接口监控与Mock方案

每次调试前端接口时，都要在Fiddler和IDE之间反复切换？试试这个直接在浏览器里运行的解决方案。作为前端开发者，我们经常需要快速查看请求参数、修改返回值或重发特定接口，但传统抓包工具的操作流程总是打断开发节奏。本文将展示如何用油猴脚本打造一个轻量级、可定制的接口调试工作台，所有功能都集成在浏览器标签页内，无需额外工具。

1. 为什么需要浏览器内建的调试方案

传统抓包工具如Fiddler和Charles虽然功能强大，但在日常开发中存在几个明显痛点：首先，它们需要单独安装和配置代理，启动过程繁琐；其次，这些工具会拦截所有流量，包括非目标项目的请求，导致信息过载；最重要的是，修改请求和响应需要多步操作，无法快速验证想法。

相比之下，油猴脚本方案具有三大优势：

零配置即用：安装脚本后立即生效，无需设置代理或证书
项目隔离：只在当前标签页生效，不影响其他浏览环境
实时交互：直接在页面内修改参数和重发请求，所见即所得

// 典型油猴脚本元信息配置 // ==UserScript== // @name API Debug Helper // @namespace http://your-namespace // @version 1.0 // @description 前端接口调试工具 // @author YourName // @match http://your-dev-env/* // @grant GM_xmlhttpRequest // ==/UserScript==

提示：选择@match而非@include可以精确控制脚本注入范围，避免污染生产环境

2. 核心拦截机制实现原理

现代前端应用主要使用XMLHttpRequest和Fetch API进行通信。要实现全面拦截，需要同时处理这两种情况。我们先从XHR开始，通过原型链改写实现请求捕获。

2.1 XHR请求拦截

关键点在于保存原始方法引用，确保不破坏已有功能。以下代码展示了如何捕获请求方法和URL：

const originalOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method, url) { this._method = method; this._url = url; return originalOpen.apply(this, arguments); };

2.2 请求参数捕获

通过拦截send方法，我们可以获取请求体数据。同时需要重写setRequestHeader来收集请求头：

const originalSend = XMLHttpRequest.prototype.send; XMLHttpRequest.prototype.send = function(body) { console.log(`拦截到${this._method}请求:`, { url: this._url, headers: this._headers, body: body }); return originalSend.apply(this, arguments); };

2.3 Fetch API的兼容处理

对于使用fetch的现代应用，需要单独处理：

const originalFetch = window.fetch; window.fetch = async function(input, init) { const response = await originalFetch(input, init); console.log('拦截fetch请求:', { input, init }); return response; };

3. 构建可视化调试面板

纯控制台输出不够直观，我们需要创建一个浮动UI面板来展示请求信息。这个面板应该具备以下特性：

固定在视口可见区域
可折叠节省空间
支持请求筛选和搜索

3.1 基础UI结构

使用DOM API动态创建面板元素：

function createPanel() { const panel = document.createElement('div'); panel.id = 'api-debug-panel'; panel.style.position = 'fixed'; panel.style.top = '20px'; panel.style.right = '20px'; panel.style.width = '800px'; panel.style.maxHeight = '80vh'; panel.style.zIndex = '9999'; document.body.appendChild(panel); // 添加标题栏和内容区 panel.innerHTML = ` <div class="header"> <h3>API调试面板</h3> <button class="toggle">折叠</button> </div> <div class="content"> <table> <thead><tr><th>方法</th><th>URL</th><th>状态</th><th>操作</th></tr></thead> <tbody class="requests"></tbody> </table> </div> `; }

3.2 请求列表渲染

每次捕获到新请求时，向表格中动态添加行：

function addRequestToPanel(request) { const row = document.createElement('tr'); row.innerHTML = ` <td>${request.method}</td> <td class="url">${request.url}</td> <td>Pending</td> <td> <button class="resend">重发</button> <button class="mock">Mock</button> </td> `; document.querySelector('#api-debug-panel .requests').appendChild(row); }

4. 高级调试功能实现

基础拦截功能之外，我们还可以添加一些提升开发效率的特性。

4.1 请求重发机制

利用油猴脚本的GM_xmlhttpRequest实现跨域请求重发：

function resendRequest(request) { GM_xmlhttpRequest({ method: request.method, url: request.url, headers: request.headers, data: request.body, onload: function(response) { console.log('重发结果:', response); } }); }

4.2 接口Mock方案

通过拦截响应实现数据Mock：

const originalOpen = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method, url) { if (shouldMock(url)) { this._mock = true; this._mockData = getMockData(url); } return originalOpen.apply(this, arguments); }; XMLHttpRequest.prototype.send = function() { if (this._mock) { Object.defineProperty(this, 'responseText', { value: JSON.stringify(this._mockData) }); this.dispatchEvent(new Event('load')); return; } originalSend.apply(this, arguments); };

4.3 常用Mock场景示例

场景类型	实现方式	典型应用
固定返回值	预定义JSON数据	快速验证UI展示逻辑
延迟响应	setTimeout触发事件	测试加载状态处理
错误状态	修改statusCode属性	异常流程验证
参数校验	解析请求参数进行条件返回	接口健壮性测试

5. 实战技巧与性能优化

在实际项目中应用时，还需要考虑以下细节：

内存管理策略

设置请求历史上限（如最近50条）
实现按时间或接口类型的自动清理
使用WeakMap存储请求引用避免内存泄漏

// 使用WeakMap存储请求上下文 const requestContexts = new WeakMap(); function interceptRequest(xhr) { requestContexts.set(xhr, { timestamp: Date.now(), method: xhr._method, url: xhr._url }); }

性能影响最小化