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

Question

我一直试图srcset通过浏览器开发人员工具查看我的浏览器使用的图像,但除了使用网络选项卡查看它取出的图像我无法分辨.

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

(我已经在Chrome和FireFox上尝试了这一点,看起来Chrome在某些情况下会拉下这两个图像,但FireFox似乎只能拉下一个)

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

Answer 1

在chrome developer Tools中检查元素,然后单击属性选项卡.您将看到currentSrc的条目:包含实际的图像源.

Answer 2

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

1. 显示控制台抽屉（你也可以按 ESC 来完成）

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

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

Answer 3

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

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