Yalnızca Anahat Modu, bir web sayfasındaki her HTML öğesine renk kodlu kenarlık anahatları ekleyerek sayfanın düzen yapısının anında röntgen görünümünü sunar. Her div, bölüm, başlık, paragraf ve düğmenin tam olarak nerede bulunduğunu görün — dolguları, kenar boşlukları ve iç içe geçme ilişkileri dahil.
Bir sayfanın düzenini anlamak, genellikle CSS sorunlarını ayıklamanın ilk adımıdır. O fazladan boşluk dolgudan mı yoksa kenar boşluğundan mı kaynaklanıyor? Bir öğe, kısıtlanmamış bir alt öğe nedeniyle beklenenden daha mı geniş? Çakışan konumlar nedeniyle iki öğe üst üste mi biniyor? Yalnızca Anahat Modu, sayfadaki her öğenin etrafına renkli kenarlıklar çizerek bu soruları anında yanıtlar. Tarayıcı DevTools'undan (aynı anda yalnızca bir öğeyi vurgular) farklı olarak, bu araç her şeyi aynı anda çizer — size tam resmi verir. Her HTML öğe türü farklı bir renk alır: başlıklar mavi, nav öğeleri sarı, ana içerik yeşil, paragraflar pembe, düğmeler camgöbeği vb. Renk kodlaması, yapısal kalıpları tespit etmeyi ve DOM okumadan öğeleri bir bakışta tanımlamayı kolaylaştırır.
Her öğedeki anahatları tek tıkla değiştirin — yapılandırma yok, ayarlar paneli yok. Tüm kenarlıkları görmek için bir kez tıklayın, kaldırmak için tekrar tıklayın. Herhangi bir web sayfasında düzen yapısını görselleştirmenin en hızlı yolu.
Farklı HTML öğeleri, anında görsel tanımlama için farklı anahat renkleri alır. Başlıklar mavi, navigasyon sarı, ana içerik yeşil, başlıklar mor, paragraflar pembe, düğmeler camgöbeği, div'ler gri. Öğe türlerini metni okumadan tanımlayabilirsiniz.
Anahatlar görünmez CSS sorunlarını görünür kılar. Boşluk yaratan beklenmeyen kenar boşluklarını, öğeleri beklenenden daha geniş iten dolguyu, yatay kaydırma çubuklarına neden olan taşmayı veya sıfır yükseklik kaplayan daraltılmış öğeleri tespit edin. Her kutu sınırı görünür hale gelir.
İç içe geçmiş anahatlar, DOM'un ebeveyn-çocuk yapısını ortaya çıkarır. Öğelerin ne kadar derin iç içe geçmiş olduğunu, hangi kapsayıcının hangi içeriği sardığını ve her iç içe geçme seviyesinin sınırlarının nerede düştüğünü bir bakışta görün. Karmaşık grid ve flex düzenlerini anlamak için paha biçilmez.
Herhangi bir web sayfasında etkinleştirin — kendi projeleriniz, müşteri siteleri, rakip sayfalar veya tasarım referansları. Anahatlar CSS enjeksiyonu yoluyla uygulanır ve DOM yapısını değiştirmez veya JavaScript davranışını etkilemez.
Anahatlar CSS outline (kenarlık değil) kullanılarak çizilir, bu da öğenin kutu modeli boyutlarına eklenmedikleri anlamına gelir. Sayfa düzeni tam olduğu gibi kalır — anahatlar tamamen görseldir ve herhangi bir yeniden akışa neden olmaz.
Yalnızca Anahat Modu covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsBölümler arasındaki o gizemli boşluk mu? Anahatları açın ve alt öğedeki kenar boşluğundan mı, üst kapsayıcıdaki dolgudan mı yoksa bilmediğiniz boş bir div'den mi kaynaklandığını anında göreceksiniz. DevTools'ta dakikalar süren şey, Anahat Moduyla saniyeler sürer.
Anahatlar etkinken tarayıcı pencerenizi yeniden boyutlandırarak düzenin kesme noktaları arasında nasıl yeniden aktığını izleyin. Hangi öğelerin yığıldığını, hangilerinin taştığını ve grid veya flexbox yapısının nerede değiştiğini görün — hepsi bir bakışta.
Çok fazla iç içe geçmiş div mi? Gereksiz sarmalayıcı öğeler mi? Anahat Modu, aşırı iç içe geçmeyi görsel olarak belirgin hale getirir — basit içerik etrafında 5+ eş merkezli anahat görürseniz, biçimlendirme basitleştirilebilir. Ön uç PR'ların kod incelemesi için harika.
Ana sayfanızda, ardından bir alt sayfada anahatları etkinleştirin. Aynı düzen yapısını paylaşıyorlar mı? Kenar boşlukları ve bölüm genişlikleri tutarlı mı? Anahatlar yapısal tutarlılığı (veya tutarsızlığı) anında görünür kılar.
Öğrencilere HTML öğelerinin nasıl kutu oluşturduğunu, kutu modelinin dolgu ve kenar boşluklarıyla nasıl çalıştığını ve iç içe geçmenin sayfa hiyerarşisini nasıl oluşturduğunu gösterin. Anahat Modu soyut kavramları görünür, etkileşimli gösterilere dönüştürür.
DevSuite Pro yüzen yuvasını açın ve Yalnızca Anahat Modu simgesine tıklayın. Sayfadaki her HTML öğesi anında renkli bir anahat kenarlığı alır.
Her öğe türünün farklı bir rengi vardır. Yapısal öğeler için mavi (header, footer, section), ana içerik alanları için yeşil, başlıklar için mor, paragraflar için pembe, düğmeler ve giriş alanları için camgöbeği, navigasyon için sarı ve genel div ve span'lar için gri.
Beklenmeyen boşlukları (kenar boşluklarının neden olduğu), kapsayıcılarının dışına taşan öğeleri (taşma), asimetrik boşlukları (tutarsız dolgu) veya derin iç içe geçmiş sarmalayıcıları (gereksiz div iç içe geçmesi) arayın. Hepsi anında görünür hale gelir.
Anahat Modunu başlangıç noktası olarak kullanın, ardından belirlediğiniz öğelerde belirli değerleri kontrol etmek için CSS Denetçisine geçin veya anahatlı öğeler arasındaki tam boşluğu doğrulamak için Mesafe Ölçüyü kullanın.
Tüm anahatları kaldırmak ve normal sayfa görünümüne dönmek için Anahat Modu simgesine tekrar tıklayın. Temizlik gerekmez — saf bir değiştirmedir.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.