Search code examples
firefoxmedia-queriesfirebug

How to show CSS in current @media query in Firefox?

In the Chrome DevTools I can inspect an element to see its CSS and the related media query:

Chrome DevTools showing the media query related to a CSS rule

As you can see in the Styles panel, Chrome intelligently shows my current media with min-width: 1200px. However, Chrome is currently sucking lots of my computer's memory and therefore I have to switch back to Firefox, i.e. Firebug).

However, Firebug misses the media query part:

Firebug missing the media query for the CSS rule

Is there any possibility/extension in Firefox that can show the CSS rules along with their current media queries?

Solution

  • Firebug doesn't have that feature implemented. It was requested in issue 5329, though Firebug is discontinued now, so it won't be implemented anymore.

    Though the Rules side panel of the Firefox DevTools does show @media queries. *Rules* side panel in Firefox DevTools displaying @media query

    To get them displayed uncheck the option Show original sources within the options panel. Unchecked *Show original sources* option within Firefox DevTools

    As [upcoming versions of Firebug will integrate into the DevTools][4], they will inherit this feature.