Firefox 中新的和实验性的 CSS DevTools 指南
已发表: 2022-03-10在过去的几年里，我们 Firefox 的团队一直致力于开发新的 CSS 工具，以解决尖端技术和古老的挫败感。 我们是 Layout Tools 团队，是 Firefox 开发者工具的一个子集，我们的目标是改进现代网页设计工作流程。
在过去的十年中，网络发生了令人难以置信的发展：新的 HTML/CSS 功能、浏览器改进和设计技术。 我们的团队致力于构建与创新相匹配的工具，以便设计师和开发人员能够利用现在可能的更多效率和创造力。
在本指南中，我们将概述我们的七种新工具，其中包含设计过程中的故事以及尝试每种工具的实际步骤。
编辑设计模式
通过在设置我们的 CSS 网格布局时命名行，我们可以利用网格的一些有趣和有用的特性——当我们引入子网格时这些特性变得更加强大。 阅读相关文章 →
1. 网格检查器
这一切都始于三年前，当时我们的 CSS 布局专家和开发倡导者 Jen Simmons 与 Firefox DevTools 的成员合作构建了一个工具，可以帮助用户检查 CSS 网格布局。
作为现代网络最强大的新功能之一，CSS Grid 迅速获得了不错的浏览器采用率，但它的网站采用率仍然很低。 有一个陡峭的学习曲线，你仍然需要某些浏览器的后备。 因此，我们的部分目标是通过为开发人员提供更实际的学习方式来帮助普及 Grid。
该工具的核心是覆盖在页面上的网格轮廓，它可以帮助开发人员可视化网格如何定位其元素，以及当他们调整样式时布局如何变化。 我们添加了编号标签来识别每条网格线，一次查看最多三个网格的能力，以及覆盖的颜色自定义。 最近，我们还添加了对 subgrid 的支持，这是一个在 Firefox 中实现的全新 CSS 规范，希望很快在更多浏览器中实现。
Grid Inspector 是随后所有工具的灵感来源。 它甚至是一个新团队的灵感来源：布局工具！ 成立于 2017 年底，我们分布在四个时区，并与 Mozilla 的许多其他人合作，比如我们的渲染引擎开发人员和 MDN 的好人。
试用网格检查器
- 在 Firefox 中，访问我们的 Grid 示例站点。
- 使用Cmd + Shift + C打开检查器。
- 通过以下三种方式之一打开网格叠加：
- 布局面板：
在 Grid 部分，选中.content.grid-content旁边的复选框； - 标记视图：
切换<div class="content grid-content">旁边的“网格”徽章； - 规则视图：
点击
显示旁边的按钮display:grid;在#page-intro .grid-content内； - 使用 Grid Inspector 进行实验：
- 将紫色覆盖颜色更改为红色；
- 切换“行号”或“无限延长线”；
- 开启更多网格叠加；
- 查看在规则中禁用
grid-gap: 15px时会发生什么。
自 Grid 以来，我们一直在寻求扩展浏览器 CSS 工具的可能性。
“
2.形状路径编辑器
我们开展的下一个项目是 Shape Path Editor：我们的第一个可视化编辑工具。
CSS Shapes 允许你定义文本的形状：圆形、三角形或多面多边形。 它可以与clip-path属性一起使用，该属性允许您将元素修剪为任何相同的形状。 这两种技术共同开启了一些非常独特的受图形设计启发的布局的可能性。
然而，创建这些有时复杂的形状可能很困难。 手动键入所有坐标并使用正确的 CSS 单位很容易出错，并且与 Shapes 允许的创造性思维方式相去甚远。 因此，我们制作了一个工具，允许您通过直接单击和拖动页面上的形状来编辑代码。
这种类型的功能——可视化编辑——对我们和一般的浏览器工具来说都是新的。 这是我们如何超越检查和调试进入设计领域的一个例子。
试用形状路径编辑器
- 在 Firefox 中，访问 An Event Apart 网站上的此页面。
- 使用Cmd + Shift + C打开检查器并选择第一个圆形图像。
- 在规则中，单击
shape-outside属性旁边的图标。 - 在页面上，单击形状的点，看看当您拖动以使形状变大或变小时会发生什么。 将其更改为适合您的尺寸。
可视化编辑是我们如何超越检查和调试进入设计领域的一个例子。
“
3.字体编辑器
多年来，我们在 Firefox 中都有一个字体面板，它显示了网站中使用的所有字体的信息列表。 在继续我们在浏览器中设计的主题中，我们决定将其变成一个字体编辑器，用于微调字体的属性。
这个项目背后的驱动力是我们的目标是支持可变字体，同时 Firefox 渲染引擎团队正在增加对它的支持。 可变字体为字体设计者提供了一种在一个字体文件中沿轴提供细粒度变化的方法，例如粗细。 它还支持自定义轴，这为字体创建者和网页设计师提供了惊人的灵活性。 我们的工具会自动检测这些自定义轴，并为您提供调整和可视化它们的方法。 否则，这将需要专门的网站，如 Axis-Praxis。
此外，我们添加了一项功能，可以将鼠标悬停在字体名称上以突出显示该特定字体在页面上的使用位置。 这很有帮助，因为浏览器选择用于呈现一段文本的字体的方式可能很复杂，并且取决于一个人的计算机。 由于字体子集化，某些字符可能会意外地换成不同的字体。
试用字体编辑器
- 在 Firefox 中，访问这个可变字体演示站点。
- 使用Cmd + Shift + C打开 Inspector 并选择标题中的单词“variable”（元素的选择器是
.title__variable-web__variable）。 - 在 Inspector 的第三个窗格中，导航到 Fonts 面板：
- 将鼠标悬停在字体名称Output Sans Regular上以查看突出显示的内容；
- 尝试重量和倾斜滑块；
- 查看“实例”下拉菜单中的预设字体变化。
4. Flexbox 检查器
我们的网格、形状和可变字体工具可以共同为 Web 上的一些非常先进的图形设计提供动力，但基于浏览器支持，它们仍然有些前沿。 （它们几乎就在那里，但仍然需要后备。）我们不想只开发新功能——我们被大多数 Web 开发人员每天面临的问题所吸引。
所以我们开始了 Flexbox Inspector 的工作。 在设计方面，这是我们最雄心勃勃的项目，它为我们的团队催生了一些新的用户研究策略。
和 Grid 一样，CSS Flexbox 在你刚开始的时候有一个相当陡峭的学习曲线。 真正理解它需要时间，我们中的许多人都通过反复试验来实现我们想要的布局。 在项目开始时，我们的团队甚至不确定我们自己是否了解 Flexbox，也不知道主要挑战是什么。 因此，我们提高了理解水平，并进行了一项调查，以了解人们对 Flexbox 最需要什么。
结果对我们的计划产生了很大的影响，为复杂的可视化（如增长/收缩和最小/最大）提供了依据。 我们在整个项目中继续与社区合作，将反馈纳入不断发展的视觉原型和 Nightly 构建中。
该工具包括两个主要部分：一个与 Grid Inspector 非常相似的荧光笔，以及 Inspector 内部的一个详细的 Flexbox 工具。 该工具的核心是带有尺寸信息的弹性项目图。
在 Gecko 布局工程师的帮助下，我们能够逐步展示渲染引擎的尺寸决策，让用户全面了解 flex 项目为何以及如何最终达到特定尺寸。
注意：在“设计 Flexbox 检查器”中了解我们设计过程的完整故事。
试用 Flexbox 检查器
- 在 Firefox 中，访问 Mozilla 的 Bugzilla。
- 使用Cmd + Shift + C打开检查器并选择元素
div.inner（就在标题栏内）。 - 通过以下三种方式之一打开 Flexbox 覆盖：
- 布局面板：
在 Flex Container 部分，打开开关； - 标记视图：
切换<div class="inner">旁边的“flex”徽章； - 规则视图：
点击
display:flex旁边的按钮。 - 使用 Flex Container 面板导航到名为
nav#header-nav的 Flex 项目。 - 注意图表和尺寸表中显示的尺寸；
- 增加和减少浏览器的宽度，看看图表是如何变化的。
插曲：加倍研究
作为一个没有正式用户研究支持的小团队，我们经常采用“狗粮式设计”：根据我们自己使用这些工具的经验来发表意见。 但在 Flexbox 调查取得成功后，我们知道我们希望更好地收集数据来指导我们。 我们进行了一项新的调查，以帮助告知我们接下来的步骤。
我们众包了 Web 开发人员面临的 20 个最大挑战的列表，并要求我们的社区使用最大差异格式对它们进行排名。
当我们发现挑战的最大赢家是 CSS 布局调试时，我们对特定的 CSS 错误进行了后续调查，以发现最大的痛点。 我们通过用户访谈和用户测试来补充这些调查。
我们还要求人们对他们对浏览器开发工具的不满进行排名。 明显的首要问题是将 CSS 更改移回编辑器。 这成为我们的下一个项目。
5. 更改面板
将工作从浏览器开发工具转移到编辑器的困难是我们都刚刚习惯的那些古老的问题之一。 我们很高兴能够制作一个简单且立即可用的解决方案。
Edge 和 Chrome DevTools 首先推出了这个工具的变体。 我们专注于协助广泛的 CSS 工作流程：启动 DevTools，更改您想要的任何样式，然后通过复制完整的更改集（用于协作）或仅一个更改的规则（用于粘贴到代码中）导出您的更改。
这提高了整个工作流程的稳健性，包括我们的其他布局工具。 这只是一个开始：我们知道页面的意外刷新和导航是数据丢失的一大来源，因此为工具带来持久性的方法将是重要的下一步。
试用更改面板
- 在 Firefox 中，导航到任何网站。
- 使用Cmd + Shift + C打开检查器并选择一个元素。
- 对 CSS 进行一些更改：
- 在“规则”窗格中修改样式；
- 在“字体”窗格中调整字体。
- 在 Inspector 的右窗格中，导航到 Changes 选项卡并执行以下操作：
- 单击Copy All Changes ，然后将其粘贴到文本编辑器中以查看输出；
- 将鼠标悬停在选择器名称上并单击Copy Rule ，然后将其粘贴以查看输出。
6. 非活动 CSS
我们的非活动 CSS 功能解决了我们针对特定 CSS 错误的布局调试调查中的主要问题之一：
“为什么这个 CSS 属性没有做任何事情？”
在设计方面，这个特性非常简单——它使不影响页面的 CSS 变灰，并显示一个工具提示来解释为什么该属性没有效果。 但我们知道这可以提高效率并减少挫败感。 Sarah Lim 和她的同事构建了类似工具的研究为我们提供了支持。 在他们的研究中，他们发现新手开发人员在使用允许他们忽略不相关代码的工具时，使用 CSS 构建的速度提高了 50%。
在某种程度上，这是我们最喜欢的一种功能：一种低悬的 UX 果实，它几乎没有注册为一个功能，但改进了整个工作流程，而不需要真正被发现或学习。
Inactive CSS 在 Firefox 70 中启动，但现在可以在 Firefox 的预发布版本中使用，包括 Developer Edition、Beta 和 Nightly。
试用非活动 CSS
- 下载火狐开发者版；
- 打开 Firefox 并导航到 wikipedia.org；
- 使用Cmd + Shift + C打开 Inspector 并选择中心内容区域，称为
central-featured； - 注意灰色的
vertical-align声明； - 将鼠标悬停在信息图标上，如果您有兴趣，请单击“了解更多”。
7. 辅助功能面板
在此过程中，我们拥有由一个单独的团队开发的可访问性功能，该团队主要是一个人 - Yura Zenevich，今年和他的实习生 Maliha Islam。
他们一起将 Firefox 中的新辅助功能面板变成了强大的检查和审核工具。 除了显示可访问性树和属性之外，您现在还可以在页面上运行不同类型的检查。 到目前为止，检查包括颜色对比、文本标签和键盘焦点样式。
现在在 Nightly 中，您可以尝试利用我们即将推出的 WebRender 技术的新色盲模拟器。
试用辅助功能面板
- 下载火狐开发者版；
- 导航到meetup.com；
- 在开发人员工具中，导航到辅助功能选项卡，然后单击“打开辅助功能”按钮；
- 点击“检查问题”旁边的下拉菜单，选择“所有问题”；
- 查看各种对比度、键盘和文本标签问题，如果您有兴趣，请单击“了解更多”链接。
接下来
我们目前正在努力开发一种浏览器兼容性工具，该工具使用来自 MDN 的信息来显示选定元素的特定于浏览器的问题。 您可以在 GitHub 上关注以了解更多信息。
未来
我们致力于支持现代网络，这意味着不断变化和发展。
浏览器供应商一直在实施新规范。 围绕渐进增强、响应性和可访问性的指南和最佳实践不断发展。 我们的工具制造商也需要不断发展。
在创建 Web 过程中长期存在的问题是什么？ 哪些日常用户界面需要重新考虑？ 这些是一些让我们继续前进的问题！
导航页面的 DOM 树的更好方法是什么？ 自 Firebug 时代以来，DevTools 的这一部分基本上没有改变。
我们一直在试验后退和前进按钮等功能，这些功能可以简化最近访问的元素之间的导航。
我们正在讨论的一个更显着的变化是添加一个紧凑的 DOM 视图，该视图使用类似于 HTML 模板引擎的语法。 重点将放在最常见的用例上——导航到 CSS——而不是查看/编辑源代码。
我们也一直在考虑更好的元素选择器。 我们知道如何在页面内更高效地工作，而无需在 DevTools 中来回跳转。 我们可以使元素选择器更强大、更持久。 也许它可以选择页面上的空白并告诉您导致该空白的原因，或者它可以阐明不同元素之间的关系。
这些只是我们希望在社区的帮助下进一步探索的众多想法中的两个。
我们需要您的意见！
我们希望继续制作出色的工具，让您作为开发人员或设计师的生活更轻松。
这里有一个简单的帮助方法：下载 Firefox 开发者版并在下周尝试使用它来完成一些工作。
然后，通过我们的 1 页调查告诉我们您的想法。
我们总是有兴趣听到改进的想法，特别是任何可以让我们所有人免于经常性挫折的低垂果实。 我们在公开场合开展工作，因此您可以跟进并参与进来。我们会在 @FirefoxDevTools 为您提供最新信息。
感谢 Patrick Brosset 对本文的贡献。