CSS Değişkenlerini Denetleme Aracı
Browser Variable Helper, Chrome tarayıcıları için geliştirilmiş bir DevTools eklentisidir. Frontend geliştiricilere, herhangi bir web sayfasının CSS'ini denetleme imkanı sunarak, potansiyel sorunları belirlemeye yardımcı olur. Bu eklenti, hardcoded değerleri, fallback değerlerini ve tanımsız CSS değişkenlerini vurgulayarak, stil sayfalarındaki karmaşayı azaltmayı hedefler. Kullanıcılar, stil dosyalarını temizlemek, token tabanlı bir tasarım sistemi benimsemek veya beklenmeyen değişkenleri hata ayıklamak için bu aracı kullanabilirler.
Eklenti, DOM ağacında ve CSS panelinde görsel göstergeler sunarak, her bir sorunu renk kodlarıyla belirler ve açıklamalarla destekler. Kullanımı oldukça basittir; eklentiyi yükledikten sonra Chrome DevTools'u açarak "Browser Variable Helper" sekmesine geçiş yapabilir ve herhangi bir öğeyi tıklayarak stil bilgilerini inceleyebilirsiniz. Verilerin toplanmadığı ve iletilmediği, tüm analizlerin yerel olarak DevTools API'leri aracılığıyla yapıldığı belirtilmektedir.