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

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 样式并启用 Show all 过滤器来访问它：

...

Answer 2

Safari (43) - 在开发人员工具中，有一个小图标，您可以单击它来显示值。

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

Chrome (67) - 在开发者工具中，悬停时 CSS var 值也会显示为工具提示。当值为颜色时，它将在框中显示颜色。 （不好截图，不过和Firefox差不多）