CSS Undefined Variable Checker is a Devtools extension for Google Chrome that helps detect usages of undefined CSS variables. If you write CSS using custom properties/variables, this tool is perfect for you. It adds a tab to the Chrome Developer Tools, allowing you to check the current page for any undefined CSS variables used within "var()" expressions.

This extension analyzes both stylesheets and inline style attributes, displaying the results in a user-friendly table with links to the offending elements within the Developer Tools' Elements tab. To use the extension, simply open a website in Google Chrome, open the Developer Tools, and navigate to the "CSS Undefined Variable Checker" tab. Clicking the "Check for Undefined Variables" button will start the analysis and populate the table with any undefined CSS variables found.

The results table provides the name of the undefined variable, the stylesheet or inline style where it was found, and the element on the page where it was used. Clicking on the links in the table will highlight the problematic element in the Developer Tools' Elements tab, making it easy to track down the undefined variable.

Please note that this extension relies on APIs for accessing stylesheet information, which are constrained by Cross-Origin Resource Sharing. Stylesheets from different origins without the necessary access headers will not be analyzed. However, this does not affect the extension's ability to analyze other API-accessible styles.

For those interested, the analysis logic behind this extension is also available as an npm package called