没有一个网络设计师在世，他不希望他们重新找回CSS来寻找似乎无法发现的错误。
使用Firefox DevTools的开发人员团队可能无法恢复丢失的时间，但是他们为我们带来了新的工具，可以帮助我们尽快解决未来的故障排除。
在本文中，您将了解如何使用Firefox Nightly DevTools（或“开发人员工具”，具体取决于您喜欢使用的名称）现在提供的两个新功能，以帮助您找出CSS的问题所在，最后，在这篇文章中，您还将看到最近增加的功能的好处。
厦门网站建设
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中的最新情况。
