如何在Firefox当前的@media查询中显示CSS?

cha*_* ly 7 firefox firebug media-queries

在Chrome DevTools中,我可以检查元素以查看其CSS和相关的媒体查询:

Chrome DevTools显示与CSS规则相关的媒体查询

如您在“ 样式”面板中所见,Chrome通过巧妙地显示了我当前的媒体min-width: 1200px。但是,Chrome当前占用了我计算机的大量内存,因此我必须切换回Firefox,即Firebug。

但是,Firebug错过了媒体查询部分:

Firebug缺少针对CSS规则的媒体查询

Firefox中是否可以显示CSS规则及其当前媒体查询的可能性/扩展性?

Sta*_*low 5

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.

在此处输入图片说明


Seb*_*ner 3

Firebug 没有实现该功能。在第 5329 期中提出要求中请求的,尽管 Firebug 现在已停止使用,因此不会再实现。

尽管Firefox DevTools 的 规则侧面板确实显示了 @media 查询。Firefox DevTools 中的*规则*侧面板显示 @media 查询

要显示它们,请取消选中选项面板中的 “显示原始来源”选项。Firefox DevTools 中未选中“显示原始来源”选项

由于 [Firebug 的后续版本将集成到 DevTools][4],它们将继承此功能。