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

我一直在尝试srcset通过浏览器开发人员工具查看我的浏览器正在使用哪个图像，但是除了使用“网络”标签来查看它无法获取的图像之外，我一直在尝试。

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

（我已经在Chrome和FireFox上都尝试过此操作，在某些情况下，Chrome可能会拉下这两个图像，但是FireFox似乎只会拉下一个）

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

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

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

您将看到currentSrc：的条目以及实际的图像源。

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

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

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

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

确定，去检查镀铬的元素。单击网络选项卡，然后刷新页面。

它将显示正在加载的图像，所需时间和尺寸。

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

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

我也想知道。我想我是在不使用任何开发人员工具的情况下找到答案的。

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

问题的答案是“否”，当您调整浏览器大小时，并非所有浏览器都会在不同的srcset图像源之间自动交换。我于2018年8月检查了几种不同的Windows桌面浏览器。有些人的响应有所不同，但是除非您也单击刷新，否则大多数人不会交换图像。

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