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

我一直试图通过浏览器开发工具查看我的浏览器使用的是哪个

srcset

图像，但除了使用网络选项卡查看它获取的图像外，我无法分辨

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

（我在Chrome和FireFox上都试过，在某些情况下，Chrome似乎会同时删除两个图像，但FireFox似乎只删除一个）

---

我想知道的原因是，我感兴趣的是它是否会拉下两个图像集？当我缩放浏览器窗口时，它是否会在它们之间自动交换？这不能通过检查元素来判断，因为它只给出

img

元素的原始html，而不是实际使用的

img srcset

选项

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

---

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

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

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

您将看到带有实际图像源的currentSrc:条目

---

我也在想。我想我没有使用任何开发工具就明白了这一点

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

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

---

我没有直接调查到底下载了哪些图片，或者一次下载的图片是否不止一个。我只测试了实际显示的图像，以及该图像是否在浏览器上改变大小。我根据结果做出了假设，这些假设可能是100%真实，也可能不是100%真实，但似乎是一个快速而糟糕的良好开端。

我今天在这方面遇到了问题，我发现您可以监控变量：

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

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

---

live表达式监视所选img标记的当前集。它也与图片标签内的img一起工作。

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

---

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

在图像之间切换听起来有点像js。尝试检查自定义js文件，这可能有点麻烦。我相信，如果它是根据屏幕大小交换两个图像，那么此时可能是Jquery或纯Js在做这项工作。该网站也可以使用媒体查询。您是否在询问页面加载时是否同时加载了两个图像？确切地说，不是JS加载图像，我将页面创建为srcset图像测试，并且在

中有一个简单的html结构，只有一个图像标记@AdamBuchanTransmisth是正确的，因为当页面仅加载1个图像时，这是它唯一能加载的图像use@sam这就是你要找的吗？这不能回答问题，因为OP在问题中说他已经试过了。如果你发现自己经常这样做，选择元素并在DevTools控制台中键入

$0.currentSrc

“inspector”中的img上方现在也应该在工具提示中显示currentSrc属性。@Splatbang是的，但当url非常长时，它会裁剪它，因此您可能看不到您想要的内容。.对于长url，也很方便，直接复制到剪贴板（在chrome中）：

copy（$0.currentSrc）

currentSrc是一个标准属性，您可以使用多种浏览器检查它，包括firefoxIMO。这是今天（2020年）的最佳答案。我对接受的答案有一些问题，Chrome没有正确填充或更新属性选项卡。这绕过了这个问题，将结果放在前面，然后。。犯错误我猜是底部pIt知道这一点很有用（至少在我的测试中），如果浏览器已经下载/显示了最大的图像，那么当您缩小屏幕时，它不会从您的srcset交换较小的图像。要准确测试，请从视口的最小值开始，然后增加其大小，而不是相反。