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

Question

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 1

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.

Answer 2

I had problems with this today and I found that you can monitor the variable:

1. Show the console drawer (You can do it pressing ESC too)

2. Create live expression (I created 2, the currentSrc of the selected element and the innerWidth)

The live expression watches the current srcset of the img tag selected. It works with the img inside the picture tag too.