html - 如何在浏览器中检查 CSS 变量？

Question

我正在按照规范定义我的变量，如下所示：

:root {
 --my-colour: #000;
}

并像这样访问它们：

.my-element {
  background: var( --my-colour );
}

哪个工作正常。

但是我想知道是否有一种方法可以调试或检查:rootCSS 规则以查看定义了哪些变量，以及它们的值是什么？

据我了解，:root选择器和html选择器都针对同一个元素，但是当我html使用 Chrome 的调试工具检查元素时，我看不到任何定义：

有没有办法找出已定义的变量及其值？

Answer 1

使用 Chrome Canary，您可以通过查看元素的Computed样式并启用Show all过滤器来访问它：

...

Answer 2

Safari (43) - 在开发者工具中，有一个小图标你可以点击来显示值。

Firefox (58) - 在开发者工具中，CSS 变量有一条虚线，当你将鼠标悬停时，获取的值会显示为工具提示。

Chrome (67) - 在开发者工具中，CSS var 值在悬停时也会显示为工具提示。当该值为颜色时，它将在框中显示该颜色。（很难截图，但看起来和火狐差不多）