火狐安装devtools_找出CSS不起作用的原因！ Firefox DevTools的新功能

火狐安装devtools

没有一个网络设计师在世，他不希望他们重新找回CSS来寻找似乎无法发现的错误。

使用Firefox DevTools的开发人员团队可能无法恢复丢失的时间，但是他们为我们带来了新工具，可以帮助我们尽快解决未来的故障排除。

在本文中，您将看到如何使用Firefox Nightly DevTools（或“开发人员工具”，具体取决于您喜欢的名称）现在提供的两个新功能，以帮助您找出CSS的问题所在，并在最后。在这篇文章中，您还将看到最近增加的功能的好处。

1.了解为何无效CSS不起作用

您有多少次在设计中添加了一些CSS，检查了预览，发现更改完全没有效果？ 如果您和我们其他人一样，答案几乎肯定是：很多次。

好吧，Firefox DevTools中的新“无效CSS”消息将帮助您一目了然地查看代码中缺少的内容。

这是如何使用此功能的示例。

假设您在页面上添加了一个<span>元素以容纳SVG图标，并且您希望将其大小限制为50px x 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规则打印预览

Firefox现在可以根据其媒体查询，为您提供网站外观的实时预览。 新增内容可能与发现CSS中的问题没有直接关系，但是也许我们仍可以广泛地将此视为故障排除功能，因为我们当中有多少人积极考虑网站印刷形式的设计？ 也许经常完全缺少可能有用CSS本身就是一个问题。

轻松预览打印版本的能力可能是帮助您解决该问题的好方法-如果您认为这样的解决方案对您的听众有价值。 在正常模式下查看网站时，请打开DevTools，然后在“ 检查器”选项卡中，单击样式面板右上方的类似于页面的小按钮：

然后，您将预览通过@media print {...}规则生成的所有样式：

如果您希望您的网站看起来很漂亮，此功能将有助于实现这一目标。

结语

最后一点，我们在CSS Subgrid：功能，语法和它将解决的问题 （以及相关的DevTools功能）中讨论的对CSS子网格的支持（以及相关的DevTools功能），即将在Firefox 69上发布。

Firefox DevTools非常棒，并且在其他地方都找不到其他功能，因此请帮自己一个忙，检查一下它们所提供的功能！

翻译自: https://webdesign.tutsplus.com/articles/find-out-why-your-css-isnt-working--cms-33472

火狐安装devtools