是否可以查看浏览器正在使用浏览器开发人员工具使用的srcset图片 [英] Is it possible to see which srcset image a browser is using with browser developer tools

问题描述

我一直在尝试查看我的浏览器通过浏览器开发者工具使用的 srcset 图像，但除了使用网络选项卡来查看哪个图像不能告诉。

使用网络选项卡通常会很好，但有时我注意到它会获取不同大小的2个图像版本，如果一个断点是在600和另一个在900和浏览器当前在750px宽。

（Ive在Chrome和FireFox上都尝试过这种方法，但在某些情况下，Chrome会下拉这两个图片，但FireFox似乎只能下拉一个） / p>

我想知道的原因是我有兴趣，如果它拉下两个图像srcset剂量，它们之间自动交换，因为我缩放浏览器窗口？这不能通过检查元素，它只是给出原始html的 img 元素，而不是实际 img srcset option其使用。

解决方案

在Chrome开发人员工具中检查元素，然后点击属性标签。您将看到一个条目currentSrc：与实际图像源。

I've been trying to see which srcset image my browser is using via the browsers developer tools, but apart from using the network tab to see which image it fetches i can't tell.

Using the network tab would usually be fine, but sometimes I've noticed that it will fetch 2 image versions at different sizes, this would happen if one break point is at 600 and another at 900 and the browser was currently at 750px wide.

(Ive tried this both on Chrome & FireFox, and it seems chrome will pull down both images in certain cases, but FireFox seems to only ever pull down one)

The reason I want to know is I'm interested if it pulls down two image srcset dose it swap between them automatically as i scale the browser window ? This is can't tell as by inspecting the element it just gives the raw html of the img element, not the actual img srcset option its using.

解决方案

In chrome developer tools inspect the element, then click the properties tab. You will see an entry for currentSrc: with the actual image source.

这篇关于是否可以查看浏览器正在使用浏览器开发人员工具使用的srcset图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！