1938306 - Add dev tools to help debug picture srcset and sizes

Status: NEW

(DevTools :: Inspector, enhancement)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Originally reported on Connect: https://connect.mozilla.org/t5/ideas/add-dev-tools-to-help-debug-picture-srcset-and-sizes/idi-p/79924

I'm trying to ensure a complicated picture element is behaving the way I want and would love some tools to help me out.

Some things that would help:

a way to know which source is currently displaying
a way to test that all the sources are valid images
a way to know which media/sizes pair is the current match

<picture>
  <source 
    media="(max-width: 767px)" 
    srcset="
      /media/img/news/projects-mobile-375.jpg 375w,
      /media/img/news/projects-mobile-720.jpg 720w,
      /media/img/news/projects-mobile-976.jpg 976w,
      /media/img/news/projects-mobile-1232.jpg 1232w,
      /media/img/news/projects-mobile-1450.jpg 1450w" 
    sizes="calc(100vw - 16px)">
  <source 
    srcset="
      /media/img/news/projects-desktop-1032.jpg 1032w,
      /media/img/news/projects-desktop-1953.jpg 1953w,
      /media/img/news/projects-desktop-2056.jpg 2056w" 
    sizes="
      (min-width: 768px) calc(83wv - 24px),
      (min-width: 1312px) calc(75vw - 32px),
      (min-width: 1440px) 1028px,
      calc(75vw - 32px)">
  <img loading="lazy" src="/media/img/news/projects-mobile-1450.jpg" alt="">
</picture>

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Note that we had a similar bug opened not long ago: Bug 1921594 , there might be aspect of this which are already covered by other bugs