网络速度模拟器 - 延迟/带宽限制感受
通过控制台或简单API延迟,模拟在慢速网络下加载页面的感觉(演示)。
UD5工具箱
模拟真实网络条件,测试网页在不同网速下的表现
将此代码保存为 sw.js 并部署到您的服务器根目录,即可在全局范围内模拟网络条件。
网络限速模拟器是一种开发者工具,用于模拟不同网络条件(如慢速2G、3G、4G等)下的网页加载行为。通过人为添加延迟、限制带宽和模拟丢包,它帮助开发者测试网站在弱网环境下的表现,优化用户体验,确保应用在各种网络条件下都能良好运行。
Service Worker 充当浏览器与服务器之间的代理层。当页面发起网络请求时,SW 拦截 fetch 事件,根据配置的延迟时间等待后再将请求转发到服务器;对于响应数据,SW 可以分块读取并根据带宽限制控制传输速率,从而精确模拟真实网络环境。
由于浏览器的同源策略(CORS),iframe 中的脚本无法直接 fetch 跨域资源。对于跨域URL测试,建议部署 Service Worker 到目标服务器,或使用支持 CORS 的API端点。同源URL可以完美支持所有模拟功能。
延迟(Latency)是数据包从发送到接收所需的时间,通常以毫秒(ms)为单位,主要影响连接建立速度。带宽(Bandwidth)是单位时间内可传输的数据量,以 Mbps 或 Kbps 为单位,影响大文件下载速度。两者结合才能真实模拟网络体验。
丢包模拟会在每次网络请求前按设定概率随机决定是否丢弃该请求。如果请求被"丢弃",模拟器会返回网络错误,就像真实网络中数据包丢失一样。这有助于测试应用的重试机制和错误处理能力。
不会。页面内的 fetch 拦截仅影响当前工具页面的测试 iframe。即使部署了 Service Worker,其作用范围也仅限于注册 SW 的路径(scope)内。其他浏览器标签页不受任何影响。
建议将生成的 Service Worker 代码部署到测试/ staging 环境,而非生产环境。通过 SW 的消息传递机制,可以动态调整网络参数而无需重新部署。对于自动化测试,还可以通过 URL 参数或 postMessage API 进行程序化控制。
通过控制台或简单API延迟,模拟在慢速网络下加载页面的感觉(演示)。
向指定 URL 发送不同 HTTP 方法的请求,显示响应状态码、头部和主体,学习 RESTful API。
待办项拖入四象限,并设置每个的提醒时间,自动排序今日。
定义端点、JSON响应体和延迟毫秒,模拟后端API供前端本地开发调试。
配置事件类型和重试间隔,生成用于接收 SSE 的前端 EventSource 代码和后端流示例。
向任意输入URL发送请求,清晰显示响应状态码、头信息和体,类似轻量级Postman。
分别在主线程和 Worker 中使用 Canvas 执行密集绘制,对比 FPS 和主线程阻塞程度。
并排展示ease、ease-in、ease-out等不同CSS缓动函数的动画速率差异,辅助选择合适曲线。
在前端创建模拟 SSE 连接,接收服务器推送的消息流并实时渲染到页面。
发起请求获取当前URL或任意允许CORS的URL的Response Headers,展示详情。
模拟 Service Worker 从安装到激活的完整生命周期,理解更新机制。
浏览 Chrome DevTools Protocol 域和方法,填充参数生成 JSON 命令,用于远程调试。
将同类待办归入电话、外出、电脑等情境,一目了然优化执行顺序。
根据输入的外部域名,生成 dns-prefetch、preconnect 和 preload 标签。
向指定 URL 发送预检请求,分析 Access-Control-* 响应头是否符合预期。
对长列表应用 content-visibility:auto,对比启用前后渲染时间和内存占用。
模拟多层代理逐步添加 X-Forwarded-For 头的过程,理解如何获取真实客户端 IP。
勾选需要临时禁用的 ESLint 规则,生成对应的 /* eslint-disable */ 注释语句。
简易三列看板,任务卡片可拖拽并标记颜色,本地保存任务流。
对比启用和不启用 content-visibility: auto 时页面大量列表的渲染性能差异。
解析标准Cron表达式,显示未来多次执行的具体日期时间,辅助验证定时任务配置。
常用HTML实体编码(如© ©)的图形化速查表,点击即可复制实体名称或数字代码。
粘贴Link rel=preload头字段,解析展示服务器计划推送的资源列表。
添加知识点,按艾宾浩斯曲线自动生成未来几周的复习日期提醒。
输入问题描述(如“禁止未使用变量”),自动匹配对应的 ESLint 规则名称及配置建议。
输入常见的报错片段,基于静态库返回常见的解释和可能的修复方案。
创建一个测试自定义元素,记录并展示 connectedCallback, attributeChangedCallback 等执行顺序。
设置可用时段与会议室名称,模拟用户拖拽创建预订并查看冲突。
配置不同的下划线出现、消失动画(从中间、左侧等),生成链接美化CSS。
提供一份涵盖性能、安全、备份、监控等上线前检查清单,可自定义勾选。