Chrome如何查看CSS变量来源

在前端开发内容学习中，Chrome如何查看CSS变量来源？是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

Chrome中定位CSS变量定义位置需在Elements面板Styles标签页查找--xxx声明，其旁显示来源文件和行号；若为灰色斜体则未继承或失效，悬停显示的“Computed value”仅为原始定义值，非calc()计算结果，最终值须在Computed面板展开对应属性查看。

Chrome里怎么定位CSS变量定义位置

直接在 Elements 面板 Styles 标签页里找 --xxx 开头的声明，它旁边会显示来源文件名和行号（比如 styles.css:24）。如果变量定义在 :root，但当前元素没生效，注意看该行是否被灰色斜体标出——这说明变量未继承或被覆盖。

为什么鼠标悬停显示的“Computed value”不是最终值

那个弹窗只显示变量原始定义值（例如 --size: 1rem），不是参与 calc() 后的结果。真正要查 margin: calc(var(--size) * 2) 算出来多少像素，必须切到 Computed 面板，展开 margin-top 或对应属性才能看到渲染后的具体数值。

如何确认变量是否被正确继承或覆盖

• 在 Styles 面板中，检查该元素是否显式设置了同名变量（如 div { --color-primary: red; }），会覆盖 :root 定义
• 查看 color、font-size 等父级属性是否影响了 rem 类变量的实际计算（比如 --size: 1rem 在 font-size=16px 的父元素下是 16px，在 font-size=20px 下就是 20px）
• 用 getComputedStyle(el).getPropertyValue('--size') 拿到的是原始字符串，不是计算结果；要验证效果，得读 getComputedStyle(el).marginTop 这类具体属性

容易被忽略的继承断点

CSS 变量不继承，而是“级联生效”：只要父元素定义了 --x，子元素就能用 var(--x)，但一旦中间某层重新赋值（哪怕只是 --x: inherit），后续层级就按新值走。调试时别只盯着 :root，得顺着 DOM 往上逐层看 Styles 面板里每个祖先节点有没有重定义该变量。