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

I am defining my variables as per the spec like so:

我按照规范定义我的变量,如下所示:

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

And accessing them like this:

并像这样访问它们:

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

Which works fine.

哪个工作正常。

However I was wondering if there was a way of debugging or inspecting the :root CSS rule to see what variables have been defined, and what their values were?

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

From my understanding the :root selector and html selectors both target the same element however when I inspect the html element using Chrome's debugging tools I cannot see anything defined:

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

Is there a way finding out what variables have been defined and their values?

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

2 个解决方案

#1

Using Chrome Canary, you can access this by viewing the element's Computed styles and enabling the Show all filter:

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

...

#2

Safari (43) - in the developer tools, there is a little icon you can click to reveal the value.

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

Firefox (58) - in the developer tools, the CSS vars have a dotted line, when you hover, the value get's displayed as a tooltip.

Firefox(58) - 在开发人员工具中,CSS变量有一个虚线,当你悬停时,值get显示为工具提示。

Chrome (67) - in the developer tools, the CSS var values are also displayed as a tooltip when hovering. When the value is a color, it will display the color in a box. (hard to take a screenshot, but it looks similar to Firefox)

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

#1