如何让浏览器在未找到CSS变量时记录日志？

想要无需视觉检查就能确认CSS变量是否定义，可以通过JavaScript实现检测并在控制台打印日志，CSS本身没有原生的日志触发机制，具体方案如下：

基础检测方案 #

针对你提供的.stroked-text类，我们可以遍历对应元素，获取计算样式后检查目标变量是否存在有效值：

// 获取所有应用.stroked-text类的元素
const strokedElements = document.querySelectorAll('.stroked-text');

strokedElements.forEach(element => {
  const computedStyle = getComputedStyle(element);
  // 列出需要检查的CSS变量
  const requiredVars = [
    '--stroked-text-color-1',
    '--stroked-text-color-2',
    '--stroked-text-color-3',
    '--stroked-text-color-bg'
  ];

  requiredVars.forEach(varName => {
    // 去除变量值前后空白字符
    const varValue = computedStyle.getPropertyValue(varName).trim();
    if (!varValue) {
      console.warn(`警告：CSS变量 ${varName} 在元素 ${element} 中未定义！`);
    }
  });
});

运行这段代码后，只要有变量未定义，控制台就会输出对应的警告信息，无需查看UI就能定位问题。

动态场景优化方案 #

如果页面存在动态修改样式、新增/移除元素的情况，可以用MutationObserver监听样式变化，实时检测变量状态：

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    // 只监听元素的style属性变化
    if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
      const element = mutation.target;
      if (element.classList.contains('stroked-text')) {
        const computedStyle = getComputedStyle(element);
        const requiredVars = [
          '--stroked-text-color-1',
          '--stroked-text-color-2',
          '--stroked-text-color-3',
          '--stroked-text-color-bg'
        ];
        requiredVars.forEach(varName => {
          const varValue = computedStyle.getPropertyValue(varName).trim();
          if (!varValue) {
            console.warn(`警告：CSS变量 ${varName} 在元素 ${element} 中未定义！`);
          }
        });
      }
    }
  });
});

// 对所有.stroked-text元素开启监听
document.querySelectorAll('.stroked-text').forEach(el => {
  observer.observe(el, { attributes: true });
});

这个方案会在元素样式发生变化时自动重新检测变量，适合动态页面场景。

关于CSS回退方案的补充 #

你之前用的var(--stroked-text-color-1, red)回退方案，虽然能通过视觉反馈发现问题，但对于复杂页面或样式变化不明显的场景，JS检测的方式更高效，能直接在控制台定位未定义的变量，无需逐一检查UI。

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