Chrome调试器中CSS变量被划除的原因及排查方法

• 利用浏览器元素面板的「Styles」标签页：在目标元素的Styles面板中直接搜索你的CSS变量（比如--text-color），面板会列出所有作用于该元素的变量声明，被划掉的条目就是被覆盖的旧声明，鼠标悬停还能查看对应选择器的优先级，快速定位覆盖来源。
• 使用Styles面板的变量筛选功能：Chrome、Edge等现代浏览器的Styles面板顶部有筛选框，输入var(或者变量名前缀，就能快速过滤出所有使用该变量的CSS规则，同时能看到变量的最终计算值和对应的样式来源文件。
• 控制台直接调试变量值：在浏览器控制台执行以下命令，获取目标元素最终生效的变量值：

  getComputedStyle(document.querySelector('.target-element')).getPropertyValue('--your-variable')
  

  也可以用console.dir(getComputedStyle(document.querySelector('.target-element')))查看该元素所有计算后的CSS属性，关联排查变量影响的样式。
• 核对样式加载顺序与优先级：检查定义CSS变量的样式表加载顺序，后加载的样式表中同优先级的变量声明会覆盖先加载的；另外行内样式定义的变量优先级最高，其次是ID选择器，再是类/属性选择器，最后是标签选择器，优先级高的声明会直接覆盖低优先级的。
• 借助Coverage面板排查隐藏规则：如果怀疑有未留意的样式代码覆盖变量，可打开浏览器的「Coverage」面板，分析所有加载的CSS文件，找到包含目标变量的所有规则，逐一排查冲突场景。

内容的提问来源于stack exchange，提问作者Naresh