CSS Denetçisi, bir web sayfasındaki herhangi bir öğenin üzerine gelerek hesaplanmış CSS özelliklerini anında görmenizi sağlayan güçlü ve ücretsiz bir geliştirici aracıdır. İnceleme panelini yerinde kilitlemek için tıklayın, stilleri canlı olarak düzenleyin ve değişikliklerinizin sayfada gerçek zamanlı olarak güncellenmesini izleyin — hepsi tarayıcı DevTools'unu açmadan.
İster bir düzen sorununu ayıklıyor, ister beğendiğiniz bir tasarımı tersine mühendislikle çözüyor, ister boşluk ve tipografi değerlerini hızlıca kontrol ediyor olun, CSS Denetçisi temiz ve yüzen bir panelde ihtiyacınız olan her şeyi sunar. Tarayıcı DevTools'undan farklı olarak yolunuzdan çekilir — sabitlenmiş paneller yok, yeniden boyutlandırılmış görüntüleme alanı yok. Sadece üzerine gelin, tıklayın ve inceleyin. Araç, yalnızca yazılmış CSS'i değil, hesaplanmış stilleri (tarayıcının gerçekten oluşturduğu) gösterir. Bu, miras alma, özgüllük ve kaskat çözümlendikten sonra gerçek değerleri gördüğünüz anlamına gelir — kullanıcıların ekranda gördüklerini etkileyen aynı değerleri.
Tam hesaplanmış CSS'ini anında görmek için herhangi bir öğenin üzerine gelin — yazı tipi ailesi, yazı tipi boyutu, satır yüksekliği, renk, arka plan, dolgu, kenar boşluğu, kenarlık, köşe yuvarlatma, görüntüleme türü, konum, z-index ve daha fazlası dahil. Öğeler arasında hareket ettikçe özellikler gerçek zamanlı olarak güncellenir.
Yüzen paneli yerinde kilitlemek için herhangi bir öğeye tıklayın. Bu, sayfayı kaydırmanıza, diğer araçlarla etkileşim kurmanıza veya faremi uzaklaştırdığınızda panel kaybolmadan uzun özellik listelerini dikkatlice okumanıza olanak tanır.
Paneldeki herhangi bir CSS değerini doğrudan düzenlemek için çift tıklayın. Renkleri değiştirin, boşlukları ayarlayın, yazı tiplerini değiştirin — değişiklikleriniz sayfaya anında uygulanır. Gerçek kod yazmadan önce hızlı görsel deneyler için mükemmeldir.
Tek bir özelliği (örn. "color: #333") veya tüm stil bloğunu tek tıkla panoya kopyalayın. Kopyalanan çıktı, stil sayfanıza veya bileşeninize yapıştırmaya hazır temiz, biçimlendirilmiş CSS'tir.
Öğenin tam kutu modelini görün — içerik alanı, dolgu, kenarlık ve kenar boşluğu — her taraf için piksel değerleriyle görsel olarak görüntülenir. Asimetrik boşlukları veya beklenmeyen kenar boşluklarını anında fark edin.
Öğenin genişliğini, yüksekliğini ve sayfadaki konumunu (üst, sol koordinatlar) görüntüleyin. Sınırlayıcı kutu yarı saydam bir kaplama ile vurgulanır, böylece öğenin tam olarak ne kadar alan kapladığını görebilirsiniz.
CSS Denetçisi, 40'tan fazla CSS özelliği için kategoriye göre düzenlenmiş hesaplanmış değerleri gösterir:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorHizalanmamış öğelerin üzerine gelerek dolgu, kenar boşluğu ve konum değerlerini anında görün. Tarayıcı DevTools panellerini karıştırmadan soruna neden olan tam özelliği bulun.
Beğendiğiniz herhangi bir web sitesini ziyaret edin ve tipografisini, boşluklarını ve renk seçimlerini inceleyin. Kendi projelerinizde referans veya başlangıç noktası olarak kullanmak için tam CSS değerlerini kopyalayın.
Kod yazmadan önce sayfadaki görsel değişiklikleri test etmek için canlı düzenlemeyi kullanın. Farklı yazı tipi boyutları, renkler veya boşluk değerleri deneyin ve sonucu anında görün.
Tasarım incelemeleri sırasında, uygulanan tasarımın maket ile eşleşip eşleşmediğini hızla doğrulayın. Ayrı bir araca geçmeden tam piksel değerlerini, yazı tipi boyutlarını ve renkleri kontrol edin.
Mevcut bir tasarımla eşleşmesi gereken yeni bir bileşen mi oluşturuyorsunuz? Referans öğeyi inceleyin, tüm CSS özelliklerini kopyalayın ve bileşeninizin temel stilleri olarak yapıştırın.
DevSuite Pro yüzen yuvasını (her web sayfasında görünür) açın ve CSS Denetçisi simgesine tıklayın. Araç hemen etkinleşir — inceleme modunun aktif olduğunu gösteren ince bir imleç değişikliği göreceksiniz.
Farenizi sayfadaki herhangi bir öğenin üzerine getirin. İmlecinizin yanında, öğenin etiket adını, sınıflarını, boyutlarını ve hesaplanmış CSS özelliklerini gösteren yüzen bir panel belirir. Öğe, sınırlarını gösteren renkli bir kaplama ile vurgulanır.
Ayrıntılı olarak incelemek istediğiniz öğeyi buldunuz mu? Üzerine tıklayın. Panel yerinde kilitlenir ve farenizi hareket ettirdiğinizde kaybolmaz. Artık tüm özelliklerde gezinebilir, değerleri kopyalayabilir veya düzenlemeye başlayabilirsiniz.
Düzenleme moduna girmek için kilitli paneldeki herhangi bir CSS değerine çift tıklayın. Yeni bir değer yazın (örn. "16px" yerine "20px") ve Enter'a basın. Sayfa anında güncellenir ve kodunuza işlemeden önce değişiklikleri önizlemenize olanak tanır.
Herhangi bir özelliği kopyalamak için yanındaki kopyalama simgesine tıklayın veya tüm özellikleri tek seferde almak için panelin altındaki "Tüm CSS'i Kopyala" düğmesini kullanın. Doğrudan CSS dosyanıza veya bileşen stil sayfanıza yapıştırın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.