It would be useful to be able to display media queries in a similar way to Chrome. It really speeds up development, well it does for me, to be able to see any quickly toggle between them.
1 Like
I’d love for us to add this too! Thanks for starting the discussion.
We actually have had this on file for years here : https://bugzilla.mozilla.org/show_bug.cgi?id=1031585 (and here too: https://bugzilla.mozilla.org/show_bug.cgi?id=1602648)
But knowing how laser focused we need to be (being a small team), it has never scored high enough on the importance scale that we got to dedicate time to do it.
In order to help move it forward, it would be awesome to start a discussion here with people around the following topics:
- Why do you need this tool / what problems are you trying to solve with this tool?
- Are there any problems with how Chrome DevTools does it?
1 Like
If you use the style editor, there’s this feature that I added 3 years ago:
But yeah, it would be quite nice if this was visualised directly in the responsive design view.
I like that it visualizes the breakpoints defined in CSS, but personally I have no use for the resize-on-click feature. Usually breakpoints are defined in-between common screen widths, so if a breakpoint is at 900px I probably want to test 768, 800px and 1024px instead, not a 900px width.
I would be more interested of having a visual “quick jump” for predefined widths (or viewport width+height) that lets me cycle between predefined sizes, regardless of what the site’s CSS defined.
I wonder if others feel differently.
1 Like
Jumping to the breakpoint size would be useful to me – but mostly by way of checking the sizes directly before and after the break. I always like to check the edge cases. I don’t rely on common sizes for my MQs, but I will sometimes check them from the existing “responsive” dropdown list.
I like that chrome provides a visualization of the sizes, so I can see the breakpoints as I resize my responsive frame – but I wish that interacted the queries themselves. Tying that to the existing media sidebar, so Tim’s example would work in either direction, would be pretty handy.
2 Likes
Being more a js than css developer I must admit that I never really knew what these lines mean in Chrome. I thought some kind of viewport, and I think when clicking on them and then having a viewport of say 900px was not really helpful. So I did not really use it.
But reading this now I see a point of having the declared breakpoints visible. This could be really handy. I often look up the declared breakpoints from my variables.scss.
Looks like I never really understood what the feature does in Chrome 
But if done right (good description, maybe onboarding), maybe just having meaning title mouseover description, then I see the point.
I would like to:
- See visually the breakpoints defined for a page / site (so I do not have to search in the (foreign) source code). Definitely print out the values on mouseover or some other way (maybe inline on the line itself)
- Still 90% test rather on real device viewports like Florens said
- Sometimes, maybe 5% use case, test “unreal” edge case viewports like Miriam points out.
Thank you all for taking the time to share your experience and workflows.
What I’m hearing so far is the following:
- Visualizing the breakpoints is a must have.
- They should, however, be easy to understand at a glance.
- Be clickable (to resize the viewport), as this is useful to some.
- Perhaps link to the CSS in DevTools so people see where they’re coming from.
- Being able to jump through common screen sizes is useful to some. Making sure our Responsive mode does have them pre-defined (or lets people define them) is good.
So, all in all, what Chrome DevTools does is good. It allows most of those things.
Sounds like replicating what’s in Chrome and improving from there would be the right thing to do for Firefox.
2 Likes
Yes indeed. Working from the Chrome implementation would be a good idea.