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.
14 Likes
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?
5 Likes
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.
3 Likes
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.
3 Likes
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.
5 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.
2 Likes
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.
7 Likes
Yes indeed. Working from the Chrome implementation would be a good idea.
1 Like
hello everyone
I was looking for contributing to a gsoc 2020 proposal related to responsive design mode of mozilla where goal of the project is to make a toggleable media query visualiser
I believe I can get this done
But the problem is that I do not know how to get this done in the Mozilla RDM codebase
Can anyone here please help me out with the same
If anyone can send me the solution to my email at:
ayushshanker23@gmail.com
It would be of great help
I second that this would be useful. The visual representation of media queries and clicking to toggle between them.
2 Likes
Something that’s not directly connected to showing media queries, but would be useful when working with them, is to show viewport dimensions when dragging DevTools section to be smaller/bigger (like in Chrome).
1 Like
I think replicating Chrome’s implementation would be the right start too.
I made some mocks taking in the ideas from this discussion that I think would be a great help to boost workflow.
2 Likes
For practically anyone who writes more css than JS, this feature is very important.
I also like the implementation of the styles in the filter to see the mediaquery but this practicality that exists in chrome helps a lot in speed for css development
2 Likes
Hi, I am new here and have no idea how to do this but I would really love to upvote this because this feature would be super useful to me as well =)
1 Like
Is there anything more we can do to help with this?
2 Likes
Hi Mark,
Is there any way we could visualize custom breakpoints in the developer console and/or responsive view ?
I would like to set a list of breakoints and visualize at any point which are active, just like the bootstrap-responsiveHelper Firefox addon but with the ability to use sets of breakpoints (custom or popular presets: Bootstrap, Tailwind…).
This would be really helpful ! Thank you very much
Yes, please! This is the only important feature missing in firefox devtool. Hope it will be implemented soon!
Having media queries shown, given the ability to manipulate it, is very helpful. I am just getting to learn web development, after 6 months now, I am giving Firefox a try. media queries is the first thing I missed. 
hi, i’m new here, really want to always use firefox dev edition for frontend dev and this feature request drives me to want to contribute too. any direction as to where can i get more info about its progress? thank you!
@maurusrv Hi! If you want to contribute, I’d say you should first open an issue at https://github.com/firefox-devtools/ux/ to discuss how the actual UI for this feature should look like.
Reading through the comments here and looking at the Chrome DevTools implementation, the requirements for a feature like this seem to be:
- Visualization of media query breakpoints
- Display spanning areas between breakpoints
- Highlight currently matching media queries
- Provide hints for displayed media queries
- Allow resizing to media query breakpoints
- Allow resizing to edge cases (i.e. media query breakpoint +/- 1px)
- Link breakpoints to media queries in Style Editor
- Synchronize this feature with the media query sidebar within the Style Editor
If anyone sees something I am missing, please let me know.
Once the UI is clarified, implementation will happen in https://bugzil.la/1031585.
Sebastian
PS: Some people mentioned an option for switching between different pre-defined or custom viewport sizes. This feature is related but not the same as the media query inspection feature. And it is already available through the drop down list at the top right of the RDM.
2 Likes