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 fet

Answer 1

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.

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.

Answer 3

Came upon this with the same question. My simple solution was to just right click image and 'Open Image on New Tab / Window'.

Fast and easy solution and you can see what image is loaded at different break points.

Answer 4

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 5

I was wondering that too. I think I figured that out without using any developer tools.

To check I simply did a right-click and save-as to see what file name was filled in (and if it matched my high-res image or the low-res one.)

The answer to part of your question was No, not all browsers automatically swap between different srcset image sources when your resize the browser. I checked in August, 2018 with several different Windows desktop browsers. Some responded differently, but most did not swap the image unless you also hit refresh after.

I did not directly investigate which images were actually being downloaded or if more than one were at a time. I only tested which image was actually displayed and if that image changed on browser resize. I made assumptions based on the results, which may or may not be 100% true, but seemed like a quick and dirty good start.