Chrome için CSSPeeper ile Her Sitede Detaylı CSS Müfettişi

Düzenli Chrome DevTools paneli çılgınca güçlüdür. Herkesin bir sitenin düzenini, CSS'yi ve hatta gerekirse HTTP üstbilgilerini incelemek için herhangi bir sayfaya derinlemesine dalmasını sağlar..

DevTools CSS denetçisi ile çok şey yapabilirsiniz. Ancak net bir GUI paneline sahip değil ve bu her geliştiricinin seveceği bir şey..

Bu GUI denetçisini tarayıcınıza ekleyen ücretsiz bir Chrome uzantısı olan CSSPeeper'a göz atın. Şu anda yalnızca Chrome için oluşturulmuş olmasına rağmen, herhangi bir sayfada herhangi bir öğenin CSS özelliklerini incelemenizi sağlar.

Bir kez seni kurdum bir web sayfasını ziyaret edin ve uzantının ana düğmesini tıklayın Chrome eklenti çubuğunda. Her ana unsurla ilgili ayrıntıları içeren web sayfasının üstünde yeni bir denetleyici penceresi görünür.

Siteye göz atarken, noktalı bir taslak ile gördüğünüz herhangi bir öğeye tıklayabilirsiniz. Buna düğmeler, sayfa bölümleri, başlıklar, gezinme öğeleri dahil olabilir..

Oradan, tipografi, renk seçenekleri ve yazı tipi stilleriyle ilgili ayrıntılı bir denetmen alacaksınız. Bu harika bir yol stilleri doğrudan bir web sayfasından çekme CSS kodunu kendiniz kazmadan.

CSSPeeper size bile izin verir Dahili renk seçiciyle ilgili renkleri seçin ve renk şeması jeneratörü. Sayfalardan görüntüleri dışa aktarabilir, kendi renk şemalarınızı oluşturabilir ve bunları kendi örneklerinize uygulayın Photoshop veya Sketch ile.

Ben öncelikle tasarımcılar için bu uzantıyı öner geliştiriciler yerine, ham CSS'yi çeken ve kodu okunması kolay veri bölümlerine dönüştüren, tasarımcı dostu bir eklenti olduğu için.

Ancak bu eklenti geliştiricilere de yardımcı olabilir! Bu gerçekten bir tüm CSS türleri için güçlü saha inceleme aracı.

Ne yapabileceği hakkında daha fazla bilgi için CSSPeeper anasayfasına göz atın. Ana sayfada ayrıca Chrome mağazasına bir bağlantı bulunur, böylece eklentiyi ücretsiz olarak yükleyebilir ve bir deneme çalışması için çıkarabilirsiniz.