Question

我正在定义变量as per the spec，如下所示：

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

像这样访问它们：

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

哪个工作正常。

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

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

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

Answer 1

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

...

Answer 2

Safari （43） - 在开发者工具中，您可以点击一个小图标来显示该值。

Firefox （58） - 在开发人员工具中，CSS变量有一条虚线，当您悬停时，值get显示为工具提示。

Chrome （67） - 在开发人员工具中，当鼠标悬停时，CSS var值也会显示为工具提示。当值为颜色时，它将在框中显示颜色。（很难拍摄截图，但它看起来与Firefox类似）