CSS Tanımsız Değişken Denetleyicisi Chrome OffiDocs ile

TANIM

Özel özellikleri/değişkenleri kullanarak CSS mi yazıyorsunuz? Hiç bir harfi yanlış yazdığınız ve bunun sonucunda bir rengin doğru şekilde çıkmadığını sonradan fark ettiğiniz oldu mu? Tanımlanmamış CSS değişkenlerinin bu tür kullanımlarını takip etmenize yardımcı olacak bir aracı hiç özlediniz mi? O zaman şanslısınız çünkü bu tam da böyle bir araç! Bu uzantı, Chrome Geliştirici Araçları'na, geçerli sayfayı "var()" ifadelerinde kullanılan tanımlanmamış CSS değişkenleri açısından kontrol edebilen bir sekme ekler.

Yalnızca stil sayfaları değil, aynı zamanda satır içi stil nitelikleri de analiz edilir ve sonuçlar, Geliştirici Araçları'nın Öğeler sekmesinde rahatsız edici öğeye bağlantıların bulunduğu kolay bir tabloda görüntülenir.

Bu uzantıyı kullanmak için, yüklendikten sonra Google Chrome'da seçtiğiniz bir web sitesini açın ve ardından Geliştirici Araçlarını açın.

Geliştirici Araçlarının üst kısmında "CSS Tanımsız Değişken Denetleyicisi" başlıklı yeni bir sekme göreceksiniz.

Bu sekme sizi bu uzantının kullanıcı arayüzüne götürecektir.

Başlangıçta yalnızca "Tanımsız Değişkenleri Kontrol Et" başlıklı bir düğme ve boş bir tablo göreceksiniz.

Düğmeye tıklamak, devtools'un bağlı olduğu sayfada analize başlayacak ve sonuçları tablo içinde raporlayacaktır.

Tanımlanmamış CSS değişkeni bulunmazsa tablo bunun yerine bunu belirten bir mesajla doldurulacaktır.

Tablodaki sonuçlar üç sütundan oluşur.

İlk sütun tanımlanmamış değişkenin adını gösterir.

Bir sonraki sütun, içinde bulunduğu stil sayfasını belirtir ve üçüncü sütun, tanımsız değişkenin sayfada hangi öğede bulunduğunu gösterir.

Bu üçüncü sütun, öğeye bir CSS seçici aracılığıyla başvuruda bulunur.

Tanımsız değişken bir stil sayfasında bulunursa Seçici sütunu, değişkenin bulunduğu CSS stil bildiriminin seçicisiyle doldurulur.

Öte yandan, tanımsız değişken bir satır içi stilde bulunursa, söz konusu öğenin ve onun tüm atalarının sınıflarına, kimliğine ve etiket adına göre bir seçici oluşturulur.

Oluşturulan bu seçicinin söz konusu öğeyi benzersiz şekilde tanımlamasının garanti edilmediğini unutmayın.

Sonuçlar tablosunun Seçici sütunundaki her hücre bir köprüdür.

Her bağlantıya tıklamak geliştirici araçlarının Öğeler sekmesini açacak ve içindeki sorunlu öğeyi vurgulayarak tanımlanmamış değişkeni bulmanıza yardımcı olacaktır.

Not: Bu uzantı, Çapraz Kaynaklı Kaynak Paylaşımı tarafından kısıtlanan stil sayfası bilgilerine erişim için API'leri kullanır.

Sayfaya yüklenen ancak sayfanın kendisinden farklı bir kaynakta bulunan ve bu sayfadan erişime izin verecek Access-Control-Allow-Origin başlığıyla sunulmayan stil sayfaları bu uzantı tarafından analiz edilmeyecektir. ve hataların görüntülenmesine neden olur.

Bu hatalar, uzantının API ile erişilebilen diğer stilleri analiz etmesini engellemez.

Bu uzantının arkasındaki analiz mantığı, @sonatype/unDefinition-css-variable-checker adı altında bir npm paketi olarak da mevcuttur.

https://www.

npmjs.

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

Ek bilgi:

- Topluluk grubu krom mağazası tarafından sunulmaktadır
- Ortalama puan: 3 yıldız (iyiydi)
- Geliştirici Bu e-posta adresi spam robotlarından korunuyor. Sen, görüntülüyebilmek için JavaScript etkinleştirilmelidir gerekir.

CSS Tanımsız Değişken Denetleyicisi web extension OffiDocs ile entegre Chromium Online