CSS Pemeriksa Variabel Tidak Didefinisikan
CSS Undefined Variable Checker adalah ekstensi Devtools untuk Google Chrome yang membantu mendeteksi penggunaan variabel CSS yang tidak terdefinisi. Jika Anda menulis CSS menggunakan properti/variabel kustom, alat ini sangat cocok untuk Anda. Ini menambahkan tab ke Chrome Developer Tools, yang memungkinkan Anda memeriksa halaman saat ini untuk variabel CSS yang tidak terdefinisi yang digunakan dalam ekspresi "var()".
Ekstensi ini menganalisis baik stylesheet maupun atribut gaya inline, menampilkan hasilnya dalam tabel yang mudah digunakan dengan tautan ke elemen yang bermasalah dalam tab Elements Developer Tools. Untuk menggunakan ekstensi ini, cukup buka situs web di Google Chrome, buka Developer Tools, dan navigasikan ke tab "CSS Undefined Variable Checker". Dengan mengklik tombol "Check for Undefined Variables", analisis akan dimulai dan tabel akan diisi dengan variabel CSS yang tidak terdefinisi yang ditemukan.
Tabel hasil menyediakan nama variabel yang tidak terdefinisi, stylesheet atau gaya inline di mana variabel tersebut ditemukan, dan elemen di halaman di mana variabel tersebut digunakan. Dengan mengklik tautan dalam tabel, elemen bermasalah akan dihighlight dalam tab Elements Developer Tools, sehingga mudah untuk melacak variabel yang tidak terdefinisi.
Harap dicatat bahwa ekstensi ini bergantung pada API untuk mengakses informasi stylesheet, yang dibatasi oleh Cross-Origin Resource Sharing. Stylesheet dari asal yang berbeda tanpa header akses yang diperlukan tidak akan dianalisis. Namun, hal ini tidak mempengaruhi kemampuan ekstensi untuk menganalisis gaya lain yang dapat diakses melalui API.
Bagi yang tertarik, logika analisis di balik ekstensi ini juga tersedia sebagai paket npm yang disebut
