Menemukan masalah terkait performa rendering

Sofia Emelianova
Sofia Emelianova
Kayce Basques
Kayce Basques

Temukan masalah performa rendering dengan referensi opsi terkait performa di tab Rendering.

Menandai area yang dicat ulang dengan flash cat

Jika opsi ini diaktifkan, Chrome akan berkedip hijau setiap kali proses pengecatan ulang terjadi.

Untuk melihat area yang sedang dicat ulang:

  1. Buka tab Rendering di demo ini dan centang Paint flashing.
  2. Amati proses pengecatan ulang yang ditandai dengan warna hijau.
Flash Paint

Jika, di halaman lain, Anda melihat seluruh layar berkedip hijau atau area layar yang menurut Anda tidak seharusnya dicat, pertimbangkan untuk menyelidiki lebih lanjut.

Menyoroti wilayah pergeseran tata letak

Pergeseran tata letak menyebabkan pengecatan ulang yang tidak terduga dan tidak hanya mengganggu, tetapi juga berbahaya.

Screencast yang menggambarkan bagaimana ketidakstabilan tata letak dapat berdampak negatif terhadap pengguna.

Untuk melihat lokasi dan waktu pergeseran tata letak di halaman:

  1. Buka tab Rendering dan centang Layout Shift Regions.

  2. Muat ulang halaman. Area pergeseran tata letak ditandai dengan warna ungu.

Pergeseran tata letak

Melihat lapisan dan kartu dengan batas lapisan

Gunakan Batas Lapisan untuk melihat overlay batas lapisan dan kartu di bagian atas halaman.

Untuk mengaktifkan batas lapisan:

  1. Buka tab Rendering dan centang Layer Borders.
  2. Amati batas lapisan berwarna oranye dan olive serta ubin berwarna cyan.