CSS Undefined Variable Checker

简介:

检测未定义 CSS 变量的使用的 Devtools 扩展

您使用自定义属性/变量编写 CSS 吗？您是否曾经拼写错误，后来才发现颜色没有正确显示？您是否曾经渴望有一个工具可以帮助您追踪未定义的 CSS 变量的使用情况？那么你很幸运，因为这就是这样一个工具！

此扩展在 Chrome 开发者工具中添加了一个选项卡，可以检查当前页面中是否有“var()”表达式中使用的任何未定义的 CSS 变量。不仅分析样式表，还分析内联样式属性，结果显示在一个友好的表格中，其中包含指向开发工具“元素”选项卡中的违规元素的链接。

要使用此扩展程序，安装后请在 Google Chrome 中打开您选择的网站，然后打开开发人员工具。您将在开发人员工具顶部看到一个名为“CSS 未定义变量检查器”的新选项卡。该选项卡将带您进入此扩展程序的用户界面。最初，您只会看到一个标题为“检查未定义变量”的按钮和一个空表。单击该按钮将开始在开发工具所连接的页面上进行分析，并将报告表中的所有结果。如果没有找到未定义的 CSS 变量，则该表将填充一条指示此类变量的消息。

表中的结果有三列。第一列表示未定义变量的名称。下一列指示在其中找到它的样式表，第三列指示在页面上的哪个元素上找到未定义的变量。第三列通过 CSS 选择器引用该元素。如果在样式表中找到未定义的变量，则选择器列将填充找到该变量的 CSS 样式声明的选择器。另一方面，如果在内联样式中找到未定义的变量，则会根据相关元素及其所有祖先的类、id 和标签名称生成选择器。请注意，生成的选择器不能保证唯一地标识相关元素。结果表的选择器列中的每个单元格都是一个超链接。单击每个链接将打开开发工具的“元素”选项卡并突出显示其中有问题的元素，帮助您追踪未定义的变量。

注意：此扩展依赖于 API 来访问受跨源资源共享约束的样式表信息。页面中加载但与页面本身位于不同来源的任何样式表，以及未提供允许从此页面访问的 Access-Control-Allow-Origin 标头的任何样式表，都不会被此扩展分析并会导致它显示错误。这些错误不会阻止扩展分析可通过 API 访问的其他样式。

此扩展背后的分析逻辑也可以作为 npm 包提供，名称为 @sonatype/undefined-css-variable-checker。请参阅 https://www.npmjs.com/package/@sonatype/undefined-css-variable-checker 。