Break the network. Harden the interface.
一个专门把网络调烂的浏览器实验室。它会对受控测试请求注入高延迟、丢包、DNS 故障、2G 限速和随机 HTTP 失败，并实时展示请求究竟是如何死掉的。
- 0–2000ms 延迟：附带 ±25% 抖动，暴露加载态与竞态问题
- 0–80% 丢包：模拟底层网络错误，而不是普通 HTTP 报错
- DNS 断网：让请求像域名根本不存在一样失败
- 56kbps–100Mbps 限速：覆盖拨号、2G、EDGE、3G、4G、5G 与光纤档位
- 0–60% 随机失败：返回可被业务代码处理的 HTTP 503
- 实时遥测：成功率、平均等待、实测吞吐、耗时柱状图与逐条事件记录
- 持续发包：每 2.5 秒自动测试一次，观察界面在长时间烂网下是否稳定
内置「风平浪静」「机场 Wi-Fi」「地铁钻隧道」「DNS 末日」四套预设。
模拟器通过 Service Worker 工作，但只拦截本站的 /api/chaos。它不会修改操作系统网络、代理、DNS 设置，也不会拖慢其他网页。
flowchart LR
UI["控制台参数"] --> SW["Service Worker"]
REQ["Fetch 测试请求"] --> SW
SW -->|延迟 / 丢包 / DNS / 503 / 限速| API["受控载荷接口"]
SW --> LOG["实时遥测与事件记录"]
限速时，Service Worker 会将响应拆成小块并按固定时间片输出；丢包和 DNS 故障会产生真正的 Fetch 网络错误；随机失败则保留 HTTP 语义，返回 503 与 Retry-After。
需要 Node.js 22.13 或更高版本。
npm ci
npm run dev打开终端提示的本地地址。Service Worker 只在安全上下文（HTTPS 或 localhost）下生效。
npm test
npm run lint测试会构建 Cloudflare Worker 兼容产物，检查页面元数据与关键界面文案，并校验测试载荷的大小和缓存策略。
- React 19 + TypeScript
- Next.js 16 API 约定
- Vinext / Vite
- Cloudflare Worker 兼容运行时
- 原生 Service Worker、Fetch、Streams API
- 浏览器出于安全原因不允许网页直接修改系统网络，所以这里采用范围受控的 Service Worker 注入。
- “DNS 故障”是浏览器内等价模拟，无法改变真实 DNS 解析器。
- 首次打开需要等待 Service Worker 激活，顶部状态变为「折磨引擎已就绪」后即可测试。