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 面板里每个祖先节点有没有重定义该变量。
