Panel Lapisan: Jelajahi lapisan situs Anda

Dale St. Marthe

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.
• Menetapkan 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 Show Layers panel, 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 diluaskan. Hierarki ini diperbarui saat Anda membuka halaman. Lapisan diidentifikasi oleh pemilih CSS atau dengan angka, diikuti dengan dimensi lapisan dalam piksel.

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

• Pemilih lapisan.
• Dimensi lapisan, dalam piksel.
• Ikon yang mewakili 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 dan tarik untuk bergerak di 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 menetapkan 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 Pecahkan pada, lalu pilih Perubahan sub-pohon, Perubahan atribut, atau Penghapusan node.

Temukan daftar titik henti sementara perubahan DOM di:

• Tab Elemen > Titik Henti Sementara DOM.
• 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 lapisan dari hierarki lapisan.
3. Klik Paint Profiler di bagian bawah panel Details. Perhatikan bahwa tidak semua lapisan akan memiliki opsi ini.

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

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

Mengidentifikasi elemen scroll yang lambat

Beberapa situs menggunakan JavaScript untuk mendeteksi peristiwa scroll atau sentuh pada elemen dengan cara yang dapat memengaruhi kecepatan scroll secara negatif. 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.