小伙伴们大家好我是小溪见字如面。最近在做线上问题排查时找到一个不错的调试工具记录一个基本使用方式。当前使用版本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_feed2使用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生成随机数据constdataMock.mock({list|1-10:[{id|1:1}]});return{status:200,response:data}也可以在数据中使用Mock方法4使用argumentsAjax Interceptor Tools支持从 arguments 获取原始数据简单编程创建场景let{method,payload,originalResponse}arguments[0];if(methodget){//请求方式//dosomething}if(payload){//入参{queryStringParametersrequestPayload}//dosomething}return{status:200,response:originalResponse};以掘金首页为例我们无需修改JSON数据直接修改原始数据中的指定字段即可let{method,payload,originalResponse}arguments[0];if(typeof originalResponsestring){originalResponseJSON.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中获取原始请求参数constargsarguments[0];constparamsJSON.parse(args);params.test测试数据;returnJSON.stringify(params);保存后再次发起请求即可看到修改后的参数配置导入导出在插件首页点击下拉菜单使用【Import】或者【Export】即可快速导入导出配置高级配置Ajax Interceptor Tools支持通过chrome.declarativeNetRequest使用指定声明性规则来阻止或修改网络请求 详细信息可以查看google 开发文档https://developer.chrome.com/docs/extensions/reference/api/declarativeNetRequest?hlzh-cn#build-rules1完整配置说明Ajax Interceptor Tools的Github也提供了完整的配置说明感兴趣的小伙伴可以自行研究[{//唯一标识规则的 id。必填项应为1id:1,//规则优先级。默认值为1。指定时应为1priority:1,//匹配此规则时要执行的操作action:{//要执行的操作的类型。 block、redirect、allow、upgradeScheme、modifyHeaders、allowAllRequeststype: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、removeoperation:,//标头的新值。必须为 和 set 操作 append 指定。value:,}],//要为请求修改的响应标头。仅当 RuleActionType 为 “modifyHeaders” 时才有效。responseHeaders:[{//要修改的标头的名称。header:,//要对标头执行的操作。 append、set、removeoperation:,//标头的新值。必须为 和 set 操作 append 指定。value:,}],},//触发此规则的条件condition:{//与网络请求 URL 匹配的模式urlFilter:main,//与网络请求 URL 匹配的正则表达式。这遵循 RE2 语法。regexFilter:,//注 只能指定orregexFilter 中的一个 urlFilter 。//该规则将仅匹配源自 列表 domains 的网络请求。 自 Chrome101起已弃用改用 initiatorDomainsdomains:[react.docschina.org],//【new】Chrome101该规则将仅匹配源自 列表 initiatorDomains 的网络请求。如果省略该列表则该规则将应用于来自所有域的请求。不允许使用空列表。initiatorDomains:[react.docschina.org],//该规则将不匹配源自列表 excludedDomains 的网络请求。 自 Chrome101起已弃用改用 excludedInitiatorDomainsexcludedDomains:[],//【new】Chrome101该规则将不匹配源自 列表 excludedInitiatorDomains 的网络请求。如果列表为空或省略则不排除任何域。这优先于 initiatorDomains 。excludedInitiatorDomains:[],//规则可以匹配的资源类型列表。不允许使用空列表。main_frame,sub_frame,stylesheet,script,image,font,object,xmlhttprequest,ping,csp_report,media,websocket,webtransport,webbundle,orotherresourceTypes:[script],//指定网络请求是其来源域的第一方还是第三方。如果省略则接受所有请求。 firstParty、thirdPartydomainType:,//规则不匹配的请求方法列表。仅应指定 和 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 规则条件也会排除非 HTTPs 请求而指定 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