Add dev tools to help debug picture srcset and sizes

[stephaniehobson]

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>

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.