Web Inspector 样式侧边栏改进

在最近随 macOS High Sierra 上的 Safari 11.1 一同发布的 Web Inspector 中，元素选项卡侧边栏面板和样式编辑器受到了 Web Inspector 团队的广泛关注。我们重写了样式编辑器，以提供更熟悉网页开发者的编辑体验，并重新排列了侧边栏面板，以改进对最常用工具的访问。此次设计更新带来了新的行为和微调，以增强网页开发者访问和理解他们正在检查的元素的能力。

标签页布局

在元素选项卡中，样式（Styles）和计算（Computed）是最常用的面板。我们将其设为顶级标签页，因此只需单击一下即可在它们之间切换。

样式面板

重新设计的样式面板在相同大小下现在可以显示更多数据

• 不再为样式属性生成选择器
• 不再显示默认的“媒体：all”标题
• 图标已被移除以节省水平空间

语法高亮

属性值现在显示为黑色，以便更容易与属性名称区分。字符串仍为红色，但链接现在为蓝色。

我们重新添加了花括号，以便复制 CSS 时能生成有效的 CSS。花括号、冒号和分号为浅灰色，这样它们就不会分散对内容的注意力。

样式编辑器

我们从头开始重写了样式编辑器。这是自 2013 年以来对样式编辑器进行的首次重大改进。我们从自由形式的文本编辑器改为了基于单元格的样式编辑。

CSS 属性名称和值现在是单独的可编辑字段。按下 Tab (⇥) 或 Return 键可导航到下一个可编辑字段。按下 Shift-Tab (⇧⇥) 键可导航到上一个可编辑字段。

此外，当焦点在属性名称上时，输入冒号（“:”）会将焦点移至相应的属性值。在属性值末尾输入分号（“;”）会导航到下一个属性。

要添加新属性，您可以单击现有属性之前或之后的空白区域。当焦点在最后一个属性值上时，按下 Tab (⇥) 或 Return 键也会添加新属性。

要移除属性，您可以移除属性名称或属性值。

当焦点在值字段上时，补全建议会立即显示。使用上下箭头键选择时，补全值会立即应用。

在编辑属性字段时，上下箭头键现在可以递增和递减值。您可以通过按住修饰键来更改间隔

• Option (⌥)：0.1
• Shift (⇧)：10
• Command (⌘)：100

旧版设置

旧版样式编辑器仍在 Web Inspector 设置中可用，但已不再维护。

视觉样式面板（Visual Styles Panel）从未获得足够的关注以默认保留在元素选项卡中。它已不再维护。与旧版样式编辑器（Legacy Style Editor）一样，视觉样式面板仍可以在实验性设置中启用。

贡献

请在 webkit.org/new-inspector-bug 上报告有关新样式编辑器的错误和功能请求。如果您有兴趣贡献或有任何疑问，请访问 #webkit-inspector IRC 频道。

Web Inspector 主要用 HTML、JavaScript 和 CSS 编写，这意味着网页开发者已经具备了介入并贡献错误修复、改进或新功能所需的技能。