Is it possible to see which srcset image a browser is using with browser developer tools
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.
I had problems with this today and I found that you can monitor the variable:
- Show the console drawer (You can do it pressing ESC too)
- 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.
OK, go to inspect element in chrome. Click on the network tab, then refresh the page.
It will show you the images that are being loaded, the time they take and the size.