Katmanlar paneli: Web sitenizin katmanlarını keşfedin

Dale St. Marthe

Katmanlar paneli, web sitenizin bileşimini ve tarayıcının içeriği nasıl oluşturduğunu anlamanıza yardımcı olur. Oluşturma sorunlarını belirlemek, kaydırma hatalarını düzeltmek ve animasyonları optimize etmek için web sitenizin 3D şemasını analiz edin.

Genel Bakış

Aşağıdakileri yapmak için Katmanlar panelini kullanın:

• Doküman katmanlarını görüntüleyin.
• Doküman katmanlarını inceleyin.
• DOM değişiklik ayrılma noktaları ayarlayın.
• Boyama Profil Aracı bilgilerini görüntüleyin.
• Yavaş kaydırılan öğeleri tanımlama

Katmanlar panelini aç

Katmanlar panelini açmak için şu adımları izleyin:

1. Geliştirici Araçları'nı açın.
2. Aşağıdaki tuşlara basarak Komut menüsünü açın:
   • macOS: Komut+Üst Karakter+P
   • Windows, Linux, ChromeOS: Control+Üst Karakter+P
3. Layers yazmaya başlayın, Katmanlar panelini göster'i seçin ve Enter tuşuna basın.

Alternatif olarak, sağ üst köşeden more_vert Diğer seçenekler > Diğer araçlar > Katmanlar paneli'ni seçin.

Performans paneli, bir kaydın her karesinin katmanlarını da Katmanlar sekmesinde görüntülemenize olanak tanır. Daha fazla bilgi için Katman bilgilerini görüntüleme başlıklı makaleyi inceleyin.

Belge katmanlarını görüntüleme

Katmanlar panelinin en sol bölümünde, dokümanın oluşturulmuş tüm katmanları genişletilebilir bir ağaçta listelenir. Bu ağaç, siz sayfada gezindikçe güncellenir. Katmanlar, CSS seçicileriyle veya bir sayı ve ardından katmanın piksel cinsinden boyutlarıyla tanımlanır.

İmleci bir katmanın üzerine getirerek web sayfasında ve şemada vurgulayabilirsiniz. Sayfada aşağıdaki bilgileri içeren bir ipucu görünür:

• Katmanın seçicileri.
• Katmanın piksel cinsinden boyutları.
• Uygun olduğunda CSS ızgarasını veya esnekliğini temsil eden bir simge.

Doküman katmanlarını inceleme

Ayrıntılar bölmesinde daha fazla bilgi görüntülemek için bir katmanı tıklayın.

Katmana bağlı olarak aşağıdaki bilgiler gösterilir:

• Boyut
• Birleştirme Nedenleri
• Bellek tahmini
• Boyama sayısı
• Yavaş kaydırma bölgeleri
• Yapışkan pozisyon sınırı

Şema, görüntü alanının dışına yerleştirilen öğeler dahil olmak üzere, bu sayfa için katmanların nasıl yığıldığını ve düzenlendiğini gösterir.

Diyagramı taşımak için:

• Diyagramı taşımak için WASD tuşlarını kullanın. Yukarı kaydırmak için W, sola kaydırmak için A, aşağı kaydırmak için S ve sağa kaydırmak için D düğmesine basın.
• Kaydırma modunu drag_pan tıklayın veya X ve Y eksenleri boyunca hareket etmek için X tuşuna basıp sürükleyin.
• Döndürme Modu'nu 360 tıklayın veya V tuşuna basıp Z ekseni boyunca döndürmek için sürükleyin.
• Dönüşüm işlemini sıfırla simgesini zoom_in_map tıklayın veya şemayı orijinal konumuna sıfırlamak için 0 tuşuna basın.
• Üst karakter + + veya fare tekerleğini yukarıya basarak yakınlaştırın.
• Üst karakter + - veya fare tekerleği aşağı tuşlarına basarak uzaklaştırın.

Öğeler panelinde bir katmana karşılık gelen DOM öğesini görmek için şemadaki veya katman ağacındaki bir katmanı sağ tıklayıp Öğeler panelinde göster'i tıklayın.

Ayrıca Katmanlar paneli, içerik barındırmayan veya çizmeyen belirli katmanları gizler. Bu katmanları göstermek için katman ağacını sağ tıklayın ve Dahili katmanları göster'i seçin.

DOM değişikliği ayrılma noktalarını ayarla

Katmanlar paneli, DOM değişiklik ayrılma noktaları ayarlayabilmenizi sağlar.

DOM değişikliği ayrılma noktası ayarlamak için şu adımları uygulayın:

1. Katman ağacında bir katmanı sağ tıklayın.
2. Dökme açık seçeneğinin üzerine gelin, ardından Alt ağaç değişiklikleri, Özellik değişiklikleri veya Düğüm kaldırma'yı seçin.

DOM değişiklik ayrılma noktalarının listesini şurada bulabilirsiniz:

• Öğeler > DOM Ayrılma Noktaları sekmesi.
• Kaynaklar > DOM Ayrılma Noktaları daraltılabilir bölümü.

Ayrılma noktası türleri hakkında daha fazla bilgi edinmek için DOM değişiklik ayrılma noktası türleri bölümüne bakın.

Boyama Profil Aracı bilgilerini görüntüleme

Katmanlar paneli, bir katmanla ilgili ayrıntılı boya bilgilerini görüntülemenize ve web sayfasının içeriğini 3D şemaya oluşturmanıza olanak tanır.

Boya Profili'ni etkinleştirmek için aşağıdaki adımları uygulayın:

1. İşlem çubuğunda check_box Boyalar onay kutusunu işaretleyin.
2. Katman ağacından bir katman seçin.
3. Ayrıntılar bölmesinin alt kısmındaki Paint Profiler'ı tıklayın. Bu seçenek tüm katmanlarda bulunmaz.

Profiler sekmesi, boya kayıtları ve boya maliyeti dağılımını temsil eden bir histogramla açılır.

Boyalar etkinleştirildiğinde, web sayfası içeriğinin çoğu da diyagramda oluşturulur.

Yavaş kaydırılan öğeleri belirleme

Bazı web siteleri, öğelerdeki kaydırma veya dokunma etkinliklerini kaydırma hızlarını olumsuz yönde etkileyebilecek şekilde algılamak için JavaScript kullanır. Kaydırmayla ilgili performansı engelleyebilecek etkinlik dinleyicileri içeren katmanları belirlemek için check_box Yavaş kaydırma dikdörtgenleri onay kutusunu tıklayın.

Yavaş kaydırmaya neden olabilecek katmanlar pembe renkle vurgulanır.