2015-06-17 29 views
27

我一直试图通过浏览器开发人员工具查看我的浏览器正在使用的图像,但除了使用网络选项卡查看哪个图像它提取我不知道。是否有可能通过浏览器开发人员工具查看浏览器正在使用哪个srcset图像

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

(IVE试过这两个在Chrome &火狐,似乎镶边将拉低两个图像在某些情况下,但Firefox似乎永远只拉下一个)

我想知道的原因是我”米感兴趣,如果它拉下两个图像srcset剂量它自动交换它们之间自动调整浏览器窗口?这是不能通过检查元素,它只是给出img元素的原始html,而不是它使用的实际img srcset选项。

+0

图像之间的交换听起来有点像js。尝试检查可能有点痛苦的自定义js文件。我相信如果它根据屏幕大小交换两个图像,那么它可能是Jquery或纯Js在这一点上做的工作。该网站也可以使用媒体查询。 –

+0

你问是否在页面加载时加载两个图像? –

+0

Definatly不是JS加载图像,我创建了页面作为srcset图像测试,并且真正拥有一个纯粹的html结构,只有''中的图像标签。 @AdamBuchananSmith正确,因为当页面只加载1个图像这是唯一它可以使用 – sam

回答

41

在Chrome开发者工具检查元素,然后单击属性选项卡。你会看到一个currentSrc的条目:带有实际的图像源。

enter image description here

+1

与Firefox中的Firebug相同。 –

+2

如果你发现自己经常这样做,选择元素,并在鼠标悬停在IMG的检查,现在也应该显示在工具提示中currentSrc属性DevTools控制台 –

+0

键入'$ 0.currentSrc'。 – Splatbang

3

好吧,去检查铬中的元素。点击网络标签,然后刷新页面。

它会显示正在加载的图像,它们所花费的时间和大小。

+0

@sam这是你在找什么? –

+0

这不会回答这个问题,因为OP在问题中说他已经试过了。 – mik01aj

相关问题