Panel Lapisan: Jelajahi lapisan situs Anda

Panel Lapisan membantu Anda memahami komposisi situs dan cara browser merender konten. Analisis diagram 3D situs Anda untuk mengidentifikasi masalah rendering, memperbaiki bug scroll, dan mengoptimalkan animasi.

Ringkasan

Gunakan panel Lapisan untuk melakukan hal berikut:

• Melihat lapisan dokumen.
• Memeriksa lapisan dokumen.
• Menyetel titik henti sementara perubahan DOM.
• Melihat informasi Paint Profiler.
• Identifikasi elemen scroll yang lambat.

Membuka panel Lapisan

Untuk membuka panel Lapisan, ikuti langkah-langkah berikut:

1. Buka DevTools.
2. Buka Menu perintah dengan menekan:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. Mulai ketik Layers, pilih Tampilkan panel Layers, lalu tekan Enter.

Atau, di sudut kanan atas, pilih more_vert Opsi lainnya > Alat lainnya > Panel lapisan.

Selain itu, panel Performa memungkinkan Anda melihat lapisan setiap frame rekaman di tab Lapisan. Untuk mempelajari lebih lanjut, lihat Melihat informasi lapisan.

Melihat lapisan dokumen

Bagian paling kiri panel Layers mencantumkan semua lapisan dokumen yang dirender dalam hierarki yang dapat diperluas. Hierarki ini diperbarui saat Anda menavigasi halaman. Lapisan diidentifikasi oleh pemilih CSS atau angka, diikuti dengan dimensi lapisan dalam piksel.

Arahkan kursor ke lapisan untuk menandainya di halaman web dan di diagram. Tooltip akan muncul di halaman dengan informasi berikut:

• Pemilih lapisan.
• Dimensi lapisan, dalam piksel.
• Ikon yang merepresentasikan petak atau fleksibel CSS, jika relevan.

Memeriksa lapisan dokumen

Klik lapisan untuk melihat informasi selengkapnya di panel Details.

Bergantung pada lapisan, informasi berikut akan muncul:

• Ukuran
• Menggabungkan Alasan
• Estimasi memori
• Jumlah cat
• Area scroll lambat
• Batasan posisi melekat

Diagram menunjukkan cara lapisan ditumpuk dan disusun untuk halaman ini, termasuk elemen yang diposisikan di luar area pandang.

Untuk memindahkan diagram:

• Gunakan WASD untuk memindahkan diagram. Tekan W untuk menggeser ke atas, A untuk menggeser ke kiri, S untuk menggeser ke bawah, dan D untuk menggeser ke kanan.
• Klik Mode Geser drag_pan atau tekan X lalu tarik untuk bergerak sepanjang sumbu X dan Y.
• Klik Mode Putar 360 atau tekan V dan tarik untuk memutar sepanjang sumbu Z.
• Klik Reset Transform zoom_in_map atau tekan 0 untuk mereset diagram ke posisi aslinya.
• Perbesar dengan menekan shift + + atau roda mouse ke atas.
• Perkecil dengan menekan shift + - atau roda mouse ke bawah.

Untuk melihat elemen DOM yang sesuai dengan lapisan di panel Elemen, klik kanan lapisan di diagram atau di hierarki lapisan, lalu klik Tampilkan di panel Elemen.

Selain itu, panel Layers menyembunyikan lapisan tertentu yang tidak menghosting atau menggambar konten. Untuk menampilkan lapisan ini, klik kanan hierarki lapisan, lalu pilih Tampilkan lapisan internal.

Menetapkan titik henti sementara perubahan DOM

Panel Layers memungkinkan Anda menyetel titik henti sementara perubahan DOM.

Untuk menetapkan titik henti sementara perubahan DOM, ikuti langkah-langkah berikut:

1. Klik kanan lapisan di hierarki lapisan.
2. Arahkan kursor ke Break on, lalu pilih Subtree modifications, Attribute modifications, atau Node removal.

Temukan daftar titik henti sementara perubahan DOM di:

• Elements > Tab DOM Breakpoints.
• Bagian Sumber > Titik Henti Sementara DOM yang dapat diciutkan.

Untuk mempelajari lebih lanjut jenis titik henti sementara, lihat Jenis titik henti sementara perubahan DOM.

Melihat informasi Paint Profiler

Panel Lapisan memungkinkan Anda melihat informasi cat mendetail tentang lapisan, dan merender konten halaman web ke diagram 3D.

Untuk mengaktifkan Paint Profiler, ikuti langkah-langkah berikut:

1. Centang kotak check_box Paints di panel tindakan.
2. Pilih sebuah lapisan dari hierarki lapisan.
3. Klik Paint Profiler di bagian bawah panel Details. Perhatikan bahwa tidak semua lapisan memiliki opsi ini.

Tab Profiler akan terbuka dengan data cat dan histogram yang mewakili distribusi biaya cat.

Mengaktifkan Cat juga akan merender sebagian besar konten halaman web ke diagram.

Mengidentifikasi elemen scroll lambat

Beberapa situs menggunakan JavaScript untuk mendeteksi peristiwa scroll atau sentuhan pada elemen dengan cara yang dapat berpengaruh negatif terhadap kecepatan scroll. Untuk mengidentifikasi lapisan yang berisi pemroses peristiwa yang terkait dengan scroll yang dapat menghambat performa, klik kotak centang check_box Slow scroll rects.

Lapisan yang dapat menyebabkan scroll lambat ditandai dengan warna merah muda.