Pemeriksa Variabel Tidak Terdefinisi CSS di Chrome dengan OffiDocs

DESKRIPSI

Apakah Anda menulis CSS menggunakan properti/variabel khusus? Pernahkah Anda salah mengejanya, dan kemudian menyadari bahwa warnanya tidak muncul dengan benar? Pernahkah Anda mendambakan alat yang dapat membantu Anda melacak penggunaan variabel CSS yang tidak ditentukan? Maka Anda beruntung, karena ini hanyalah alatnya! Ekstensi ini menambahkan tab ke Alat Pengembang Chrome yang dapat memeriksa halaman saat ini untuk variabel CSS yang tidak ditentukan yang digunakan dalam ekspresi "var()".

Tidak hanya stylesheet, tetapi juga atribut gaya sebaris dianalisis, dan hasilnya ditampilkan dalam tabel ramah dengan tautan ke elemen yang melanggar dalam tab Elemen Alat Pengembang.

Untuk menggunakan ekstensi ini, setelah dipasang, buka situs web pilihan Anda di Google Chrome, lalu buka Alat Pengembang.

Anda akan melihat tab baru di bagian atas Alat Pengembang berjudul "Pemeriksa Variabel Tidak Terdefinisi CSS".

Tab itu akan membawa Anda ke UI ekstensi ini.

Awalnya, Anda hanya akan melihat tombol berjudul "Periksa Variabel Tidak Terdefinisi" dan tabel kosong.

Mengklik tombol tersebut akan memulai analisis pada halaman yang terhubung dengan devtools dan akan melaporkan hasil apa pun dalam tabel.

Jika tidak ditemukan variabel CSS yang tidak ditentukan, tabel akan diisi dengan pesan yang menunjukkan hal tersebut.

Hasil dalam tabel memiliki tiga kolom.

Kolom pertama menunjukkan nama variabel yang tidak terdefinisi.

Kolom berikutnya menunjukkan stylesheet tempat variabel tersebut ditemukan, dan kolom ketiga menunjukkan di elemen halaman mana variabel yang tidak ditentukan ditemukan.

Kolom ketiga ini mereferensikan elemen dengan pemilih CSS.

Jika variabel yang tidak terdefinisi ditemukan dalam stylesheet, kolom Selector diisi dengan selector untuk deklarasi gaya CSS tempat variabel ditemukan.

Di sisi lain jika variabel yang tidak terdefinisi ditemukan dalam gaya inline, pemilih dihasilkan berdasarkan kelas, id, dan nama tag dari elemen yang dimaksud dan semua leluhurnya.

Perhatikan bahwa pemilih yang dihasilkan ini tidak dijamin dapat mengidentifikasi elemen yang dimaksud secara unik.

Setiap sel di kolom Selector pada tabel hasil adalah hyperlink.

Mengklik setiap tautan akan membuka tab Elemen devtools dan menyorot elemen bermasalah di dalamnya, membantu Anda melacak variabel yang tidak ditentukan.

Catatan: Ekstensi ini bergantung pada API untuk mengakses informasi stylesheet yang dibatasi oleh Berbagi Sumber Daya Lintas Asal.

Stylesheet apa pun yang dimuat di halaman tetapi berasal dari halaman itu sendiri, dan yang tidak disajikan dengan header Access-Control-Allow-Origin yang memungkinkan akses dari halaman ini, tidak akan dianalisis oleh ekstensi ini dan akan menyebabkannya menampilkan kesalahan.

Kesalahan ini tidak menghentikan ekstensi menganalisis gaya lain yang dapat diakses API.

Logika analisis di balik ekstensi ini juga tersedia sebagai paket npm dengan nama @sonatype/undefinisi-css-variable-checker.

Lihat https://www.

npmjs.

com/package/@sonatype/undefinisi-css-variable-checker .

Informasi tambahan:

- Ditawarkan oleh komunitas-grup-toko-chrome
- Peringkat rata-rata: 3 bintang (tidak apa-apa)
- Pengembang Alamat email ini dilindungi dari robot spam. Anda perlu mengaktifkan JavaScript untuk melihatnya.

Web Pemeriksa Variabel Tidak Terdefinisi CSS extension terintegrasi dengan OffiDocs Chromium secara online