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

Posted 2023-02-15

技术标签:

【中文标题】是否可以通过浏览器开发人员工具查看浏览器正在使用哪个 srcset 图像【英文标题】：Is it possible to see which srcset image a browser is using with browser developer tools 【发布时间】：2015-09-03 04:41:30 【问题描述】：

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

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

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

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

【问题讨论】：

图像之间的交换听起来有点像 js。尝试检查可能有点痛苦的自定义 js 文件。我相信如果它根据屏幕大小交换两个图像，那么它可能是 Jquery 或纯 Js 在那个时候做这项工作。该网站也可以使用媒体查询。您是在问页面加载时是否同时加载两个图像？绝对不是 JS 加载图像，我将页面创建为 srcset 图像测试，并且真的有一个裸 html 结构，在<body> 中只有一个图像标签。 @AdamBuchananSmith 正确，因为当页面仅加载 1 张图片时，它只能使用 【参考方案1】：

图像具有 currentSrc 属性，您可以记录它或使用多种工具对其进行检查：

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

您将看到 currentSrc: 的条目，其中包含实际的图像源。

【讨论】：

如果您发现自己经常这样做，请选择元素并在 DevTools 控制台中输入 $0.currentSrc 将鼠标悬停在检查器中的 img 上现在应该也会在工具提示中显示 currentSrc 属性。 @Splatbang 是的，但是当 url 很长时它会裁剪它，所以你可能看不到你在追求什么.. 对于长 URL 也很方便，直接复制到剪贴板（在 chrome 中）：copy($0.currentSrc) currentSrc 是一个标准属性，您可以使用多个浏览器检查它，包括 firefox【参考方案2】：

我今天遇到了这个问题，发现可以监控变量：

显示控制台抽屉（你也可以按 ESC 键）

创建live表达式（我创建了2个，被选元素的currentSrc和innerWidth）

live 表达式监视所选 img 标记的当前 srcset。它也适用于图片标签内的 img。

【讨论】：

IMO 这是今天（2020 年）的最佳答案。我对接受的答案有一些问题，其中 Chrome 没有正确填充或更新“属性”选项卡。这绕过了这个问题，把结果放在前面，我猜是……错误……底部。 :p 知道（至少在我的测试中），如果浏览器已经下载/显示了最大的图像，当您缩小屏幕时，浏览器不会从您的 srcset 中交换较小的图像，这很有用。为了准确地测试，从最小的视口开始，然后增加大小，而不是相反。这在 2021 年效果很好，只需单击眼睛，添加 $0.currentSrc ，然后当您选择要检查的图像时，它会显示加载的图像。谢谢医生。【参考方案3】：

好的，去检查 chrome 中的元素。点击网络标签，然后刷新页面。

它将显示正在加载的图像、它们所用的时间和大小。

【讨论】：

@sam 这是你要找的吗？这没有回答问题，因为 OP 在问题中说他已经尝试过了。【参考方案4】：

遇到了同样的问题。我的简单解决方案是右键单击图像并“在新选项卡/窗口上打开图像”。

快速简便的解决方案，您可以查看在不同断点加载的图像。

【讨论】：

【参考方案5】：

我也想知道。我想我在没有使用任何开发工具的情况下就知道了。

为了检查我只需右键单击并另存为以查看填写的文件名（以及它是否与我的高分辨率图像或低分辨率图像匹配。）

您的部分问题的答案是否定的，当您调整浏览器大小时，并非所有浏览器都会自动在不同的 srcset 图像源之间切换。我在 2018 年 8 月使用几种不同的 Windows 桌面浏览器进行了检查。有些人的反应不同，但大多数人没有交换图像，除非你也点击刷新。

我没有直接调查实际下载了哪些图像，或者一次是否下载了多个图像。我只测试了实际显示的图像以及该图像是否在浏览器调整大小时发生变化。我根据结果做出了假设，这可能是也可能不是 100% 正确，但似乎是一个快速而肮脏的良好开端。