MOCK-PLUS
MOCK-PLUS Extension
随着WEB中功能复杂度提升,业务流程变长,在开发和DEBUG过程中用真实数据调试前端代码成本升高。MOCK-PLUS扩展可以模拟接口返回数据供前端反复调试。
### 特点
- 可在网络级别修改WEB发送的请求
- 不侵入WEB中任何代码,不会向页面注入js
- 不会修改原生XMLHttpRequest及fetch对象
- 能够在开发者工具Network面板中查看相应的数据
### 功能列表
- MOCK-PLUS扩展将插入开发者工具选项卡面板中。在选项卡中可浏览保存的请求、修改或新建响应数据
- 可在WEB会话生命周期中任意时刻MOCK请求
- 可配置的生效请求域名、忽略的请求链接
- 不会保存相同请求体,并可配置request中忽略的params/data参数
- 单条请求链接级别配置request中忽略的params/data参数
- 可对比勾选的响应数据和真实响应数据的不同
- 对响应数据添加名称以便于区分,并可在popup面板中快速切换响应数据
- 保存及上传完整的配置文件,可用于共享
### 保存请求流程
```sequence
participant WEB as web
participant MOCK面板 as panel
participant DEVTOOL as devtool
participant BACKGROUND as background
participant CHROME as chrome
panel -> devtool : 开启保存
devtool -> chrome : 保存配置
web -> devtool : 发送请求
devtool -> chrome : 检查是否开启
chrome -->> devtool : 开启保存
devtool -> devtool : 监听req、res
devtool -> devtool : 过滤xhr类型
devtool -> devtool : 过滤redirect
devtool -> background : 发送请求数据
devtool -> background : 发送当前页面地址
background -> chrome : 读取配置
chrome -->> background : 返回配置
background -> background : 检查保存开关是否开启
background -> background : 检查配置的生效请求域名
background -> background : 获取链接中参数
background -> background : 根据配置过滤链接参数
background -> background : 获取请求体中参数
background -> background : 根据配置过滤请求体参数
background -> background : 根据配置对比请求、响应,\
判断是否重复
background -> background : 保存条数限制检查
background -> background : 整理要保存的数据格式
background -> chrome : 保存数据
chrome -->> background : 保存成功
background -->> panel : 保存成功
```
### MOCK流程
```sequence
participant WEB as web
participant MOCK面板 as panel
participant DEVTOOL as devtool
participant BACKGROUND as background
participant CHROME as chrome
panel -> devtool : 开启保存
devtool -> chrome : 保存配置
chrome -->> background : 通知开启
web -> background : 发送请求
background -> background : 过滤请求域名
background -> background : 过滤xhr类型
background -> background : 检查是否开启
background -> background : 检查请求链接是否过滤
background -> background : 检查是否有开启MOCK的数据
background -> background : 获取链接中参数
background -> background : 根据配置过滤链接参数
background -> background : 获取请求体中参数
background -> background : 根据配置过滤请求体参数
background -> background : 根据过滤后的请求数据寻找是\
否有匹配的已保存响应数据
background -> background : 生成DATAURL
background -->> web : 将请求重定向至DATAURL
web -> web : Network中返回DATAURL
web -> web : xhr对象获取响应数据
```
### 开发者工具中MOCK面板

### popup面板

### 全局设置项说明
设置项 | 说明
:--- | :---
MOCK | 开启/关闭MOCK。开启时扩展图标上会出现红色MOCK文字
保存请求 | 开启/关闭保存请求的响应数据。开启时扩展图标上会出现蓝色SAVE文字。保存请求需打开开发者工具
生效的请求域名 | xhr请求该域名下的地址时才会触发保存
保存配置文件 | 将扩展所有数据保存至本地
上传配置文件 | 上传配置文件并覆盖扩展当前数据
相同链接条数上限 | 同一链接中保存的数据会按时间正序排列,超出限制条数后会删除最久远的未设置名称并未设置生效的响应数据
检查请求链接参数 | 判断是否已存在响应数据时,是否依据请求时的链接参数判断
检查请求体 | 判断是否已存在响应数据时,是否依据请求时的请求体参数判断
忽略请求链接参数 | 判断是否已存在响应数据时,忽略某些链接中的参数
忽略请求体参数 | 判断是否已存在响应数据时,忽略某些请求体的参数
列表中隐藏url中的字符 | MOCK面板中展示数据时,隐藏请求链接中的某些字符串,鼠标hover时会显示完整链接
过滤url中包含的请求 | \b当请求链接中包含某些字符串时,忽略保存该请求
url过滤 | 根据请求链接/设置的名称过滤显示保存的数据
筛选当前页面链接 | 在保存的数据中筛选出从当前WEB链接中发出的数据
### 单条请求链接中设置项
同全局配置项,只对当前请求链接生效
设置项 | 说明
:--- | :---
对比下次请求 | 同时开启MOCK及保存请求,并有生效数据时,会对比该数据和真实返回数据,并且能直接修改保存数据。同一时间只能开启一条对比。
| | 开启对比后url位置会出现对比图标,点击可取消对比
置顶 | 不同请求链接按请求时间倒序排列,可设置将该条目置顶
| | 置顶后url位置会出现置顶按钮,点击可取消置顶
名称 | 可配置名称,替代URL显示,hover时会显示完整请求地址
过滤RESPONSE | 根据输入的字符串过滤已保存的响应数据
关闭按钮 | 关闭该链接下所有生效的MOCK
### 单条保存数据中设置项
设置项 | 说明
:--- | :---
开启按钮 | 点击开启MOCK后返回该条响应数据
生效按钮 | 点击关闭返回该条响应数据
METHOD | 请求的method
PARAMS | 该请求根据配置项忽略后的链接参数
BODY | 该请求根据配置项忽略后的请求体参数
RESPONSE | 已保存的响应体数据
修改名称 | 设置名称方便查找,并且设置名称后可在popup面板中快速切换
### changelog
#### 3.0.0
* 升级至v3版本
* v3无法获取请求体,去除检查请求体选项
* 去除对比下一次请求功能
* 保存迁移至devtool
* 更新数据自动生成拦截规则
* MOCK由chrome自动匹配规则
#### 3.0.1
* 增加多请求域名配置,可快速切换
* 增加tag配置,选择tag后保存数据、筛选相应数据
* 匹配规则适配chrome101,requestDomains配置
#### 3.0.2
* 增加对链接下数据请求参数、请求体参数过滤
* 增加全局搜索保存的数据
* 表格数据中始终展示tag信息
* 优化count、size显示
#### 3.0.3
* 优化对比已存在请求
* bug修复
Source Manifest.json
How to download and manually install MOCK-PLUS extension for Chrome
Looking for a way to install MOCK-PLUS extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.
However, you may need to install MOCK-PLUS extensions manually, this article outlines two simple methods to effortlessly install MOCK-PLUS extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.
Method 1: Download MOCK-PLUS extension and manually install through Drag &Drop
If you ever need to manually install a MOCK-PLUS extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.
Step 1: Download the MOCK-PLUS Extension by clicking the "Download CRX" button on the website.
Look for the MOCK-PLUS extension you wish to install. Go to the website and download the MOCK-PLUS extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for MOCK-PLUS extension that contains all the data.
Step 2: Extract &Arrange Files
Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.
Step 3: Go to the Chrome Extensions Page
Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.
Step 4: Drag and Drop the Extension
Now, go to the folder where you extracted the MOCK-PLUS extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.
Step 5: Complete the Installation
Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.
Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.
Method 2: Download MOCK-PLUS extension for Chrome and install in Developer Mode
This is another method to install MOCK-PLUS extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.
Step 1: Download the MOCK-PLUS extension file
Select and download the MOCK-PLUS extension by clicking the 'Download CRX' button on the website.
Step 2: Extract the downloaded contents
Convert the file to a ZIP file if it is in CRX format then extract the MOCK-PLUS extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your MOCK-PLUS extension running.
Step 3: Open Chrome Extension Setting Page
In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.
Step 4: Enable Developer Mode
After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.
Step 5: Load the Unpacked Extension
Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."
Step 6: Select the Extension Folder
Once the pop-up opens upon clicking Load unpacked, select the MOCK-PLUS extension directory and click on the "Select Folder "button.
Step 7: Confirm and Install
After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.
Conclusion
Here we've made a step-by-step guide on How to manually install MOCK-PLUS extension in 2 ways. We hope this guide proves helpful.
Similar Extensions
PostWoman Http Test 34 46 ★ 834KiB
Mock:Intercept and directly return data 34 6 ★ 487KiB
ModResponse - Mock and replay API 34 23 ★ 454KiB
tweak: mock and modify HTTP requests 34 190 ★ 3.22MiB
FeHelper(前端助手) 34 321 ★ 2.72MiB
Mokku 34 76 ★ 3.28MiB
Ajax Modifier 34 48 ★ 2.08MiB
YMock: Mock API calls info 34 2 ★ 1.68MiB
Dummy 34 0 ★ 531KiB
Oh-my-Mock 34 8 ★ 7.07MiB
MockStar 34 0 ★ 1.67MiB
Cone Devtools 34 1 ★ 830KiB
Ajax Interceptor Tools 34 12 ★ 2.31MiB
xhr-devtool 34 1 ★ 51.34KiB
Mock Proxy 34 4 ★ 2.03MiB
MockMan - mock APIs 34 17 ★ 2.3MiB
Ajax Proxy 34 8 ★ 835KiB
Easy-Interceptor 34 2 ★ 454KiB
XSwitch 34 18 ★ 1.6MiB
Ctool Commonly Used Software Development Tools 34 42 ★ 4.07MiB
Netify 34 40 ★ 1.24MiB
稀土掘金 34 339 ★ 4.66MiB
GoRes 34 8 ★ 225KiB
Gooreplacer 34 14 ★ 1002KiB