Chrome DevTools 中的“元素”面板 是开发人员最常用的工具之一,用于调试有关 Web 应用程序中 DOM 状态的各种信息。它最常用于调试页面的 CSS,为开发人员提供了一种方便的方法来调整各种 CSS 属性,以了解页面样式的更改如何影响其呈现。
“元素”面板的一项功能是能够将鼠标悬停在 CSS 属性上,并查看描述 CSS 属性用途的悬停卡。此功能最初是由 Web 技术领域的 Google 开发人员专家 (GDE) Alexey Rodionov 添加的,并添加了指向 CSS 属性的 MDN 文档的链接。最近,Alexey 扩展了这些悬停卡的功能,以显示属性的基线状态。
CSS 上广泛可用的状态 color 财产。
CSS 上新可用的状态 text-wrap 财产。
CSS 上的可用性状态有限 hyphenate-limit-chars 财产。
除了显示 CSS 属性的基线状态外,这些卡片还描述了广泛使用或新可用功能的互作性日期,因此您可以快速浏览功能可互作的时间!此更改已登陆 Chrome 版本 140。在撰写本文时,Chrome 140 版本 目前处于测试阶段 ,但此功能将很快在稳定版本中可用!
再次感谢 阿列克谢·罗季奥诺夫 (Alexey Rodionov ) 为这一宝贵功能所做的工作。我们相信,这将为开发人员提供一种更简单的方法来发现其调试工作流程中的功能兼容性。
