应禁用缓存后在Chrome DevTools Network面板筛选Img请求，观察实际加载的图片文件名及尺寸，结合currentSrc和naturalWidth确认是否按sizes与srcset预期选图；若始终加载最大图，需检查sizes断点是否匹配当前视口宽度及DPR。
如何用 DevTools 验证 srcset 实际加载了哪张图
浏览器是否按你写的 srcset 和 sizes 选图，不能靠猜。真实触发情况只在 Network 面板里可见，且必须禁用缓存才能复现首次加载逻辑。
- 打开 Chrome DevTools → Network 标签 → 勾选 Disable cache
- 刷新页面，筛选
Img类型请求 - 找到对应
<img alt="HTML怎么监控线上网页中srcset的降级触发情况" >的请求，右键 → Copy → Copy response，粘贴看实际返回的图片尺寸（如 320×240）是否匹配你srcset中标为320w的那张 - 若始终加载的是最大图（比如 1200w），说明
sizes没生效或媒体查询未命中——检查当前视口宽度是否落在sizes的任一断点内
监听 resize + devicePixelRatio 变化模拟降级路径
srcset 是纯声明式行为，浏览器不抛事件，但你可以通过监听环境变化，预判它会走哪条路径，这对弱网/高 DPR 切换场景特别有用。
- 监听
window.onresize，读取document.documentElement.clientWidth和window.devicePixelRatio - 结合你写的
sizes媒体表达式（如(max-width: 768px) 100vw, 50vw），手动计算出“当前渲染宽度” - 再根据
srcset中的w描述符列表（如photo-400.jpg 400w, photo-800.jpg 800w），用最接近又不小于“渲染宽度 × DPR”的那一项作为预期加载源 - 这个预判值可打点上报，和 Network 实际加载结果比对，就能发现配置漂移（比如 CSS 改动导致容器变窄，但
sizes没同步更新）
捕获 srcset 降级失败的静默 fallback 场景
真正危险的不是没选对图，而是 srcset 完全失效后退化成单图，且这张单图还加载失败——此时页面白屏，但控制台无报错，error 事件也收不到。
- 根本原因：浏览器不支持
srcset（如 IE11）时，直接忽略该属性，只加载src；若src指向一个 404 路径，就静默留白 - 必须给每个
<img alt="HTML怎么监控线上网页中srcset的降级触发情况" >绑定onerror，且写成内联形式：onerror="this.src='/images/placeholder.jpg'; this.onerror=null;" - 不要依赖 JS 动态绑定 —— 断网时 JS 不执行，
onerror就永远不会注册 - 上报逻辑建议轻量：在
onerror回调里发一个最小 beacon（navigator.sendBeacon），带上this.currentSrc和this.src，用于定位是srcset未生效，还是兜底src本身不可用
服务端日志无法替代客户端真实选图行为
CDN 或 Nginx 日志里看到的请求路径，只是最终被加载的那张图，但它无法告诉你“为什么选这张”。比如同一张 photo-800.jpg，可能是 DPR=2 的手机主动选的，也可能是 sizes 写错导致小屏被迫加载的——这两种情况对用户体验的影响完全不同。
立即学习“前端免费学习笔记（深入）”；
- 仅靠服务端日志，你无法区分是“策略生效”还是“策略崩溃后硬扛”
- 必须在客户端采集
HTMLImageElement.currentSrc（加载完成后的实际 URL）和HTMLImageElement.naturalWidth（解码后的真实宽度），二者结合才能确认是否发生非预期降级 - 注意：
currentSrc在load事件后才稳定；naturalWidth在图片解码完成前为 0，需在load后读取
srcset 配置、CSS 布局宽度、设备 DPR、网络信号强度这四者在运行时对齐——稍有错位，降级就从“优化手段”变成“故障放大器”。 
