Chrome插件 Ajax Interceptor Tools使用教程
Chrome插件 Ajax Interceptor Tools使用教程
概述
在前端开发中，调试和拦截Ajax请求是非常重要的一部分。Chrome插件"Ajax Interceptor Tools"可以帮助开发人员轻松地拦截、修改和分析页面中的Ajax请求。本教程将从入门到高阶，逐步介绍如何使用该插件进行前端测试。
1. 安装插件
下载插件文件
首先，你需要下载"Ajax Interceptor Tools"插件的压缩文件（通常是一个.zip文件）。你可以在插件的官方网站或开源代码库中找到下载链接。 
安装插件到Chrome浏览器
- 解压下载的插件文件到一个目录中。
- 打开Chrome浏览器，在地址栏中输入
chrome://extensions/并按下回车键。 - 在扩展程序页面的右上角，启用"开发者模式"。
- 点击页面左上角的"加载已解压的扩展程序"按钮。
- 在弹出的文件选择对话框中，选择刚刚解压的插件目录并确认。
2. 基本拦截
打开开发者工具
在Chrome浏览器中，按下F12键或右键点击页面并选择"检查"，即可打开开发者工具。
导航到Ajax Interceptor Tools面板
在开发者工具中，你将看到一个选项卡，名为"U-Network"（Ajax Interceptor Tools）。点击该选项卡以打开插件的面板。 
开启拦截功能
在面板的顶部，你会看到一个开关按钮，用于启用或禁用拦截功能。确保该按钮处于启用状态，以开始拦截Ajax请求。 
查看拦截的请求
刷新页面或触发页面上的某些操作，以触发Ajax请求。在"U-Network"面板上，你将看到列出的请求列表。点击其中一个请求，以查看其详细信息，包括URL、请求方法、参数等。 
然后点对应请求的Action按钮 配置拦截信息，本例以api/v2/project/project-ad接口为例 
弹出 
3. 修改请求
拦截请求后的操作
在"U-Network"面板中，你可以针对拦截到的请求执行多种操作。你可以暂停拦截、清除已拦截的请求，或者开始拦截之前清除现有的请求。
修改请求参数
点击某个请求，在请求详细信息页面中，你可以看到请求的参数。你可以直接编辑这些参数，然后点击"应用"按钮，以应用修改后的参数。
修改请求头部
除了参数，你还可以修改请求的头部信息。在请求详细信息页面中，找到"请求头部"部分，编辑头部字段并点击"应用"按钮。
4. 模拟响应
自定义响应数据
在"U-Network"面板中，你不仅可以拦截请求，还可以模拟响应。点击请求，然后在响应部分编辑响应数据。你可以输入JSON、XML等数据格式，以模拟服务器返回的响应。 比如本实例中，我需要修改原有的response 修改前response，着重看adCatId：103的部分，我需要手动修改其返回值，添加adVos集合
{
"code": 0,
"msg": "请求成功",
"data": [
{
"adCatId": 102,
"adCatName": "专四专八课表PC端-轮播图",
"adCatType": 1,
"adVos": [
{
"adJumpType": 3,
"linkUrl": "https://www.koolearn.com/product/c_104_152589.html",
"couponCode": "",
"productId": "",
"popUpGuideDefault": true,
"popUpGuideTxt": "",
"popUpGuidePic": "",
"popUpGuideLink": "",
"id": 428,
"adName": "专四专八课表PC端-轮播图",
"adContent": "",
"onlineTime": 1640853929000,
"offlineTime": 1735634730000,
"crmFlag": false,
"crmTemplateId": "",
"imgUrl": "https://guonei-cos.koocdn.com/flowrate/2023/02/24/365ffcae595744139d4c529e4a4a8d4f.png",
"popBtn": "",
"popupBtnVos": "",
"allocationRuleId": "",
"allocationPopWap": "",
"allocationPopPc": "",
"crmFirstSource": "1",
"crmSecondSource": "",
"crmProductGroup": "16",
"againConvertConfig": ""
}
]
},
{
"adCatId": 103,
"adCatName": "专四专八课表PC端-优惠券",
"adCatType": 2,
"adVos": ""
},
{
"adCatId": 411,
"adCatName": "专四专八PC端引流二维码",
"adCatType": 2,
"adVos": ""
},
{
"adCatId": 417,
"adCatName": "专四专八PC端弹窗广告",
"adCatType": 4,
"adVos": ""
}
]
}
修改后：
{
"code": 0,
"msg": "请求成功",
"data": [
{
"adCatId": 102,
"adCatName": "专四专八课表PC端-轮播图",
"adCatType": 1,
"adVos": [
{
"adJumpType": 3,
"linkUrl": "https://www.koolearn.com/product/c_104_152589.html",
"couponCode": "",
"productId": "",
"popUpGuideDefault": true,
"popUpGuideTxt": "",
"popUpGuidePic": "",
"popUpGuideLink": "",
"id": 428,
"adName": "专四专八课表PC端-轮播图",
"adContent": "",
"onlineTime": 1640853929000,
"offlineTime": 1735634730000,
"crmFlag": false,
"crmTemplateId": "",
"imgUrl": "https://guonei-cos.koocdn.com/flowrate/2023/02/24/365ffcae595744139d4c529e4a4a8d4f.png",
"popBtn": "",
"popupBtnVos": "",
"allocationRuleId": "",
"allocationPopWap": "",
"allocationPopPc": "",
"crmFirstSource": "1",
"crmSecondSource": "",
"crmProductGroup": "16",
"againConvertConfig": ""
}
]
},
{
"adCatId": 103,
"adCatName": "专四专八课表PC端-优惠券",
"adCatType": 2,
"adVos": [
{
"adJumpType": 2,
"linkUrl": "",
"couponCode": "27284e3c7b7ed1cc",
"productId": "",
"popUpGuideDefault": true,
"popUpGuideTxt": "",
"popUpGuidePic": "https://guonei-osstest.koocdn.com/flowrate/2022/01/13/30ac698781804085a66e2ca1394bfbba.jpg",
"popUpGuideLink": "https://m.koolearn.com/",
"id": 303,
"adName": "23考研课表头图优惠券区-左边",
"adContent": "",
"onlineTime": 1640332772000,
"offlineTime": 1711954436000,
"crmFlag": true,
"crmTemplateId": "",
"imgUrl": "https://guonei-osstest.koocdn.com/flowrate/2021/12/30/3875fc7072cb4e0f914fe0e923c7fc6e.jpg",
"popBtn": "",
"popupBtnVos": "",
"allocationRuleId": "",
"allocationPopWap": "",
"allocationPopPc": "",
"crmFirstSource": "14",
"crmSecondSource": "优惠券600-2个产品单价200",
"crmProductGroup": "16",
"againConvertConfig": {
"againConvertType": 1,
"popUpGuideLink": "",
"popUpGuidePic": "",
"popUpGuideBtn": "",
"allocationRuleId": 21,
"allocationPopPic": "https://guonei-costest.koocdn.com/flowrate/2023/07/17/52e85500b2f343599e4e8e7a53199477.png"
}
}
]
},
{
"adCatId": 411,
"adCatName": "专四专八PC端引流二维码",
"adCatType": 2,
"adVos": ""
},
{
"adCatId": 417,
"adCatName": "专四专八PC端弹窗广告",
"adCatType": 4,
"adVos": ""
}
]
}
然后刷新页面 可以看到103对应的页面模块已经可以正常展现
模拟不同的HTTP状态码
除了响应数据，你还可以修改响应的HTTP状态码。在响应部分，找到"状态码"字段，输入你想要模拟的状态码，并点击"应用"按钮。 
模拟错误场景
通过修改响应数据和状态码，你可以模拟各种错误场景，如服务器错误、无网络连接等，以测试应用在不同情况下的行为。 
修改返回的code 模拟错误场景
5. 高级功能
正则表达式拦截
在"U-Network"面板的顶部，你会找到一个输入框，允许你使用正则表达式来拦截特定的URL。这对于只拦截满足特定条件的请求非常有用。
多个规则同时生效
你可以在"U-Network"面板中设置多个拦截规则，并且它们可以同时生效。这使得你可以同时拦截和修改多个请求。
请求导入导出
你还可以保存拦截的请求，以便后续分析和测试。 
6. 使用案例
修复页面上的Bug
当你在页面上遇到Bug时，你可以使用"U-Network"拦截请求，分析网络请求和响应，找出问题所在，并模拟不同情况以验证修复是否成功。