javascript - 有没有办法从 JavaScript 模拟网络条件？

Question

在 Firefox 的开发者工具中，可以选择模拟某些类型的移动数据连接等条件。有没有办法从 JavaScript 激活它，而不需要用户打开开发者控制台？

标签： javascriptnetworkingbrowserdeveloper-tools

Answer 1

根据您的用例，您可以

1. 安装一个监听“fetch”事件的服务工作者，然后event.respondWith延迟调用（需要 HTTPS）；
2. 在应用程序范围内拦截对 fetch / XMLHttpRequest 的调用以执行相同的操作（覆盖window.fetch和/或window.XMLHttpRequest） - 请注意，这不会影响直接从 HTML 加载的图像/资源；
3. 设置 HTTP cookie 或标头并在响应之前使您的服务器/延迟（但是，许多用户这样做可能会降低服务器并发性）

请注意，如果您想使用流式资源（例如渐进式 JPEG、HTML）来模拟这种行为，最好的选择是 service worker 路由，您可以在其中ReadableStream直接构建一个（请参阅此处获取一些灵感：https://developers .google.com/web/updates/2016/06/sw-readablestreams）。

对于实际的流媒体行为本身，我会考虑使用 RxJs 管道之类的东西，它可以让您轻松引入延迟、任意停止等来模拟不同的网络条件。