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

Dale St. Marthe

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

Genel Bakış

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

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

Katmanlar panelini açma

Katmanlar panelini açmak için aşağıdaki adımları uygulayın:

1. DevTools'u açın.
2. Aşağıdaki tuşlara basarak Komut menüsünü açın:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Denetleyici+Ü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.

Ayrıca Performans paneli, bir kayda ait her karenin katmanlarını 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österilir:

• Katmanın seçicileri.
• Katmanın piksel cinsinden boyutları.
• Gerektiği durumlarda CSS grid'i veya flex'i temsil eden bir simge.

Belge 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ştirilme Nedenleri
• Bellek tahmini
• Boyanan katman sayısı
• Yavaş kaydırma bölgeleri
• Yapışkan pozisyon sınırı

Şemada, görüntü alanının dışında konumlandırılan öğeler dahil olmak üzere katmanların bu sayfa için nasıl yığıldığı ve düzenlendiği gösterilmektedir.

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 tuşlarına 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 Z ekseni boyunca döndürmek için V tuşuna basıp sürükleyin.
• Dönüşüm'ü Sıfırla'yı zoom_in_map tıklayın veya şemayı orijinal konumuna sıfırlamak için 0 tuşuna basın.
• Üst karakter + + tuşlarına veya fare tekerleğini yukarı kaydırarak yakınlaştırın.
• Üst karakter + - veya fare tekerleğini aşağı basarak uzaklaştırın.

Bir katmanın Öğeler panelinde ilgili DOM öğesini görmek için diyagramdaki 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 için kesme noktaları ayarlama

Katmanlar paneli, DOM değişikliği kesme noktaları ayarlamanızı sağlar.

DOM değişiklik durak noktası ayarlamak için aşağıdaki adımları uygulayın:

1. Katman ağacında bir katmanı sağ tıklayın.
2. Fareyle Duraklat'ın üzerine gelip Alt ağaç değişiklikleri, Özellik değişiklikleri veya Düğüm kaldırma'yı seçin.

DOM değişiklik kesme noktalarının listesini şu konumlarda bulabilirsiniz:

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

Kesme noktası türleri hakkında daha fazla bilgi edinmek için DOM değişiklik kesme noktası türleri başlıklı makaleyi inceleyin.

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ında Boya Profili'ni tıklayın. Bu seçenek tüm katmanlarda bulunmaz.

Boya kayıtları ve boya maliyeti dağılımını gösteren bir histogram içeren Profil Oluşturucu sekmesi açılır.

Boya'yı etkinleştirmek, web sayfasının içeriğinin çoğunu da şemada oluşturur.

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.