Web Inspector 样式侧边栏改进

对于许多用户来说，网页最重要的部分是它的外观。如果一个网站无法吸引我们的感官，我们就会迅速离开。这就是为什么设计在制作和调试网站时如此关键的原因。这也是为什么我们努力改进界面，通过周到的增强功能帮助开发者在使用 Web Inspector 设计网页时更高效、更有效地工作。

找到合适的样式

由于 CSS 的层叠特性，通常很难在样式侧边栏中找到样式。您始终可以查看“计算”面板来查看应用于所选元素的样式列表，但这无法帮助您找到该样式的来源。为了解决这个问题，我们添加了“跳转”箭头，它们将出现在计算样式的旁边。点击后，您将切换到“规则”面板，并且相应的样式会被高亮显示。

如果想查看特定属性或值的声明列表，我们在样式侧边栏底部添加了一个过滤栏，它可以隐藏任何不匹配过滤词的样式。例如，您可以过滤 background-color，这样就只剩下包含 background-color 属性的部分可见。

此外，作为一项额外的好处，过滤器还可以在“规则”面板中搜索选择器，因此您可以按特定选择器（例如“#title h1”）搜索指定的样式。

智能编辑

CSS 属性种类繁多，超过 200 种，还不包括带前缀的属性，开发者在设计网站时必须考虑到这些，这往往令人不知所措。我是否记得为这个属性添加所有前缀？这个值是否适用于这个属性？这个属性是否存在？这些都是编辑 CSS 时常见的疑问。为了帮助解答这些问题，Web Inspector 现在会在属性出现问题时显示警告图标，无论问题是缺少前缀还是属性根本不存在。只需将鼠标悬停在图标上，即可准确了解属性出了什么问题，并获得简要的修复说明。

在某些情况下，修复非常简单，您可以点击警告图标，Web Inspector 将自动修复问题，可能是替换或删除有问题的文本。

样式之间导航

样式侧边栏中的 Tab 键功能经过重新设计，提供了一种更轻松的方式来切换当前选中的文本，无论是属性名还是属性值。此外，Shift+Tab 键会执行完全相同的选择更改，但方向相反，选中前一个匹配项。选中最后一个文本部分后，再次按 Tab 键将高亮显示下一个规则的选择器，并在下一个规则中重新开始整个过程。这个过程会从最后一个样式循环到第一个，允许用户完全通过 Tab 键遍历样式侧边栏中每个可编辑的属性名和属性值。在使用 Tab 键时，任何缺失的分号也会自动为您添加。

匹配预览

即使您确切知道要将哪些样式应用于特定元素，找到用于该样式的正确选择器也可能具有挑战性。以前，除了实际创建一个测试样式以便您可以直观地确认更改之外，没有办法判断选择器是否会应用于元素。现在，只需将鼠标悬停在选择器上，页面上所有匹配的节点都会被高亮显示。

此外，编辑选择器时也会高亮显示选择器区域中当前文本匹配的所有节点。通过这种方式，您可以预览哪些节点将应用样式，而无需实际提交选择器。

反馈

您怎么看？这些增强功能已在WebKit 每夜构建版本中提供。是否有您希望添加到样式侧边栏的功能？请告诉我们！欢迎通过 Twitter (@dcrousso 或 @jonathandavis) 或提交错误报告的方式提供反馈。