html - 是否可以通过浏览器开发工具查看浏览器正在使用哪个 srcset 图像

Question

我一直试图通过浏览器开发者工具查看我的浏览器正在使用哪个 srcset 图片，但除了使用网络选项卡查看它获取的图片外，我无法分辨。

使用网络选项卡通常没问题，但有时我注意到它会获取 2 个不同大小的图像版本，如果一个断点在 600，另一个在 900，并且浏览器当前在 750px，就会发生这种情况宽的。

(我在 Chrome 和 FireFox 上都试过了，在某些情况下 chrome 似乎会拉下两个图像，但 FireFox 似乎只拉下一个)

我想知道的原因是，如果它拉下两个图像 srcset 剂量它会在我缩放浏览器窗口时自动在它们之间交换，我会感兴趣吗？这无法通过检查元素来判断，它只是给出了 img 元素的原始 html，而不是它使用的实际 img srcset 选项。

Answer 1

图像有一个属性 currentSrc，您可以记录它或使用多种工具检查它:

• 在 chrome 开发者工具中检查元素，然后点击属性选项卡。
• 在 Firefox 开发人员工具中检查元素，右键单击并从上下文菜单中选择 DOM。

您将看到一个 currentSrc 的条目:带有实际的图像源。