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

Question

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

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

并像这样访问它们:

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

哪个工作正常.

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

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

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

Answer 1

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

...

@JamesDonnelly干杯.这在我的Chrome版本(v48)中对我不起作用.但是,当我现在下载Chrome Cannery时,可以在_Styles_标签中访问它,而无需启用_show all_过滤器.谢谢 (2认同)
不幸的是，它仍然显示计算值的公式，而不是实际值。 (2认同)

Answer 2

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

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

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