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

问题描述

我一直在尝试通过浏览器开发人员工具查看我的浏览器正在使用哪个 srcset 图像，但除了使用网络选项卡查看它获取的图像之外，我无法分辨.

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.

使用网络选项卡通常没问题，但有时我注意到它会获取 2 个不同尺寸的图像版本，如果一个断点在 600 处，另一个在 900 处，并且浏览器当前处于 750 像素，则会发生这种情况宽的.

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.

(我在 Chrome 和 FireFox 上都试过这个，似乎在某些情况下 chrome 会下拉两个图像，但 FireFox 似乎只下拉一个)

(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)

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

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.

推荐答案

图像有一个属性 currentSrc，你可以用几个工具记录它或检查它:

The image has a property currentSrc, you can log it or inspect it with several tools:

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

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

You will see an entry for currentSrc: with the actual image source.

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