Chrome/Firefox支持悬停查看var()展开值，需变量已正确定义且未被覆盖；Computed面板是验证生效的黄金标准；Styles面板小箭头可跳转定义处；Console可用getComputedStyle快速测试变量值。
在 Elements 面板中悬停查看 var() 展开值
Chrome 和 Firefox 的 Styles 面板支持直接悬停在 var(--spacing-md) 这类函数上，显示当前作用域下解析出的值（如 16px）。前提是该变量已在父级元素（包括 :root）中正确定义，且未被同名变量覆盖。
常见错误现象：
- 悬停无提示或显示
invalid→ 变量名拼写错误、未定义，或定义在更深层作用域（比如只在某个.card里定义了--color，但你在外部元素用了它） - 显示值与预期不符 → 检查继承链：父元素是否设置了同名变量？
!important对var()本身无效，但会影响其 fallback 值
用 Computed 面板确认最终计算结果
Computed 面板展示的是浏览器实际渲染时采用的值，比如 color: rgb(33, 150, 243) 或 padding: 16px。这是验证 var() 是否生效的黄金标准。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 当样式没生效，怀疑是变量未被正确解析时，直接在 Computed 中搜
color、margin等属性，看右侧值是否为预期数字/颜色 - 若某属性显示为
unset或initial，说明var()查找失败且 fallback 也未提供，需回溯定义位置 - 注意“来源”列会标注该值来自哪条规则——点进去可跳转到
var(--x)调用处，而非定义处
点击小箭头跳转到变量定义位置
在 Styles 面板中，var(--primary-color) 左侧有个小箭头图标。点击它，DevTools 会自动跳转到该变量在 CSS 文件中的定义行（例如 :root { --primary-color: #3498db; }）。
这个功能依赖源码映射，所以：
- 确保 CSS 未被压缩（或已开启 source map）；否则可能跳转到单行或错误位置
- 如果跳转失败或指向空白，大概率是变量在 JS 中动态注入（如
el.style.setProperty('--x', 'y')），此时需去 Console 或 Sources 面板排查 - 定义在
@layer或嵌套 CSS 中时，跳转可能不准，优先以 Computed 面板为准
用 Console 快速测试变量是否存在
在 Console 面板中运行 getComputedStyle(document.documentElement).getPropertyValue('--primary-color')，能直接拿到 :root 下变量的字符串值（带空格和单位，如 " #3498db "）。
更灵活的方式：
- 查任意元素：
getComputedStyle($0).getPropertyValue('--size')（$0是 Elements 面板中最后选中的元素） - 批量检查：
Array.from(document.styleSheets).flatMap(s => Array.from(s.cssRules || []).filter(r => r.cssText?.includes('--')))可列出所有含变量的规则 - 注意：返回空字符串不等于变量未定义，可能是值为空、被覆盖，或作用域外 —— 此时仍要结合 Computed 面板交叉验证
--gap 在 header 和 footer 中可以完全不同，而 VSCode 或静态分析工具完全看不到这种上下文。必须带着具体 DOM 元素去 DevTools 里查，而不是只盯着 CSS 文件里的 :root 块。 
