Sprawdzacz niezdefiniowanych zmiennych CSS
CSS Undefined Variable Checker to rozszerzenie Devtools dla Google Chrome, które pomaga wykrywać użycia niezdefiniowanych zmiennych CSS. Jeśli piszesz CSS przy użyciu niestandardowych właściwości/zmiennych, narzędzie to jest idealne dla Ciebie. Dodaje ono zakładkę do narzędzi deweloperskich Chrome, umożliwiając sprawdzenie bieżącej strony pod kątem niezdefiniowanych zmiennych CSS używanych w wyrażeniach "var()".
To rozszerzenie analizuje zarówno arkusze stylów, jak i atrybuty stylu inline, wyświetlając wyniki w przyjaznej dla użytkownika tabeli z linkami do elementów, które powodują problem, w zakładce Elementy narzędzi Dewelopera. Aby użyć rozszerzenia, po prostu otwórz stronę internetową w Google Chrome, otwórz narzędzia deweloperskie i przejdź do zakładki "CSS Undefined Variable Checker". Kliknięcie przycisku "Sprawdź niezdefiniowane zmienne" rozpocznie analizę i wypełni tabelę wszystkimi znalezionymi niezdefiniowanymi zmiennymi CSS.
Tabela wyników zawiera nazwę niezdefiniowanej zmiennej, arkusz stylów lub styl inline, w którym została znaleziona, oraz element na stronie, w którym została użyta. Kliknięcie linków w tabeli wyróżni problematyczny element w zakładce Elementy narzędzi Dewelopera, ułatwiając śledzenie niezdefiniowanej zmiennej.
Należy zauważyć, że to rozszerzenie polega na interfejsach API do uzyskiwania informacji o arkuszach stylów, które są ograniczone przez Cross-Origin Resource Sharing. Arkusze stylów z różnych źródeł bez niezbędnych nagłówków dostępu nie będą analizowane. Jednakże, nie ma to wpływu na zdolność rozszerzenia do analizowania innych stylów dostępnych za pomocą interfejsów API.
Dla zainteresowanych, logika analizy tego rozszerzenia jest również dostępna jako pakiet npm o nazwie
