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

Posted 2023-02-19

【中文标题】如何在浏览器中检查 CSS 变量？

【英文标题】：How do you inspect CSS variables in the browser?

【发布时间】：2016-06-06 21:37:51

【问题描述】：

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

:root 
 --my-colour: #000;

并像这样访问它们：

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

效果很好。

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

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

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

【问题讨论】：

也许你可以看看：***.com/a/10175042/3365426

谢谢，我刚刚尝试过，但它只输出 html 元素的计算样式，而不是任何变量。

我认为您需要检查 .my-element 以查看 --my-colour 变量的值。在根元素中，您无法查看值（您要求提供定义，但我认为开发人员控制台尚未为此做好准备）

【参考方案1】：

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

...

【讨论】：

"#\30 00" 等等，什么？为什么检查员认为需要对第一个 0 进行编码？

@BoltClock 可能是它仍然隐藏在标志后面的原因之一。 ;)

@BoltClock 有趣的是，它会影响任何以数字 (0-9) 开头的十六进制颜色代码。 #900 和#777777 分别显示为#\39 00 和#\37 77777，而#ABC 显示为#ABC。

啊，但是你看，012345 被视为一个 导致 0 被丢弃为一个非有效数字。 per se 这不是错误的 - 它只是阻止该自定义属性被用作 值。

@JamesDonnelly 欢呼。这在我的 Chrome (v48) 版本中对我不起作用。但是，当我现在已经下载了 Chrome Cannery 并且可以在 Styles 选项卡中访问它，而无需启用 show all 过滤器。谢谢

【参考方案2】：

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

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

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

【讨论】：

很奇怪。想知道是什么阻碍了 Chrome。

好了，使用 Chrome 67（当前的每晚 Canary 版本），您可以使用与其他方法相同的方式检查 CSS 变量。我已经相应地更新了我的答案。来源：developers.google.com/web/updates/2018/04/devtools#vars