MOCK-PLUS

MOCK-PLUS > Save, modify and mock HTTP request responses for seamless WEBAPP development, testing and demonstrations. As WEB features become more complex and business processes grow longer, debugging front-end code with real data becomes more costly during development and DEBUG. The MOCK-PLUS extension can mock API response data for repeated front-end debugging. ### Features - Modify requests sent by the WEB at the network level - Does not intrude into WEB code or inject js into pages - Does not modify native XMLHttpRequest or fetch objects - View the corresponding data in the developer tools Network panel ### Function list - The MOCK-PLUS extension adds a tab panel to developer tools. In that tab, you can browse saved requests and modify or create response data - MOCK requests at any point in the WEB session lifecycle - Configure request domains where rules apply and request URLs to ignore - Does not save duplicate request bodies, and allows ignored params/data parameters in requests to be configured - Configure ignored request params/data parameters for individual request URLs - Compare selected response data with the actual response - Name response data to distinguish it and quickly switch responses in the popup panel - Save and upload a complete configuration file for sharing ### Saving requests ```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 : 根据配置对比请求、响应，\n判断是否重复 background -> background : 保存条数限制检查 background -> background : 整理要保存的数据格式 background -> chrome : 保存数据 chrome -->> background : 保存成功 background -->> panel : 保存成功 ``` ### MOCK process ```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 : 根据过滤后的请求数据寻找是\n否有匹配的已保存响应数据 background -> background : 生成DATAURL background -->> web : 将请求重定向至DATAURL web -> web : Network中返回DATAURL web -> web : xhr对象获取响应数据 ``` ### MOCK panel in developer tools <img src="https://assets.luanmingli.com/mock-plus/panel.png" alt="panel" width="1000" /> ### popup panel <img src="https://assets.luanmingli.com/mock-plus/popup.jpg" alt="popup" width="1000" /> ### Global settings Setting | Description :--- | :--- MOCK | Enable or disable MOCK. When enabled, red MOCK text appears on the extension icon Save requests | Enable or disable saving response data for requests. When enabled, blue SAVE text appears on the extension icon. Developer tools must be open to save requests Applicable request domains | Saving is triggered only when an xhr request targets an address under these domains Save configuration file | Save all extension data locally Upload configuration file | Upload a configuration file and overwrite the extension's current data Maximum entries per URL | Data saved under the same URL is ordered chronologically. When the limit is exceeded, the oldest response data that is neither named nor active is deleted Check request URL parameters | Whether to use request URL parameters when checking for existing response data Check request body | Whether to use request body parameters when checking for existing response data Ignore request URL parameters | Ignore certain URL parameters when checking for existing response data Ignore request body parameters | Ignore certain request body parameters when checking for existing response data Hide characters in URLs in the list | Hide certain strings in request URLs in the MOCK panel; the full URL appears on hover Filter requests by URL contents | Ignore requests whose URLs contain certain strings URL filter | Filter displayed saved data by request URL or configured name Filter current page URL | Filter saved data to show data originating from the current WEB URL ### Settings for an individual request URL Same as the global settings, but apply only to the current request URL. Setting | Description :--- | :--- Compare next request | When MOCK and request saving are both enabled and active data exists, compare that data with the actual response and edit the saved data directly. Only one comparison can be enabled at a time. | | A comparison icon appears at the URL when comparison is enabled; click it to cancel Pin | Request URLs are ordered by request time in reverse chronological order; an entry can be pinned to the top | | A pin button appears at the URL when pinned; click it to unpin Name | Configure a name to display instead of the URL; the full request URL appears on hover Filter RESPONSE | Filter saved response data by the entered string Close button | Disable all active MOCK responses under this URL ### Settings for an individual saved entry Setting | Description :--- | :--- Enable button | Click to enable MOCK and return this response data Active button | Click to stop returning this response data METHOD | Request method PARAMS | URL parameters remaining after applying configured exclusions BODY | Request body parameters remaining after applying configured exclusions RESPONSE | Saved response body data Edit name | Set a name for easier searching; named responses can also be switched quickly in the popup panel ### changelog #### 3.0.0 * Upgrade to v3 * v3 cannot access request bodies, so remove the option to check request bodies * Remove the compare-next-request function * Move saving to devtool * Automatically generate interception rules when data is updated * MOCK rules are matched automatically by chrome #### 3.0.1 * Add configuration for multiple request domains and quick switching * Add tag configuration to save and filter corresponding data after selecting a tag * Adapt matching rules for chrome101 and requestDomains configuration #### 3.0.2 * Add filtering of request URL parameters and request body parameters for data under a URL * Add global search for saved data * Always display tag information in table data * Optimize count and size display #### 3.0.3 * Improve comparison with existing requests * Bug fixes