Sayfa Anahatlayıcısı, herhangi bir web sayfasının tam DOM yapısını görsel bir ağaç kaplaması olarak — doğrudan sayfanın kendisine — sunar. Her HTML öğesi, etiket adını gösteren renkli bir etiket alır ve iç içe geçme derinliği girintilendirme ve bağlantı çizgileri aracılığıyla ortaya çıkarılır. Bu, DevTools'un Öğeler panelini görüntülemek gibidir, ancak canlı sayfaya yansıtılmıştır.
Tarayıcı DevTools, DOM'u görsel düzenden bağlantısız bir yan panelde metin ağacı olarak gösterir. Sayfa Anahatlayıcısı, DOM yapısını doğrudan sayfaya yansıtarak bu boşluğu kapatır. Her öğe, öğenin sol üst köşesinde konumlandırılmış, etiket adını (div, section, nav, h1, p, button vb.) gösteren küçük renkli bir rozet alır. İç içe geçmiş öğeler görsel olarak girintili hale getirilir ve ağaç benzeri yapı anında belirgindir. Bu, bir sayfanın nasıl oluşturulduğunu bir bakışta anlamayı inanılmaz derecede kolaylaştırır — başlığın beş anchor etiketi olan bir nav içerdiğini, ana içeriğin her biri makale içeren üç bölüm öğesine sahip olduğunu ve footer'ın bir logo div ve link listesini sardığını görebilirsiniz. Hepsi DevTools açmadan veya ham HTML kaynak kodunu okumadan.
Sayfadaki her görünür öğe, HTML etiket adını gösteren renkli bir etiket rozet kaplaması alır. En dış html ve body öğelerinden tek tek spanlara, bağlantılara ve düğmelere kadar — hiçbir şey gizlenmez. Kaplama, tam öğe hiyerarşisini görsel bir harita olarak işler.
Her öğe türü, rozeti için farklı bir arka plan rengi alır. Yapısal öğeler (header, main, footer) mavi, navigasyon kehribar, başlıklar mor, paragraflar gri, bağlantılar sarı, düğmeler camgöbeği, resimler pembe renktedir. Metni okumadan öğe türlerini renkle tanımlayabilirsiniz.
Karşılık gelen öğeyi tam boyutlarını (piksel cinsinden genişlik × yükseklik) gösteren yarı saydam bir kaplama ile vurgulamak için herhangi bir etiket rozetinin üzerine gelin. Öğe sınırı çizilir ve rozet daha belirgin hale gelir — hangi rozetin hangi öğeye ait olduğunu tanımlamayı kolaylaştırır.
Derin iç içe geçmiş öğeler sol kenardan daha fazla girintili hale getirilir, bu da iç içe geçme ilişkilerini anında görünür kılar. Bir sayfanın çok fazla sarmalayıcı div'e sahip olup olmadığını (5+ seviye derinlikte) veya temiz, sığ bir yapıya sahip olup olmadığını bir bakışta görün. Bağlantı çizgileri ebeveyn-çocuk ilişkilerini gösterir.
Kaplamalar mutlak olarak konumlandırılır ve sayfa düzenini, kaydırmayı veya JavaScript davranışını etkilemez. Rozet etiketleri küçük ve yarı saydamdır, böylece sayfa içeriğini alttan görebilirsiniz. Normale dönmek için anında kapatın.
Kapsayıcı öğenin rozetine tıklayarak iç içe rozetleri gizleyerek alt öğelerini daraltın. Tüm sayfanın DOM ağacına boğulmadan belirli bir bölüme odaklanmak için yararlıdır. Genişletmek için tekrar tıklayın.
Karmaşık bir web sayfasına mı düştünüz ve nasıl oluşturulduğunu anlamanız mı gerekiyor? Sayfa Anahatlayıcısı size tüm DOM hiyerarşisini bir bakışta gösterir — hangi bölümlerin hangi içeriği içerdiğini, navigasyonun nasıl yapılandırıldığını ve ana içerik alanının nerede başlayıp bittiğini.
Aşırı div iç içe geçmesi CSS yazmayı zorlaştırır ve sayfaları daha yavaş oluşturur. Basit bir metin bloğu için üst üste yığılmış 6+ seviye renkli rozet görürseniz, biçimlendirme basitleştirilmelidir. Sayfa Anahatlayıcısı bunu anında belirgin kılar.
Sayfa uygun semantik öğeleri kullanıyor mu? Header, nav, main, article, section ve footer rozetlerini arayın. Her şey sadece div öğeleriyse, sayfa semantik yapıdan yoksundur — bu da erişilebilirliğe, SEO'ya ve sürdürülebilirliğe zarar verir.
Herhangi bir iyi oluşturulmuş web sitesini (Stripe, Linear, Vercel) ziyaret edin ve ön uç ekiplerinin HTML'lerini nasıl yapılandırdığını görmek için Sayfa Anahatlayıcısını etkinleştirin. Üretim sayfalarındaki gerçek dünya DOM yapılarını görerek düzen kalıplarını öğrenin.
Hangi öğelerin var olduğunu ve nerede olduklarını belirlemek için önce Sayfa Anahatlayıcısını kullanın, ardından belirlediğiniz belirli öğeleri daha derinlemesine incelemek için CSS Denetçisi veya Mesafe Ölçüye geçin.
DevSuite Pro yüzen yuvasını açın ve Sayfa Anahatlayıcısı simgesine tıklayın. Araç sayfa DOM'unu hemen tarar ve her görünür öğede etiket rozetleri oluşturur.
Renkli rozetler her öğenin sol üst köşesinde etiket adını (div, section, h1, p, vb.) gösterir. İç içe geçme yapısı girintilendirme ve rozet konumlandırması aracılığıyla görünür.
Karşılık gelen öğeyi vurgulamak için farenizi herhangi bir rozetin üzerine getirin. Yarı saydam bir kaplama öğenin sınırlarını ve boyutlarını gösterir. Bu, soyut etiket adını sayfadaki görsel konumuna bağlar.
Alt öğelerinin rozetlerini daraltmak için kapsayıcı rozetine tıklayın. Bu, derin iç içe geçmiş öğelerden kaynaklanan görsel karmaşa olmadan belirli sayfa alanlarına odaklanmanızı sağlar.
Tüm kaplamaları kaldırmak ve normal sayfa görünümüne dönmek için yuvadaki Sayfa Anahatlayıcısı simgesine tıklayın. Arkada iz kalmaz.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
