前端调试神器 Requestly：无需代理，一键拦截篡改接口请求与响应

一、前言

在前端开发、接口调试、功能测试、安全自测过程中，我们经常遇到这些痛点：

• 后端接口未开发完成，需要本地 Mock 数据调试页面
• 需要修改接口返回字段（状态码、权限字段、解锁状态）模拟各种场景
• 本地配置 Charles/Fiddler 代理繁琐，还要安装根证书、处理HTTPS抓包问题
• 想临时修改请求头、重定向接口、屏蔽无效请求，快速复现线上BUG

以往我们依赖专业抓包代理工具，配置复杂、门槛高。而 Requestly 作为轻量浏览器插件，完美解决以上问题，零配置、开箱即用，是前端开发者、测试工程师、安全自测人员的必备工具。

二、Requestly 工具简介

Requestly 是一款跨浏览器的网络请求拦截与修改插件，支持 Chrome、Edge、Firefox 主流浏览器，无需搭建本地代理、无需配置证书，直接在浏览器内拦截 HTTP/HTTPS 请求，实现请求篡改、响应伪造、接口重定向、域名屏蔽、脚本动态修改等能力。

它区别于传统抓包工具的核心优势：轻量化、无侵入、配置永久生效、支持JS动态脚本处理响应，专门适配前端页面实时调试场景。

核心定位

前端本地Mock、接口异常模拟、权限场景测试、线上BUG复现、自定义网络规则、安全授权自测。

三、Requestly 核心优势（对比 Charles/Fiddler）

对比维度	Requestly	Charles/Fiddler
使用门槛	极低，安装插件即用，零配置	高，需配置代理、安装HTTPS证书
生效范围	仅当前浏览器，不影响全局网络	全局代理，影响所有软件网络
响应修改能力	支持字符串替换 + JS动态脚本解析JSON	仅支持固定文本替换，复杂JSON嵌套处理繁琐
场景适配	前端页面调试、接口Mock、场景模拟首选	全局抓包、接口数据分析
缓存干扰	规则独立，无多余缓存干扰	易出现缓存、证书报错问题

四、常用核心功能详解

1. 修改接口响应（最常用）

支持两种模式：静态文本替换、Dynamic JS动态脚本修改。

针对嵌套复杂的JSON接口（多层数组、多题型分组数据），JS脚本模式是唯一稳定方案，不会破坏JSON格式，可精准遍历修改指定字段。

典型场景：修改权限解锁状态、修改答题状态、模拟免费/付费权限、篡改接口返回状态值。

2. 修改请求头/请求参数

可新增、删除、替换Header参数，快速模拟不同Token、设备参数、浏览器环境，适配接口鉴权测试。

3. 接口重定向、域名替换

线上接口一键映射到本地测试接口，无需修改项目代码，快速做环境切换调试。

4. 屏蔽无效请求、拦截埋点

屏蔽统计、广告、埋点接口，减少调试干扰，提升页面加载速度。

5. 自定义前置/后置脚本

支持请求前修改参数、响应后校验数据，可实现自动化简单接口测试。

五、实战教程：篡改复杂嵌套JSON接口（高频场景）

需求场景：针对题库接口，批量修改所有题目 isFree=0、isUnlock=1，实现全部题目解锁、去除免费标识，适配自测调试。

步骤1：安装插件

浏览器应用商店搜索 Requestly，直接安装，无需注册即可使用基础核心功能。

步骤2：新建拦截规则

1. 打开插件 → New Rule → 选择Modify API Response
2. 匹配规则：URL 匹配方式选择 Contains
3. 匹配内容：填写接口特征路径 ess-tiku-api/front/extract/card
4. 资源类型选择：REST API

步骤3：配置动态JS脚本（带日志、稳定兼容）

响应体选择 Dynamic (JavaScript)，粘贴以下可直接运行的完整版脚本，支持复杂JSON嵌套遍历、日志打印、异常容错：

function modifyResponse(args) {
    console.log("[Requestly-Debug] ===== 脚本执行开始 =====");
    console.log("[Requestly-Debug] 原始请求参数args:", JSON.parse(JSON.stringify(args)));

    const rawBody = args.body;
    let jsonData;

    // 容错解析JSON，避免接口格式异常报错
    try {
        jsonData = JSON.parse(rawBody);
        console.log("[Requestly-Debug] 原始接口响应数据:", JSON.parse(JSON.stringify(jsonData)));
    } catch (e) {
        console.error("[Requestly-Debug] JSON解析失败：", e);
        return rawBody;
    }

    if (!jsonData || !Array.isArray(jsonData.data)) {
        console.warn("[Requestly-Debug] 无有效数据数组，直接返回原始数据");
        return JSON.stringify(jsonData);
    }

    let modifyTotal = 0;

    // 遍历所有题型分组（单选/多选/判断）
    for (const group of jsonData.data) {
        const typeName = group.ruleName || "未知题型";
        const questionList = group.questionCardDataRspList;
        if (!Array.isArray(questionList)) continue;

        console.log(`[Requestly-Debug] 正在处理题型：${typeName}，题目总数：${questionList.length}`);

        // 批量修改每道题目字段
        questionList.forEach(item => {
            const oldFree = item.isFree;
            const oldUnlock = item.isUnlock;

            // 核心修改：固定解锁、关闭免费标识
            item.isFree = 0;
            item.isUnlock = 1;

            modifyTotal++;
            console.log(`[Requestly-Debug] 题目ID${item.questionId} | isFree:${oldFree}->0 | isUnlock:${oldUnlock}->1`);
        });
    }

    console.log(`[Requestly-Debug] 脚本执行完成，共修改${modifyTotal}条题目数据`);
    console.log("[Requestly-Debug] 修改后完整响应数据：", JSON.parse(JSON.stringify(jsonData)));

    return JSON.stringify(jsonData);
}

步骤4：生效验证

1. 保存规则，开启规则开关（蓝色启用状态）
2. 浏览器 Ctrl+F5 硬刷新 页面，清除缓存
3. F12打开控制台，查看完整修改日志
4. Network面板查看接口响应，所有字段已批量篡改成功

六、常见踩坑避坑指南

1. 不要使用字符串正则替换复杂JSON

JSON存在空格、换行、字段顺序变化时，正则替换会失效，甚至破坏JSON语法导致页面报错，复杂结构必须用JS脚本解析。

2. 规则优先级问题

多条规则同时存在时，后配置的规则会覆盖前者，需将核心调试规则 置顶。

3. 缓存导致修改不生效

必须使用 Ctrl+F5硬刷新，普通刷新会读取浏览器缓存，拦截规则不生效。

4. 脚本返回格式错误

新版Requestly动态脚本，优先返回 JSON字符串，而非 {bodyAsJson} 对象，避免解析异常。

七、适用场景总结

• 前端开发：后端接口未完成，本地Mock数据调试页面逻辑
• 功能测试：模拟权限解锁、接口异常、字段边界场景
• 安全自测：授权场景、权限绕过、接口返回篡改测试（个人授权测试）
• 线上排错：实时修改线上接口响应，复现、修复线上BUG
• 效率优化：屏蔽冗余埋点、广告请求，优化调试体验

八、结语

Requestly 是一款极致轻量化的网络调试工具，摒弃了传统代理工具的繁琐配置，用最简单的方式实现了接口拦截、篡改、Mock核心能力。对于日常前端调试、场景测试、问题复现而言，完全可以替代重型抓包工具，大幅提升开发测试效率。

尤其是动态JS修改复杂JSON响应的能力，完美适配绝大多数业务接口场景，是开发者和测试人员的必备神器。