企业官网建设流程全解析

小伙伴们大家好，我是小溪，见字如面。最近在做线上问题排查时，找到一个不错的调试工具，记录一个基本使用方式。

当前使用版本

v0.0.11

优势

• 支持请求与响应双向修改

• 支持JavaScript编程与动态Mock

• 支持资源重定向及跨越配置

限制

• 该插件为chrome浏览器插件，其他浏览器可能不兼容

简介

Ajax Interceptor Tools是一个chrome插件，允许我们通过 JSON 或 JavaScript 代码片段编辑并修改响应结果，还支持使用 Mock.js 语法生成随机数据。除此之外Ajax Interceptor Tools还提供了修改请求地址、请求头等功能，并且支持分组、导入/导出规则配置。

Github地址：https://github.com/PengChen96/ajax-tools

适用场景

• 前后端并行开发与调试

• 线上缺陷重现与排查（Debug 远程环境）

• 接口边缘测试

插件安装

Ajax Interceptor Tools一个针对Chrome浏览器的扩展插件，目前提供了两种安装方式：

• 谷歌商店：谷歌商店安装，针对可以正常使用谷歌应用商店的小伙伴，插件地址：https://chrome.google.com/webstore/detail/ajax-interceptor-tools/kphegobalneikdjnboeiheiklpbbhncm

• 直接下载：本地安装，针对无法打开谷歌商店的小伙伴，https://raw.githubusercontent.com/PengChen96/ajax-tools/master/kphegobalneikdjnboeiheiklpbbhncm.crx

这里以自定义下载安装为例进行安装（对无法科学上网的小伙伴比较友好），进入浏览器扩展管理，打开【开发者模式】

点击【加载已解压的扩展程序】选择 kphegobalneikdjnboeiheiklpbbhncm.crx 或者将 kphegobalneikdjnboeiheiklpbbhncm.crx 直接拖拽到浏览器插件管理页面

点击【添加扩展程序】安装

安装成功后打开插件，界面效果如下：

插件的基本使用

外观配置

Ajax Interceptor Tools针对不同使用场景提供了不同的交互形式

最小化可以将插件最小化到浏览器右上角展示

悬浮展示也就是作者说的画中画模式，可以让插件以悬浮窗的形式浮动在浏览器页面并且可以任意拖动到其他位置

主题目前提供了黑白主题，点击【主题】进行切换

重定向配置会新开一个tab展示，可以指定声明性规则来阻止或修改网络请求

全屏配置则是新开一个tab，以全屏模式进行接口拦截配置

分组管理

1）添加分组

Ajax Interceptor Tools提供了分组功能，点击【Add Group】可以创建新的分组，双击可以对分组进行重命名

每个分组允许添加多个请求拦截，点击【+】可以添加新的请求拦截

2）管理分组

在Ajax Interceptor Tools中，我们可以对单个请求进行启动/停用

也可以对整个分组进行启动/停用

甚至对所有分组进行启动/停用

Ajax Interceptor Tools也提供了删除操作，支持删除单个请求配置也支持删除分组配置

请求拦截

Ajax Interceptor Tools 提供了 手动拦截 和 U-Network 2种请求拦截方式：

• 手动拦截：手动输入接口地址进行拦截

• U-Network：通过U-Network开发工具拦截

1）手动拦截

以掘金首页推荐为例，直接输入推荐接口名 recommend_api/v1/article/recommend_all_feed

2）使用U-Network拦截

在当前网页右键【检查】选择【U-Network】

点击【Record newwork log】开启记录，点击按钮触发请求，右侧便会记录请求信息，点击接口对应的Action图标会将接口信息直接添加到拦截编辑记录中

3）拦截类型

Ajax Interceptor Tools 提供了 Normal 和 Regex 2种匹配模式：

• Normal：普通字符串匹配，采用 包含匹配

• Regex：正则表达式匹配，采用 正则表达式匹配

使用字符串匹配需要填写完整的接口名称

使用正则可以匹配更大范围的接口

Ajax Interceptor Tools 也提供了请求方式配置，可以根据请求类型进行匹配

修改响应结果

Ajax Interceptor Tools 提供了 JSON 和 JavaScript 2种方式修改接口响应的方式

1）使用JSON格式

缩略形式数据不是结构化的，修改数据比较困难，点击编辑图标，可以JSON结构和形式展示，也方便数据修改

对需要编辑的数据进行处理，最后点击【Save】保存

重新请求接口即可看到接口数据已被拦截修改

关于接口返回值的配置说明，接口返回值什么也不填写的情况将返回接口原始返回值内容

填写{}将返回空对象

2）使用JavaScript格式

Ajax Interceptor Tools 支持编写JavaScript代码修改返回结果，首先将类型切换到【javascript】编辑代码最终返回接口响应对象即可

3）使用Mock数据

Ajax Interceptor Tools提供了mock.js 支持，可以直接使用mock.js生成随机数据

constdata=Mock.mock({'list|1-10':[{'id|+1':1}]});return{"status":200,"response":data}

也可以在数据中使用Mock方法

4）使用arguments

Ajax Interceptor Tools支持从 arguments 获取原始数据，简单编程创建场景

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

以掘金首页为例，我们无需修改JSON数据，直接修改原始数据中的指定字段即可

let{method,payload,originalResponse}=arguments[0];if(typeof originalResponse==='string'){originalResponse=JSON.parse(originalResponse);}originalResponse.data[0].item_info.article_info.title='修改后的标题';returnoriginalResponse;

修改请求信息

在Request面板中，可以选择修改 请求类型(method)、请求URL、请求头(headers) 和 请求体(payload)。

1）修改请求URL和请求方式

切换到【Request】，可以将请求方式改为【POST】，修改【Replacement Request URL】选择请求地址，填写需要替换的请求地址

2）修改请求头

修改请求头时，直接修改【Replacement Request Headers】配置

3）修改请求体

切换到【Request Payload】，修改请求体目前只支持JavaScript方式，同样支持从arguments中获取原始请求参数

constargs=arguments[0];constparams=JSON.parse(args);params.test='测试数据';returnJSON.stringify(params);

保存后，再次发起请求即可看到修改后的参数

配置导入导出

在插件首页点击下拉菜单，使用【Import】或者【Export】即可快速导入导出配置

高级配置

Ajax Interceptor Tools支持通过chrome.declarativeNetRequest使用指定声明性规则来阻止或修改网络请求， 详细信息可以查看google 开发文档：https://developer.chrome.com/docs/extensions/reference/api/declarativeNetRequest?hl=zh-cn#build-rules

1）完整配置说明

Ajax Interceptor Tools的Github也提供了完整的配置说明，感兴趣的小伙伴可以自行研究

[{//唯一标识规则的 id。必填项，应为>=1"id":1,//规则优先级。默认值为1。指定时，应为>=1"priority":1,//匹配此规则时要执行的操作"action":{//要执行的操作的类型。 block、redirect、allow、upgradeScheme、modifyHeaders、allowAllRequests"type":"redirect",//描述应如何执行重定向。仅对重定向规则有效。"redirect":{//重定向网址。不允许重定向到 JavaScript 网址。"url":"",//要执行的 URL 转换。"transform":{//请求的新方案。允许的值是“http”，“https”，“ftp”和“chrome扩展名”。"scheme":"https",//请求的新主机。"host":"new.react.docschina.org",//请求的新路径。如果为空，则清除现有路径。"path":"",//请求的新端口。如果为空，则清除现有端口。"port":"",//请求的新片段。应为空，在这种情况下，将清除现有片段;或应以“#”开头。"fragment":"",//请求的新查询。应为空，在这种情况下，将清除现有查询;或者应该以“？”开头。"query":"",//添加、删除或替换查询键值对。"queryTransform":{//要添加或替换的查询键值对的列表"addOrReplaceParams":[{"key":"","value":"",//如果为 true，则仅当查询键已存在时，才会替换查询键。否则，如果缺少密钥，也会添加密钥。默认为 false。"replaceOnly":false,}],//要删除的查询键的列表。"removeParams":[]},//请求的新用户名"username":"",//请求的新密码。"password":"",},//相对于扩展目录的路径。应以“/”开头。"extensionPath":"",//对于指定了 regexFilter 的规则，使用此替换模式。在 URL 中，regexFilter 的第一个匹配项将被替换为此模式。在 regexSubstitution 内部，可以使用反斜杠转义的数字（\1到\9）来插入相应的捕获组。\0指的是整个匹配文本。"regexSubstitution":""},//要为请求修改的请求标头。仅当 RuleActionType 为 “modifyHeaders” 时才有效。"requestHeaders":[{//要修改的标头的名称。"header":"",//要对标头执行的操作。 append、set、remove"operation":"",//标头的新值。必须为 和 set 操作 append 指定。"value":"",}],//要为请求修改的响应标头。仅当 RuleActionType 为 “modifyHeaders” 时才有效。"responseHeaders":[{//要修改的标头的名称。"header":"",//要对标头执行的操作。 append、set、remove"operation":"",//标头的新值。必须为 和 set 操作 append 指定。"value":"",}],},//触发此规则的条件"condition":{//与网络请求 URL 匹配的模式"urlFilter":"main",//与网络请求 URL 匹配的正则表达式。这遵循 RE2 语法。"regexFilter":"",//注： 只能指定orregexFilter 中的一个 urlFilter 。//该规则将仅匹配源自 列表 domains 的网络请求。 自 Chrome101起已弃用，改用 initiatorDomains"domains":["react.docschina.org"],//【new】Chrome101+该规则将仅匹配源自 列表 initiatorDomains 的网络请求。如果省略该列表，则该规则将应用于来自所有域的请求。不允许使用空列表。"initiatorDomains":["react.docschina.org"],//该规则将不匹配源自列表 excludedDomains 的网络请求。 自 Chrome101起已弃用，改用 excludedInitiatorDomains"excludedDomains":[""],//【new】Chrome101+该规则将不匹配源自 列表 excludedInitiatorDomains 的网络请求。如果列表为空或省略，则不排除任何域。这优先于 initiatorDomains 。"excludedInitiatorDomains":[""],//规则可以匹配的资源类型列表。不允许使用空列表。"main_frame","sub_frame","stylesheet","script","image","font","object","xmlhttprequest","ping","csp_report","media","websocket","webtransport","webbundle",or"other""resourceTypes":["script"],//指定网络请求是其来源域的第一方还是第三方。如果省略，则接受所有请求。 firstParty、thirdParty"domainType":"",//规则不匹配的请求方法列表。仅应指定 和 excludedRequestMethods 中的一个 requestMethods 。如果未指定它们，则匹配所有请求方法。"excludedRequestMethods":"",//"connect"、"delete"、"get"、"head"、"options"、"patch"、"post"、"put"、"other"//规则不匹配的资源类型列表。仅应指定 和 excludedResourceTypes 中的一个 resourceTypes 。如果未指定它们，则将阻止除“main_frame”之外的所有资源类型。"excludedResourceTypes":"",//"main_frame"、"sub_frame"、"stylesheet"、"script"、"image"、"font"、"object"、"xmlhttprequest"、"ping"、"csp_report"、"media"、"websocket"、"webtransport"、"webbundle"、"other"//规则应匹配 tabs.Tab.id 的列表。匹配不是源自选项卡的请求的 tabs.TAB_ID_NONE ID。不允许使用空列表。仅会话范围的规则受支持。"tabIds":[],//规则不应匹配 tabs.Tab.id 的列表。的 tabs.TAB_ID_NONE ID 排除不是源自选项卡的请求。仅会话范围的规则受支持。"excludedTabIds":[],//urlFilter 或 regexFilter （以指定者为准）是否区分大小写。默认值为 true。"isUrlFilterCaseSensitive":true,//仅当域与 列表中的 requestDomains 网络请求匹配时，该规则才会匹配网络请求。如果省略该列表，则该规则将应用于来自所有域的请求。不允许使用空列表。"requestDomains":[],//规则可以匹配的 HTTP 请求方法列表。不允许使用空列表。"requestMethods":[],//注意：指定 requestMethods 规则条件也会排除非 HTTP（s） 请求，而指定 excludedRequestMethods 则不会。}}]

2）资源重定向

点击【declarativeNetRequest图标】进入配置页面

填入重定向配置规则

这段配置的意思是当访问google时直接重定向到百度，完整代码如下：

[{"id":1,"priority":1,"action":{"type":"redirect","redirect":{"url":"https://www.baidu.com"}},"condition":{"urlFilter":"||google.com/","resourceTypes":["main_frame"]}}]

3）支持跨域配置

这里简单提供一个declarativeNetRequest跨域配置，有更多需求的小伙伴可以查看declarativeNetRequest官方文档

[{"id":1,"priority":1,"action":{"responseHeaders":[{"header":"Access-Control-Allow-Origin","operation":"append","value":"https://react.docschina.org"},{"header":"Access-Control-Allow-Headers","operation":"append","value":"Content-Type"}],"type":"modifyHeaders"},"condition":{"resourceTypes":["xmlhttprequest"],"urlFilter":"localhost:8080"}}]

友情提示

见原文：浏览器提效插件Ajax Interceptor Tools