107

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

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

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

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

4

5 回答 5

152

图像有一个 currentSrc 属性,您可以使用以下工具对其进行记录或检查:

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

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

在此处输入图像描述

于 2015-06-17T19:16:08.767 回答
29

我今天遇到了这个问题,我发现你可以监控变量:

  1. 显示控制台抽屉(您也可以按 ESC 键)

在此处输入图像描述

  1. 创建实时表达式(我创建了2,被选元素的currentSrc和innerWidth)

在此处输入图像描述

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

于 2019-05-19T23:13:05.450 回答
5

好的,去检查 chrome 中的元素。单击网络选项卡,然后刷新页面。

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

于 2015-06-17T19:13:39.547 回答
1

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

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

于 2020-05-14T03:45:58.167 回答
0

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

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

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

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

于 2018-09-18T19:28:34.057 回答