PLY：一个可视化的Web检查器

现代的网页是复杂的、功能齐全的应用程序，有着令人印象深刻的设计，而且有很多人对学习如何设计这些丰富的界面很感兴趣。

Web的好处是，即使我是一个没有经验的开发人员，在我的常规浏览过程中也很容易偶然发现大量有趣的设计。

假设我在Airbnb主页上看到这个例子，我想在这里复制这个预订表单。

所以你可以做的一件事就是在CSSTricks或Codrop这样的网站上搜索教程。

但是，通常很难准确地指定您需要针对设计的哪个方面提供教程。

但最大的问题是，教程往往过于简单化，并不完全是我们想要的。

这是我在搜索教程时发现的一个玩具示例。你马上就可以看到，它与原作的美学不太匹配，这是不令人满意的。

Airbnb示例使用display：table；来实现表格布局，而不使用语义错误的<；table>；元素。

玩具示例使用了浮点和clearfix，这是一种非常过时的布局方法。

现在专家们知道这一点，所以他们经常使用现代浏览器DevTools内置的“检查元素”功能来检查底层实现。

其他网页如何使用教程并不总是传达的现代开发最佳实践来实现效果。

新手在检查生产网页CSS时到底发现了什么挑战，这对检查工具的设计意味着什么。

我将带您了解PLY，这是我们为应对这些挑战而开发的工具。

并演示它如何帮助初学者将复制复杂设计的速度提高50%，并学习新概念。

调查了20名本科生web开发人员，了解他们学习web开发、使用教程和查看专业示例的经历。

对其中10人进行了面对面研究，在此期间，他们使用CDT在专业网页上复制了网络特征。

新手依赖视觉直觉，但现有的检查工具不支持对不熟悉的代码进行视觉推理。

根据Gross和Kelleher(2010)，Brandt et al.。(2010)，Ko，Myers和Aung(2004)。

我们的高级发现是，新手很大程度上依赖于他们的视觉直觉来理解不熟悉的CSS，并且很难将视觉结果与负责任的代码行联系起来。

这与终端用户程序员努力识别负责感兴趣的图形输出的代码行的先前工作是一致的。

具体地说，我想谈谈我们在CSS检查上下文中确定的两个核心障碍。

所以，首先，如果你使用过Chrome DevTools，你可能知道你可以点击一个属性来打开和关闭它，活在页面上。

问题是，即使Chrome去掉了它知道不活动的属性，仍然有一些属性可以在不改变页面外观的情况下进行切换。

如果只有一两个，这很好，但不幸的是，有很多-红色高亮显示是视觉上无效的属性，但在Chrome中似乎是相关的-你可以看到它将相关的属性以绿色推到了文件夹的底部。

正如我们在Need finding中所观察到的，当相关代码被推到下面时，新手很难找到。

但是，即使您删除了这些，这也是不够的-我们还在Need中发现，新手缺乏概念知识，无法理解不熟悉的示例代码。

特别是，新手很难理解多个属性如何协同工作来产生视觉结果。

有一件事让人们苦苦挣扎，那就是理解多个属性何时协同工作才能产生视觉效果。

所以我们看到的是，在新手的意义构建方法和开发人员工具当前的设计方式之间存在差距。

因此，我们在他们的指导方针的基础上，为学习者友好的网络检查员提出了新的设计指导方针。

对检查器输出隐藏视觉上不相关的代码，以最大限度地减少信息过载，并支持新手的视觉处理。

将上下文指南嵌入检查器输出中，以解释CSS属性如何协调以产生视觉效果。

使用代表和语言来沟通学习者的理解(在我们的例子中是视觉直觉)。

我们的方法受到一种称为可视化回归测试的技术的启发，该技术与统计回归无关。

这似乎是简单的视觉比较，但它允许我们通过展示关于属性之间关系的概念性知识来帮助新手理解示例，而这些知识是他们事先不知道的。

按照学习收益的标准测量，我们要求参与者在实施干预之前和之后执行类似的任务，这样我们就可以跟踪他们理解的变化。

“有关z-index的某些内容将因位置n而改变