一个拦截ajax请求并修改请求、响应信息的Chrome插件

写了一个 Chrome 插件Ajax Interceptor Tools,使用这个插件,你可以通过 JSON 或 JavaScript 代码片段来编辑并修改响应结果,还支持使用 Mock.js 语法生成随机数据。另外还可以修改请求地址、请求头等内容,并且插件支持分组、导入/导出规则配置等。

使用

一、修改Response响应结果

在Response编辑器中,您可以选择:
1、使用JSON/JavaScript格式编辑响应结果
2、转发原始响应结果(如果清空Response编辑器,将会把原始响应结果转发给应用程序)

1、 使用JSON格式编辑响应结果

示例:

{
  "status": 200,
  "response": "OK"
}

2、 使用JavaScript格式编辑响应结果

使用JS方式编辑响应结果时,通过new Function(responseText)生成函数并执行,响应结果即为函数的返回值。

2.1. 简单JavaScript片段

示例:

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({ id: i });
}
return {
  "status": 200,
  "response": data
}
2.2. 使用 mock.js 生成随机数据

示例:

const data = Mock.mock({
    // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数,起始值为 1,每次增 1
        'id|+1': 1
    }]
});
return {
  "status": 200,
  "response": data
}

将生成类似以下数据:

// ==>
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}
2.3. 从arguments获取原始数据,简单编程创建场景

一个拦截ajax请求并修改请求、响应信息的Chrome插件_第1张图片

示例:

let { method, payload, originalResponse } = arguments[0];
if (method === 'get') { // 请求方式
  // do something
}
if (payload) { // 入参 { queryStringParameters,requestPayload }
  // do something
}
return {
  "status": 200,
  "response": originalResponse
};

二、修改Request请求信息

在Request面板中,您可以选择修改请求URL、method、headers和payload。
一个拦截ajax请求并修改请求、响应信息的Chrome插件_第2张图片

1. 修改请求URL和method

例下图中,将会把匹配到的/auth/login请求路径替换为/auth/login2,并把请求方法改为POST,您可以打开devtools在Network面板中看到替换后的请求。
一个拦截ajax请求并修改请求、响应信息的Chrome插件_第3张图片

2. 修改请求headers

例下图中,将会把请求headers中的Content-Type替换为application/json
一个拦截ajax请求并修改请求、响应信息的Chrome插件_第4张图片

3. 修改请求payload

例下图中,将会在入参中新增test: test123,您可以打开devtools在Network面板中看到请求体的修改。
一个拦截ajax请求并修改请求、响应信息的Chrome插件_第5张图片

三、支持导入/导出

下载

项目地址:https://github.com/PengChen96/ajax-tools
谷歌商店:https://chrome.google.com/webstore/detail/ajax-interceptor-to...

你可能感兴趣的:(一个拦截ajax请求并修改请求、响应信息的Chrome插件)