没有一个网络设计师在世，他不希望他们重新找回css来寻找似乎无法发现的错误。
使用firefox devtools的开发人员团队可能无法恢复丢失的时间，但是他们为我们带来了新的工具，可以帮助我们尽快解决未来的故障排除。
在本文中，您将了解如何使用firefox nightly?devtools（或“开发人员工具”，具体取决于您喜欢使用的名称）现在提供的两个新功能，以帮助您找出css的问题所在，最后，在这篇文章中，您还将看到最近增加的功能的好处。
下载firefox每晚1.了解为何无效css不起作用您有多少次在设计中添加了css，检查了预览，发现更改完全没有效果？如果您和我们其他人一样，答案几乎肯定是：很多次。
好的，firefox devtools中的新“无效css”消息将帮助您一目了然地查看代码中缺少的内容。
这是如何使用此功能的示例。
假设您已<span>在页面中添加了一个元素来保存svg图标，并且您希望将其大小限制为50pxby?50px。您已经在css中添加了height和width属性，但是它们似乎根本没有控制元素的大小。您在“?样式”面板上的firefox devtools检查器选项卡中查看，发现这两个属性均显示为灰色，并在其行尾带有一个小?图标。
您将鼠标悬停在此图标上，firefox会显示一条消息，告诉您css无法正常工作的原因：
该消息告诉您该元素的width和height属性处于非活动状态的原因是因为其display类型设置为inline。
firefox建议切换到display:inline-block;。因此，您按照提供的建议进行操作，问题消失了，现在50px按预期大小调整为正方形的图标：
目前，不活动的css标记系统仍是一个非常新的系统，并且还没有完整的信息消息列表，该列表在移至firefox时将具有。firefox devtools团队告诉我们：
“我们也将很快添加更多的警告集合，以警告用户更多棘手的css案例。”
就是说，现在的功能已经很有用，可以使用了。
2.列出与css警告相关的所有元素您可能会认为devtools控制台主要用于javascript，但是您也可以使用firefox控制台查看有关css问题的警告。为了确保您看到这些警告，请转到devtools中的“?控制台”选项卡，然后单击下图中突出显示的css小按钮：
启用此开关后，如果css出现问题，您可能会在此处的控制台中看到警告。
例如，假设您组合了一种快速样式以创建一堆盒子，但是您不知道您的键盘在弹奏，并且在您为padding值指定单位时闪烁了第二个权利。
您会看到devtools控制台向您显示一条消息，提示padding无法解析该值，并且声明已被删除。在早期版本的firefox中，您会看到此消息和样式表的行引用，但是现在它还可以显示受此删除的声明影响的每个元素的列表。
要查看此列表，请展开警告消息及其嵌套的nodelist项。现在，您可以看到每个元素的html，并且将鼠标悬停在行尾的类似于目标的小图标上时，相关元素会在页面上突出显示：
单击其中一个图标，它会将您直接带到“?检查器”面板中的相关位置，同时显示相关的html和css：
在这里，您看到问题属性为灰色并划掉，然后在值上发现缺失的单元并立即解决问题。
奖励：从@media rules打印预览firefox现在可以根据您的媒体查询，为您提供网站外观的实时预览。新增内容可能与发现css中的问题没有直接关系，但是也许我们仍可以广泛地将此视为故障排除功能，因为我们当中有多少人积极考虑网站印刷形式的设计？也许经常完全缺少可能有用的css本身就是一个问题。
轻松预览打印版本的功能可能是帮助您解决该问题的好方法-如果您认为这样的解决方案对您的听众有价值。在正常模式下查看网站时，请打开devtools，然后在“?检查器”选项卡中，单击样式面板右上方的类似于页面的小按钮：
然后，您将预览从@media print {...}规则生成的任何样式：
如果您希望您的网站看起来很漂亮，此功能将有助于您实现这一目标。
最后一点，我们在css subgrid：功能，语法和将解决的问题（以及相关的devtools功能）一文中讨论的对css子网格的支持，以及即将在firefox 69上实现的功能。
firefox devtools非常棒，并且在其他地方都找不到其他功能，因此请帮自己一个忙，看看它们提供了什么！
在firefox nightly blog上了解devtools中的最新情况。