用于css故障排除的工具

Question

我使用firebug和web开发人员firefox插件进行大多数css调试。两者都是很好的工具。但是，当涉及大量样式表和自定义规则时，我无法使用任何一种工具来查看最终属性值派生的规则应用程序序列。

让我举一个例子来说明我在这些工具中遇到的困难。在我的网站的一个页面上，特定部分的字体大小比其他部分大。 Firebug向我展示了应用于元素的所有css规则。它还向我展示了被丢弃的规则;这些都是通过删除显示的。这很棒！但是为了找出负责更大字体大小的确切类规则，我必须滚动浏览所有样式，直到我能够找到尚未通过的字体大小规则。似乎没有css面板的“搜索”功能（与html面板不同）。

你如何处理这些情况？那里有更好的工具吗？或者，有没有办法在firebug css面板中搜索“尚未被击穿的字体大小”？对于一些人来说这可能不是一个大问题，但在我的情况下，如果我能够解决这个问题，我相信我可以节省大量时间。任何帮助将受到高度赞赏。

谢谢， Tabrez

Answer 1

如果您愿意更换浏览器，Google Chrome的Inspect Element功能（右键单击＆gt; inspect元素）将告诉您所有匹配的样式（覆盖的已覆盖的样式）以及计算的样式。它为您提供了css文件中该行的链接。

Answer 2

在Firebug中，查看firebug窗口中“样式”选项卡下的下拉选项。

可以选择“仅显示应用的样式”。