Ply：用于从专业网页学习的视觉网页检查器

虽然许多在线资源教授基础网页开发，但很少有资源帮助初学者学习专家用于实现复杂视觉功能的 CSS 概念和设计模式。专业网页嵌入这些设计模式，可以作为丰富的学习材料，但它们的样式表复杂，初学者难以理解。本文提出 Ply，一款帮助初学者利用视觉直觉理解专业网页的 CSS 检查工具。我们引入了一种新的视觉相关性测试技术来识别对页面有视觉效果的属性，Ply 使用该技术隐藏视觉上无关的代码，并揭示属性之间反直觉的关系。在用户研究中，Ply 帮助初学者复制复杂网页功能的速度比使用 Chrome 开发者工具快 50%，并使初学者能够识别和解释陌生概念。这些结果表明，即使对于初学者，视觉检查工具也可以支持从复杂专业网页中学习。