Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 812
channa ly Avatar asked Mar 05 '15 04:03

channa ly


2 Answers

Update 2019

To show current media queries open settings (F1 from dev tools) and check "Show Browser Styles" under the Inspector section.

enter image description here

The media query will be shown just to the right of the file name and line number.

enter image description here

like image 56
Stack Underflow Avatar answered Oct 18 '22 19:10

Stack Underflow


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.

like image 44
Sebastian Zartner Avatar answered Oct 18 '22 20:10

Sebastian Zartner