在 Chrome DevTools 中通过 Rendering 面板禁用 WebP 可稳定模拟不支持环境，需勾选 Disable image formats → webp；再结合 Offline、删 src 测试纯 HTML fallback，并验证真机兼容性与 alt 文本有效性。

直接用 Chrome DevTools 模拟不支持 WebP 的浏览器环境，比写一堆检测代码更快、更可靠。关键不是“能不能跑通”，而是“用户在真实弱环境里会不会看到白屏或 404”。

怎么在 DevTools 里禁用 WebP 支持

Chrome 和 Edge 默认支持 WebP，但你可以强制让它“假装不支持”，验证降级逻辑是否真能触发：

• 打开开发者工具（F12 或 Ctrl+Shift+I）
• 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS）打开命令菜单
• 输入 Rendering，选择 Render blocking resources 面板
• 勾选 Emulate network conditions → 在下方下拉菜单中选 No throttling，然后手动勾选 Disable image formats → 勾选 webp
• 刷新页面，此时所有 img[src$=".webp"] 都会触发 onerror，降级逻辑必须立刻接管

注意：chrome://flags 里没有全局关 WebP 的开关，这个 Rendering 面板设置是目前唯一稳定、可复现的模拟方式。

断网 + JS 禁用组合测试才够狠

只禁 WebP 不够，真实用户可能同时遇到断网、JS 被拦截、广告屏蔽插件删掉你的 isSupportWebp() 函数——这时降级必须不依赖任何 JS：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 在 DevTools 的 Network 面板中点击 Offline 开关，彻底断网
• 右键检查任意 img 元素 → 在 Elements 面板中手动删掉它的 src 属性，观察是否立即变成 data-src 地址（说明你用了纯 HTML fallback）
• 如果 src 是空或占位图（如 data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==），而 data-src 存在且是绝对 URL（如 https://cdn.example.com/photo.jpg），才算过关
• 别信 noscript 里塞 JS 检测——JS 已禁，<noscript></noscript> 里的脚本根本不会执行

真机验证时最容易漏掉的三件事

DevTools 模拟再准，也替代不了真机。尤其要注意 iOS Safari 和旧版 Android WebView 的行为差异：

• iOS 13 及更早版本的 Safari 对 fetch() + Blob + createObjectURL() 降级路径有缓存 bug，图片可能一闪就消失；稳妥做法是直接写死 src 为 JPG/PNG 绝对地址
• 部分国产安卓 WebView（如 UC、QQ 浏览器内核）会忽略 img.onerror，但识别 link[rel="preload"][as="image"] 的失败，建议在 中预加载降级图：<link rel="preload" as="image" href="fallback.jpg">
• 用 lynx -dump https://yoursite.com 测试纯文本终端渲染时，img 标签只会输出 alt 文本——所以 alt 必须是有效描述，不能是空或“图片”这种废话

降级不是“多加一行 else”，而是让每张图在任意网络、任意设备、任意配置下，都有确定的加载终点。测的时候别心疼多开几个标签页：一个开 offline，一个禁 WebP，一个开 lynx，一个连真机 USB 调试——少一个，线上就可能多一百个白屏投诉。