Is it possible to see which srcset image a browser is using with browser developer tools

html css responsive-design developer-tools srcset
sam picture sam · Jun 17, 2015 · Viewed 20k times · Source

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.

Answer

simsom picture simsom · Jun 17, 2015

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

  • In chrome developer tools inspect the element, then click the properties tab.
  • In Firefox developer tools inspect the element, right click and select DOM from the context menu.

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

enter image description here

Related questions

Maintain the aspect ratio of a div with CSS

I want to create a div that can change its width/height as the window's width changes. Are there any CSS3 rules that would allow the height to change according to the width, while maintaining its aspect ratio? I know …

Read More
Hiding elements in responsive layout?

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page? For example, I have a along with nav-pills floated right. On a small screen this …

Read More
Height equal to dynamic width (CSS fluid layout)

Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | | | | | | | | +----------+ CSS div { width: 80%; height: same-as-width }

Read More