← 返回功能
Pro

Request Mocker

Request Mocker 无需接触后端即可更改浏览器中的网络流量 - 阻止请求、设置或删除请求和响应标头,并返回您自己的状态代码、正文和延迟,以便您可以测试真实 API 不会按需生成的状态。

有些州很难到达。空仪表板需要空响应,重试横幅需要 500,加载骨架需要慢速端点,前端需要尚不存在的端点。通常,每一项都意味着后端更改、种子数据库或您不希望发布的注释行。

Request Mocker 在浏览器中生成这些状态。通过子字符串或通配符匹配 URL,然后决定会发生什么:阻止请求,使页面看到失败,动态重写请求或响应标头,或者返回带有您选择的状态代码、内容类型、正文和延迟的预设响应。页面无法区分差异,因此您真正的错误处理、空状态和超时都是真实运行的。

阻止和标头重写使用 Chrome 的 declarativeNetRequest 规则,因此它们适用于页面请求的所有内容,包括重新加载时。伪造的响应用于从页面内部获取 XMLHttpRequest,面板会记录每个响应以及每个规则的命中计数器,因此您可以一眼看出您的规则是否与您认为的相匹配。

规则是故意容易被废除的。它们按站点保存,仅适用于当前选项卡,并且在您关闭工具时,它们中的每一个都会被删除 - 因此,没有办法花一下午的时间来调试一个问题,而这个问题原来是一个您忘记正在运行的模拟问题。

实时预览
app.example.com
Request Mocker 此选项卡上有 3 条活动规则
新规则
模拟回复 GET /api/orders
地位 500 延迟毫秒 1200 添加规则
规则
嘲笑 GET /api/orders → 500 7 ●
堵塞 ANY analytics.vendor.com/* ●
标头 ANY /api/* → Cache-Control: no-store ●
已提供嘲笑回复
GET 500 /api/orders?page=1 · fetch · 14:22:07
GET 500 /api/orders?page=2 · fetch · 14:22:11
核心功能

阻止任何请求

通过 URL 和方法匹配来阻止请求的离开,并观察当脚​​本、图像、跟踪器或 API 调用根本不到达时页面的行为方式。

即时重写标头

设置或删除请求和响应标头 - 添加授权标头、强制 Cache-Control: no-store 或剥离标头以查看损坏的内容 - 无需更改任何服务器。

返回您自己的回复

使用您选择的状态代码和内容类型为您编写的正文提供服务。非常适合空列表、格式错误的有效负载和尚不存在的端点。

模拟错误和慢速网络

根据需要返回 500、429 或 404,并添加以毫秒为单位的延迟以阻止响应,以便可以正确测试加载状态、旋转器和超时处理。

子字符串或通配符匹配

与 /api/users 等片段松散匹配,或与 *.example.com/v1/* 等通配符精确匹配,并将任何规则缩小为单个 HTTP 方法。

每个站点保存,退出时清除

规则属于您创建它们的站点,并且仅适用于当前选项卡。关闭该工具会删除所有活动规则,因此不会有任何东西在背后拦截流量。

使用场景

测试空状态

返回列表端点的空数组,并查看您的 UI 是否显示正确的空状态或尴尬的空白面板。

强制运行错误处理

让端点根据需要返回 500 或 429,以检查重试横幅、toast 和后备副本是否都实际出现。

针对尚不存在的 API 进行构建

模拟商定的响应形状,并在后端仍在编写时针对它构建整个前端。

诊断第三方脚本

阻止分析、聊天或广告脚本,以确认它是否会减慢页面速度或破坏布局。

检查慢速网络行为

向一个端点添加两秒的延迟,并观察当单个调用滞后时骨架、旋转器和超时如何保持。

使用方法
1

打开Request Mocker

单击 DevSuite Pro 坞站中的 Request Mocker 图标。该面板将打开,顶部有一个规则表单,下面是您为此网站保存的规则。

2

选择应该发生什么

选择“阻止请求”、“编辑标头”或“模拟响应”,并可选择将规则限制为一种方法,例如 POST。

3

说出要匹配的 URL

输入子字符串(例如 /api/users),或使用通配符(例如 *.example.com/v1/*)。选择规则是仅涵盖 fetch 和 XHR 调用还是涵盖所有请求类型。

4

填写详细信息并添加

对于标题,每行写一个 — 名称:设置 1 的值,名称:单独删除它。对于模拟,设置状态、延迟、内容类型和正文。单击“添加规则”,规则会立即应用。

5

观察它的工作情况,然后关闭

重新加载或使用页面,日志会显示每个伪造的响应,并在每个规则旁边显示命中计数。随时切换、编辑或删除规则;关闭该工具将清除它们。

准备好开始了吗?

免费安装 DevSuite Pro,为您的浏览器解锁 71+ 个开发者工具。

添加到 Chrome 添加到 Edge 添加到 Firefox