CSS Dig Chrome Uzantısı ile Herhangi Bir Web Sitesinin Kodlarını Analiz Edin

Yapabileceğin çok şey var Chrome DevTools canlı web sitelerini düzenlemekten detaylı HTTP isteklerini incelemeye kadar. Fakat CSS kalıplarını analiz edebilme konsola pişmiş değil.

İle CSS Kazmak, hepsini analiz edebilirsin CSS seçicileri, özgüllük, ve benzersiz özellikler herhangi bir web sayfasının doğrudan Chrome’dan. Bu eklenti tamamen ücretsizdir ve öndeki geliştiricilere çok fazla güç sunar.

Bir stil sayfasını incelediğinizde, CSS Dig panelinden çok fazla veri alırsınız. Sana gösterebilir bireysel seçiciler, dahil olmak üzere çiftleri ve Gereksiz özgüllük seviyeleri.

Başlamak için, basitçe eklentiyi yükle ve konsol penceresini açın. Bulacaksın iki sekme CSS Dig penceresinde: Özellikleri ve Seçiciler.

Sonuçlara göz atabilirsiniz özelliklerine göre düzenlenmiş (renk, kenarlık, dolgu) veya seçiciler tarafından (sınıflar, kimlikleri). Kullanmakta olduğunuz yazı tiplerini ve renkleri incelemenizi sağladığından, Özellikler penceresini en değerli buluyorum.

Bu araç herhangi bir web sitesi için pano boyunca çalışır, bu yüzden aynı zamanda kullanışlı tersine mühendislik kimsenin tasarımı. CSS'yi doğrudan bu pencereden kopyalayıp yapıştırabilir ve kendi projelerinizde yeniden kullanabilirsiniz.

Muhtemelen CSS Dig için en yaygın kullanım durumu yinelenen renkleri temizle Renk paletinizden. Gerçekten eşsiz yeşil tonlarına ihtiyacınız var? Veya bir sayfa için kaç farklı sans-serif yazı tipi gerekli?

CSS Dig inanılmaz derecede basittir, bu yüzden DevTools gibi onlarca özellik beklemeyin. Bunun yerine, bu eklenti oldukça frontend geliştiricilere yönelik yinelenen seçiciler veya yinelenen özellikler için denetim siteleri.

kaynak kodu Eklentinin tümü GitHub’da ücretsiz olarak bulunur; En son güncellemeler.