CSS变量如何调试计算后的值？

必须进Computed面板查看calc()中变量的最终计算值，Styles面板仅显示变量原始定义（如1rem），Computed中展开对应属性（如top、color）才显示渲染后具体像素或颜色值（如32px、rgb(59,130,246)）。

Chrome DevTools 中查 calc() 里变量的最终结果

直接看 var(--size) 的原始定义没用，真正要确认 calc(var(--size) * 2) 算出来多少像素，必须进 Computed 面板。Styles 面板里鼠标悬停显示的「Computed value」只是变量字面值（比如 1rem），不是运算后结果。

操作路径：Elements → 选中目标元素 → 右侧 Computed 标签页 → 展开你用了 var() 的属性（如 top、margin、background-color）→ 右侧显示的才是浏览器实际渲染值（如 32px 或 rgb(59, 130, 246)）。

1. 常见错误：变量定义在 :root，但子元素被局部 color 覆盖，导致 var(--color-primary) 在 color 属性里失效——Computed 面板里该属性会显示初始值，而不是变量值
2. 注意继承链影响：--size 是 1rem，但父元素 font-size 改了，最终计算值就变——只有 Computed 面板能反映这个动态结果
3. Safari 对嵌套 calc(calc()) 支持不稳定，建议扁平化写法，比如用 calc(var(--a) + var(--b)) 而非 calc(calc(var(--a) * 2) + var(--b))

用 getComputedStyle 拿运行时已计算的属性值

getComputedStyle(el).getPropertyValue('--var-name') 返回的是未解析的原始字符串（比如 "#3b82f6"），不是 calc() 后的结果。真要读最终值，必须指定具体 CSS 属性名：

1. 查颜色：用 getComputedStyle(el).color（返回 "rgb(59, 130, 246)"）
2. 查边距：用 getComputedStyle(el)['margin-top']（返回 "24px"）
3. 查背景：用 getComputedStyle(el).background（返回完整字符串，如 "rgb(59, 130, 246) none repeat scroll 0% 0%"）
4. 别用 el.style.getPropertyValue()，它只读内联样式，不包含继承或计算结果

VSCode 里根本看不到计算值

VSCode 是编辑器，不是渲染引擎。所有声称“预览 CSS 变量值”的插件，本质都是字符串替换或调用外部服务，和真实浏览器行为无关。你看到的 --spacing-md: 16px 永远只是文本，不会变成 24px（当父级 font-size 变成 1.5rem 时）。

它唯一能帮你的，是快速跳转到变量定义（Ctrl+Click）、语法高亮、避免拼写错误。但作用域问题（比如某个 div 里覆盖了同名变量）、继承链中断、!important 对 fallback 生效但对变量本身无效——这些全得靠浏览器 DevTools 实时验证。

JavaScript 动态改变量后怎么验证效果

用 element.style.setProperty('--color', '#ff6b6b') 修改后，别只信 Styles 面板里变量值变了，要立刻看 Computed 面板对应属性是否同步更新。常见静默失败原因：

1. 漏掉 -- 前缀，写成 'color' 而不是 '--color'
2. 传入数字没转字符串，比如 root.style.setProperty('--size', 16) → 应为 '16px'
3. 作用域错配：想改全局却调用了某个组件元素的 style.setProperty()，而该元素自己声明了同名变量，优先级更高
4. 清除变量用 element.style.removeProperty('--var-name')，不是设为空字符串

复杂点在于：CSS 变量的“计算值”不是一次求值就固定，它随容器尺寸、字体缩放、媒体查询实时重算。你看到的 Computed 值，永远只是当前快照——换设备、切窗口大小、开暗色模式，都可能让它变。