问题
In the Chrome DevTools I can inspect an element to see its CSS and the related media query:
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:
Is there any possibility/extension in Firefox that can show the CSS rules along with their current media queries?
回答1:
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.
To get them displayed uncheck the option Show original sources within the options panel.
As [upcoming versions of Firebug will integrate into the DevTools][4], they will inherit this feature.
回答2:
Update 2019
To show current media queries open settings (F1 from dev tools) and check "Show Browser Styles" under the Inspector section.
The media query will be shown just to the right of the file name and line number.
来源：https://stackoverflow.com/questions/28870059/how-to-show-css-in-current-media-query-in-firefox