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

Question

我一直试图通过浏览器开发者工具查看我的浏览器使用的srcset图像，但除了使用网络标签查看它所提取的图像之外我无法分辨。

使用网络标签通常会很好，但有时我注意到它会获取不同大小的2个图像版本，如果一个断点位于600而另一个断点位于900且浏览器当前处于此状态，则会发生这种情况宽度为750px。

（香港专业教育学院在Chrome和FireFox上都尝试了这一点，看起来Chrome在某些情况下会拉下这两个图像，但FireFox似乎只能拉下一个）

我想知道的原因是我感兴趣的是它是否会拉下两个图像srcset剂量，它会在我缩放浏览器窗口时自动在它们之间交换？通过检查元素，它只能提供img元素的原始html，而不是它使用的实际img srcset选项。

Answer 1

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

Answer 2

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

它会显示正在加载的图像，拍摄时间和尺寸。

Answer 3

请问同样的问题。我的简单解决方案是只右键单击图像，然后单击“在新选项卡/窗口上打开图像”。

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

Answer 4

I was wondering that too. I think I figured that out without using any developer tools.

To check I simply did a right-click and save-as to see what file name was filled in (and if it matched my high-res image or the low-res one.)

The answer to part of your question was No, not all browsers automatically swap between different srcset image sources when your resize the browser. I checked in August, 2018 with several different Windows desktop browsers. Some responded differently, but most did not swap the image unless you also hit refresh after.

I did not directly investigate which images were actually being downloaded or if more than one were at a time. I only tested which image was actually displayed and if that image changed on browser resize. I made assumptions based on the results, which may or may not be 100% true, but seemed like a quick and dirty good start.

Answer 5

今天我对此有疑问，发现可以监视变量：

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

   

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

   

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