在 Chrome 中模拟网络请求的不同延迟

Question

是否可以通过chrome模拟不同请求的网络延迟变化（在一定范围内）？

例如用于测试当 ajax 响应的顺序不同时会发生什么。

Answer 1

这里是 DevTools 技术作家。我们在网络面板中有网络节流：

但这会创建一个稳定的节流状态。从 Chrome 68 开始，我们没有任何在给定范围内随机化限制量的功能。

您也许可以使用 Puppeteer 来实现此目的。

Answer 2

我认为这是可能的，创建一个扩展并使用 Chrome 调试器 和 网络域

Answer 3

您可以使用这个 Chrome/Firefox 开发工具扩展，它可以模拟可配置 URL 的 http 请求延迟 Chrome 开发工具插件

Answer 4

随机化延迟的最简单解决方案是代理或中间件。这适用于任何浏览器。

这是一个工作中间件，可以插入到 live-server 或任何 connect 或 express 服务器中：

module.exports = function (req, res, next) {
    // Randomly delay the response, to help uncover race conditions.
    const delay = Math.random() * 2000;
    setTimeout(next, delay);
}

我没有将其构建为完整的代理服务器，因为我已经在使用 live-server，它支持通过 CLI 加载中间件（尽管有一个关于它相对于 加载文件的位置的警告）。

对于代理服务器，您应该能够使用

node-http-proxy 并调整 其延迟示例以使用随机数而不是固定延迟。

注释和可能的改进

这种简单实现的一个缺陷是，如果请求自然需要比最大随机延迟更长的时间， 它可能永远不会被重新排序以出现在其他请求之前。 您需要增加随机延迟，当您有大量小型但串行请求级联时，这会使其速度异常缓慢。

更高级的版本可以专门编排“重新排序”响应， 通过跟踪未完成的请求，并将它们延迟到所有 选择在他们之前发送的回复已发送， 并且它可以使用随机种子来实现可重复性。

这并不是一件小事，考虑到某些请求可能依赖于其他请求， 例如一个脚本加载另一个脚本，或者一个 css 文件加载图像。

照原样，使用

Replay 浏览器

已经可以实现再现性 或类似的时间旅行调试工具——在你的工具包中非常有用！

但是，如果它是内置功能，您可以看到随机种子并重现它 即使您不知道特定的运行会发现错误， 没有准备好进行时间旅行调试会话。

另一个需要注意的要点是，如果错误是由于响应时间接近而引起的，那么添加大量随机延迟可能会将它们分散开来，并导致错误不频繁地重现。 编排版本可能有也可能没有这个问题。

此外，并非所有错误的存在都是由于响应出现的顺序所致；可能存在其他异步代码，并且可能存在涉及响应时间和其他延迟的竞争条件的组合。虽然编排版本的目的是减少过度的延迟，但它可能会减少有助于发现错误的延迟。

也许混合分布是最好的，二项式分布可能比线性分布更好。这是一个有趣的问题。无论如何，我想我已经说得够多了。