CSS Undefined Variable Checker

检测未定义 CSS 变量用法的开发者工具扩展程序。 您是否使用自定义属性或变量编写 CSS？是否曾经拼错变量名，直到后来才发现颜色因此没有正确显示？是否曾希望有一个工具帮助您找出这些未定义的 CSS 变量用法？那么您很幸运，因为这正是这样一个工具！ 此扩展程序会在 Chrome 开发者工具中添加一个标签页，用于检查当前页面的“var()”表达式中是否使用了未定义的 CSS 变量。它不仅分析样式表，也会分析行内样式属性，并在易于阅读的表格中显示结果，其中包含指向开发者工具“元素”标签页中相关元素的链接。 安装此扩展程序后，在 Google Chrome 中打开任意网站，然后打开开发者工具。您会在开发者工具顶部看到一个名为“CSS Undefined Variable Checker”的新标签页，点击该标签页即可进入此扩展程序的界面。最初，您只会看到一个名为“Check for Undefined Variables”的按钮和一个空表格。点击按钮将开始分析开发者工具所连接的页面，并在表格中报告结果。如果没有发现未定义的 CSS 变量，表格中会显示相应消息。 结果表格有三列。第一列显示未定义变量的名称，第二列显示发现该变量的样式表，第三列显示页面上发现该变量的元素。第三列使用 CSS 选择器引用元素。如果未定义变量位于样式表中，Selector 列会显示发现该变量的 CSS 样式声明的选择器。如果未定义变量位于行内样式中，则会根据相关元素及其所有祖先元素的类、ID 和标签名生成选择器。请注意，生成的选择器不保证能唯一标识相关元素。结果表格中 Selector 列的每个单元格都是一个超链接。点击链接会打开开发者工具的“元素”标签页并突出显示有问题的元素，帮助您找到未定义的变量。 注意：此扩展程序依赖用于访问样式表信息的 API，这些 API 受到跨源资源共享限制。页面加载的样式表如果与页面本身不同源，并且提供时未设置允许该页面访问的 Access-Control-Allow-Origin 标头，将不会被此扩展程序分析，并会导致扩展程序显示错误。这些错误不会阻止扩展程序分析 API 可访问的其他样式。 此扩展程序的分析逻辑也以 npm 包的形式提供，名称为 @sonatype/undefined-css-variable-checker。参见 https://www.npmjs.com/package/@sonatype/undefined-css-variable-checker 。