CSS Denetçisi

Bir düzen (layout) sorununu ayıklıyor, beğendiğiniz bir tasarımı tersine mühendislikle inceliyor ya da boşluk ve tipografi değerlerini hızlıca kontrol ediyor olun, CSS Inspector ihtiyacınız olan her şeyi temiz, yüzen (floating) bir panelde sunar. Tarayıcının DevTools'undan farklı olarak işinize karışmaz — sabitlenmiş paneller yoktur, görüntü alanı yeniden boyutlandırılmaz. Sadece üzerine gelin, tıklayın ve inceleyin. Araç, yalnızca yazılmış CSS'i değil, hesaplanmış stilleri (browser'ın gerçekte render ettiği değerleri) gösterir. Bu, inheritance, specificity ve cascade çözümlendikten sonraki gerçek değerleri görmeniz anlamına gelir — kullanıcıların ekranda gördüğünü etkileyen aynı değerler.

Bir öğeyi incelemek sayfanın kendisinde asla reflow veya repaint tetiklemez, bu yüzden scroll konumunu, animasyonları ya da JavaScript durumunu bozma endişesi olmadan özgürce keşfedebilirsiniz. ::before ve ::after gibi pseudo-element'ler de desteklenir — üst öğenin üzerine gelin, panel oluşturulan içeriğin stillerini öğenin kendi stillerinden ayrı olarak gösterir. CSS custom property'leri (değişkenler) nihai hesaplanmış değerlerine çözümlenir, ancak panel size bu değeri üreten değişken adını da gösterir; böylece bir renk veya boşluk değerini sadece ham bir piksel sayısı olarak görmek yerine, kaynağındaki design-token'a kadar takip edebilirsiniz.

Günlük kullanımda çoğu geliştirici CSS Inspector'ı bir oturumda onlarca kez kullanır — bir margin'in neden collapse olduğunu kontrol etmek, bir hex kodunu stylesheet'e kopyalamadan önce doğrulamak veya bir media query breakpoint'inin gerçekten beklenen stilleri uygulayıp uygulamadığını teyit etmek için. Tarayıcı genelinde bir mod yerine yüzen bir panel olduğundan, kendi kod editörünüzü veya bir tasarım dosyasını kontrol etmek için sekmeler arasında geçiş yaparken paneli açık tutabilir, ardından yerinizi kaybetmeden aynı üzerine gelinen öğeye doğrudan geri dönebilirsiniz.