去年 11 月，我写了一篇关于我的团队在新的实验性网页设计工具上的工作。我们还进行了一项调查，以对网页设计和开发的挑战进行排名。非常感谢所有参与我们开放式设计流程的人！我们在一个月内收到了超过 900 份回复，并发现了主要发现，这些发现继续为 Firefox DevTools 的 2019 年路线图提供信息。

方法

在 Mozilla 数据科学家的指导下，我选择了MaxDiff 方法来进行调查的挑战排名部分。MaxDiff 需要调查者在选项池的子集中进行权衡。这对于对大量选项进行排名非常有效，因为对于常规卡片排序来说，这将过于繁琐。它还通过强调优先级的相对差异来产生更准确的总体排名。

在实践中，这产生了 10 页调查问卷，每页都显示了来自 23 个总网页设计挑战池的 4 个随机选项。参与者必须在每组中选择“最不”和“最”有影响力的选项。然后使用以下公式计算的分数确定排名

调查的第二部分侧重于浏览器开发者工具的具体问题。对于这一部分，我们只提供了 7 个选项，因此我们使用了简单的拖放卡片排序。

结论

到目前为止，排名最高的议题与 *CSS 布局调试* 相关，即了解像不需要的滚动条、意外的大小和位置等神秘现象的根本原因。因此，我现在最高优先级是通过进一步研究和实验深入研究 CSS 调试问题。（您可以通过参加我最新的简短CSS 调试后续调查来帮忙！更多信息见下文。）

不出所料，*跨浏览器兼容性* 也是首选之一。我们正在研究如何减轻调试浏览器差异的痛苦，包括审计、提示和更强大的响应式设计工具。

排名居中的问题包括 *Flexbox*、*Grid* 和 *可访问性*。我们计划继续改进我们的可访问性面板；然而，现在我们将暂时停止对我们已成功发布的Flexbox 和Grid 工具进行改进。让它们休息一下，收集更多真实世界的反馈，将使我们能够在以后提出全新的想法。

排名最低的问题包括 *缺少可视化/所见即所得工具*、*动画*、*WebGL* 和 *SVG*。可视化工具部分令人惊讶——我们已经看到很多对点击拖动可视化工具的喜爱，比如设计精美的Visbug 和Webflow。我怀疑我在这里使用的旧式措辞——所见即所得 (“what you see is what you get”)——让人联想到过去不太令人愉快的体验。显然，在这一领域，可以通过现代工具来改善开发人员的生活。

至于浏览器问题卡片排序，我们清楚地听到了您关于“将 CSS 更改移回我的编辑器”的问题。我们目前正在为“更改”面板添加导出选项，并希望您能对我们的设计提出意见！DOM 断点也计划在今年推出。

您可以在这份报告中查看完整的 MaxDiff 和卡片排序排名。

后续调查：CSS 布局调试

现在我们需要您的再次帮助！第一次调查的主要结论是，各个经验水平的开发人员和设计师都希望更好地理解 CSS 问题，例如意外的滚动条和大小。我们已经开始研究和原型化潜在的工具想法，以调查特定类型的 CSS 错误，但我们需要您的反馈来指导我们的工作。

请花点时间完成我们快速的单页CSS 布局调试调查，帮助我们对最耗时的错误进行排名。您的反馈将极大地帮助我们澄清 2019 年及以后的计划。

谢谢！

Victoria 和 Firefox DevTools 团队