全新的 Flexbox 检查器 由 Firefox DevTools 创建，帮助开发人员了解 Flexbox 元素的大小、位置和嵌套。您现在可以在 Firefox DevEdition 中试用它，或在 1 月 29 日的 Firefox 65 正式发布时加入我们。

这个工具的 UX 挑战对我们团队来说既令人沮丧又充满乐趣。它建立在 CSS Grid 检查器 的基本概念之上，我们力求扩展设计工具的可能性。我很高兴分享设计背后的 UX 模式和流程，这些模式和流程推动了我们的设计发展。

研究和构思

CSS Flexbox 是一种越来越受欢迎的布局模型，有助于构建强大的动态页面布局。然而，它有一个很大的学习曲线——在这个项目开始时，我们的团队不确定我们是否理解 Flexbox 本身，也不知道主要挑战是什么。因此，我们收集数据以帮助我们设计基本功能集。

我们最早对以设计为中心的工具的研究包括与开发人员/设计师朋友和社区成员的访谈，他们告诉我们他们希望更好地理解 Flexbox。

我们还进行了一项调查，对人们最想看到的 Flexbox 功能进行排名。最小/最大宽度和高度约束获得了 最高分数。收缩/增长功能的排名也高于预期。这对我们的计划产生了很大影响，因为我们最初假设这些更复杂的功能可以等到 2.0 版本。然而，很明显，这些是开发人员最需要的细节。

大多数早期设计工作都是以视频聊天、文字聊天和电子邮件的形式进行的头脑风暴会议。我们还咨询了专家：Daniel Holbert，我们的 Gecko 引擎开发人员，他为 Firefox 实施了 Flexbox 规范；Dave Geddes，CSS 教育家和 Flexbox Zombies 课程的创建者；以及 Jen Simmons，网络标准倡导者和 Grid 检查器的设计师。

与友善和充满热情的同事的讨论是这个项目中最棒的部分之一。我们能够深入研究重要的问题、细致入微的细节以及关于可能性的深奥的想法。作为一名设计师，与如此重视设计过程并拥有如此多优秀 UX 想法的开发人员和产品经理合作真是太棒了。

可视化新的布局模型

在信息收集之后，我们开始构建我们自己对 Flexbox 的心理模型。

在我试图学习 Flexbox 的过程中，我绘制了一些图表来展示它的不同功能。

我的同事 Gabriel 创建了一个 工作原型，它是一个 Flexbox 高亮器，极大地影响了我们第一个版本的叠加。它是一个类似于我们的 Grid 检查器叠加的单色设计，具有可自定义的高亮颜色，使其在任何网站上都清晰可见。

我们使用点线轮廓表示容器，实线轮廓表示项目，项目之间的斜线阴影表示由 justify-content 和边距创建的空闲空间。

我们在 DevTools 中的 Flexbox 面板里更加大胆。弹性项目图（或我们喜欢称之为的“小地图”）展示了基础、收缩/增长、最小/最大限制以及最终尺寸的可视化——每个属性仅在与布局引擎的大小决定相关时才会出现。

许多其他的设计想法，比如这些 弹性容器图，没有进入最终的 MVP，但它们帮助我们思考了各种选项，并可能在以后被纳入。

渲染引擎的彩色秘密

在 Gecko 工程师的帮助下，我们能够展示一个图表，其中包含关于弹性项目大小确定方式的逐步描述。图和图表之间的基本颜色编码有助于连接这两个 UI。

标记徽章和其他入口点

标记视图中的 Flex 徽章充当弹性容器的指示器，也是打开页面内叠加的快捷方式。早期数据显示，这是打开叠加的最常用方法；布局面板中的切换开关以及规则中 display:flex 声明旁边的按钮是另外两种常用的方法。拥有多个入口点可以适应不同的工作流程，这些工作流程可能侧重于三个检查器面板中的任何一个。

展示一个全新的工具

构建新工具可能存在风险，因为人们可能会假设修改开发人员的日常工作流程。我最大的恐惧之一是，我们会在一个新功能上花费无数的时间，却将其隐藏在 Firefox 开发者工具 这个复杂的巨型建筑中。这会导致人们永远找不到它，或者不愿意去寻找它。

为了鼓励使用，当开发人员在标记视图中选择 弹性容器 或项目时，我们会自动在布局面板中显示 Flexbox 信息。布局面板通常会在 第三个检查器列 中默认显示，我们在 Firefox 62 中添加了这一列。从那里，开发人员可以选择深入了解弹性可视化和关系。

受移动设备启发的导航和结构

我们尝试的一项新功能是页面式导航，开发人员可以“向前翻页”遍历树（到子元素），或“向后翻页”向上遍历树（到父元素）。我们还使用选择菜单在兄弟弹性项目之间跳转。它受到移动界面、Firefox 汉堡菜单和其他页面式 UI 的启发，与 DevTools 中通常使用的更简单的导航相比，是一个重大的实验性改变。

结构中最棘手的部分之一是为弹性容器、项目和嵌套容器-项目设计一个一致的设计。我的同事 Patrick 发现，我们应该在布局面板中有两种类型的弹性面板，显示相关的内容：项目面板或容器面板。当元素既是容器又是项目时，两种面板都会显示。

与页面内上下文更加紧密地联系

当鼠标悬停在 Flexbox 面板内的元素名称上时，我们会高亮显示页面中的元素，从而加强代码和输出之间的联系，而无需包含额外的“检查”图标或其他步骤。我计划将这种直观的悬停行为引入 DevTools 的其他部分。

测试和开发

经过多次迭代后，我创建了一个高保真 原型，与我们的社区频道分享。我们收到了很多有用的评论，这些评论反馈到设计中。

我们第一次尝试正式的用户测试，这有助于揭示我们工具中令人困惑的部分。我们计划继续改进所有新项目的用户研究流程。

UserTesting 要求参与者录制他们的屏幕并大声思考他们在尝试软件时的想法。

本月晚些时候，我们团队的开发人员将撰写一篇更技术性的深入文章，介绍 Flexbox 检查器。同时，这里有一些来自开发过程的有趣细节：大量问题 在 Bugzilla 中创建，以组织项目的每个实现任务。愚蠢的测试页面，比如 这个，由我的同事 Mike 创建，是为了测试每一个 Flexbox 情况。我们的团队定期在 Firefox Nightly 中使用各种网站来测试该工具并查找错误。

接下来是什么

2018 年对于 Firefox DevTools 和新的 设计工具 计划来说是重要的一年。我们经历了艰苦的教训和怀疑的时刻，但最终，我们作为一个团队团结一致，并取得了成果！

我们在改进 UX 流程、提升研究能力以及理解决策结果方面还有更多工作要做。我们还有更多工具需要构建——针对所有类型 CSS 布局的更好的调试工具以及更流畅的 CSS 开发工作流程。我们还有很多可以做的事情来改进 Flexbox Inspector，但现在是时候把它发布到世界上去，看看我们是否能够验证我们已经构建的内容。

现在我们需要您的帮助。Flexbox Inspector 从实际使用中获得反馈至关重要。在 DevEdition 中试用一下，如果您遇到任何错误、想法或重大成果，请通过 Twitter 或 Discourse 告知我们。

感谢 Martin Balfanz、Daniel Holbert、Patrick Brosset 和 Jordan Witte 审阅本文草稿。