Referensi fitur performa

Kayce Basques

Sofia Emelianova

Halaman ini adalah referensi komprehensif tentang fitur Chrome DevTools yang terkait dengan analisis performa.

Lihat Menganalisis performa runtime untuk tutorial terpandu tentang cara menganalisis performa halaman menggunakan Chrome DevTools.

Merekam performa

Anda dapat merekam performa runtime atau pemuatan.

Merekam performa runtime

Rekam performa runtime saat Anda ingin menganalisis performa halaman saat berjalan, bukan saat dimuat.

1. Buka halaman yang ingin Anda analisis.
2. Klik tab Performa di DevTools.

3. Klik Rekam .

   

4. Berinteraksi dengan halaman. DevTools merekam semua aktivitas halaman yang terjadi sebagai hasil dari interaksi Anda.

5. Klik Record lagi atau klik Stop untuk berhenti merekam.

Merekam performa pemuatan

Rekam performa pemuatan saat Anda ingin menganalisis performa halaman saat dimuat, bukan saat berjalan.

1. Buka halaman yang ingin Anda analisis.
2. Buka panel Performa di DevTools.

3. Klik Mulai membuat profil dan muat ulang halaman . DevTools pertama-tama membuka about:blank untuk menghapus screenshot dan rekaman aktivitas yang tersisa. Kemudian, DevTools akan merekam metrik performa saat halaman dimuat ulang, lalu otomatis menghentikan perekaman beberapa detik setelah pemuatan selesai.

   

DevTools akan otomatis memperbesar bagian rekaman tempat sebagian besar aktivitas terjadi.

Dalam contoh ini, panel Performa menampilkan aktivitas selama pemuatan halaman.

Mengambil screenshot saat merekam

Aktifkan kotak centang Screenshot untuk mengambil screenshot setiap frame saat merekam.

Lihat Melihat screenshot untuk mempelajari cara berinteraksi dengan screenshot.

Memaksa pembersihan sampah memori saat merekam

Saat Anda merekam halaman, klik Kumpulkan sampah pel untuk memaksa pembersihan sampah memori.

Menampilkan setelan perekaman

Klik Capture settings untuk mengekspos setelan lainnya yang terkait dengan cara DevTools merekam performa.

Menonaktifkan contoh JavaScript

Secara default, trek Utama dari rekaman menampilkan stack panggilan mendetail dari fungsi JavaScript yang dipanggil selama perekaman. Untuk menonaktifkan stack panggilan ini:

1. Buka menu Setelan pengambilan . Lihat Menampilkan setelan perekaman.
2. Aktifkan kotak centang Nonaktifkan Contoh JavaScript.
3. Ambil rekaman halaman.

Screenshot berikut menunjukkan perbedaan antara menonaktifkan dan mengaktifkan contoh JavaScript. Jalur Utama rekaman jauh lebih pendek jika pengambilan sampel dinonaktifkan, karena menghapus semua stack panggilan JavaScript.

Contoh ini menunjukkan rekaman dengan sampel JS yang dinonaktifkan.

Contoh ini menunjukkan rekaman dengan sampel JS yang diaktifkan.

Memperlambat jaringan saat merekam

Untuk membatasi jaringan saat merekam:

1. Buka menu Setelan pengambilan . Lihat Menampilkan setelan perekaman.
2. Tetapkan Network ke tingkat throttling yang dipilih.

Memperlambat CPU saat merekam

Untuk membatasi CPU saat merekam:

1. Buka menu Setelan pengambilan . Lihat Menampilkan setelan perekaman.
2. Tetapkan CPU ke tingkat throttling yang dipilih.

Throttling relatif terhadap kemampuan komputer Anda. Misalnya, opsi 2x slowdown membuat CPU Anda beroperasi 2 kali lebih lambat dari kemampuan biasanya. DevTools tidak dapat benar-benar menyimulasikan CPU perangkat seluler, karena arsitektur perangkat seluler sangat berbeda dengan desktop dan laptop.

Mengaktifkan statistik pemilih CSS

Untuk melihat statistik pemilih aturan CSS selama peristiwa Hitung Ulang Gaya yang berjalan lama:

1. Buka menu Setelan pengambilan . Lihat Menampilkan setelan perekaman.
2. Centang kotak Enable CSS selector stats.

Untuk mengetahui detail selengkapnya, lihat cara Menganalisis performa pemilih CSS selama peristiwa Hitung Ulang Gaya.

Mengaktifkan instrumentasi paint lanjutan

Untuk melihat instrumentasi cat mendetail:

1. Buka menu Setelan pengambilan . Lihat Menampilkan setelan perekaman.
2. Centang kotak centang Enable advanced paint instrumentation.

Untuk mempelajari cara berinteraksi dengan informasi cat, lihat Lapisan tampilan dan Profiler cat tampilan.

Menyimpan rekaman

Untuk menyimpan rekaman, klik kanan dan pilih Simpan Profil.

Memuat rekaman

Untuk memuat rekaman, klik kanan dan pilih Load Profile.

Menghapus rekaman sebelumnya

Setelah merekam, tekan Hapus rekaman untuk menghapus rekaman tersebut dari panel Performa.

Menganalisis rekaman performa

Setelah Anda mencatat performa runtime atau mencatat performa pemuatan, panel Performa akan memberikan banyak data untuk menganalisis performa dari peristiwa yang baru saja terjadi.

Menavigasi rekaman

Untuk memeriksa rekaman performa dengan cermat, Anda dapat memilih bagian rekaman, men-scroll diagram percik api yang panjang, memperbesar dan memperkecil, serta menggunakan breadcrumb untuk berpindah di antara tingkat zoom.

Memilih bagian rekaman

Di bawah panel tindakan Performa dan di bagian atas rekaman, Anda dapat melihat bagian Ringkasan linimasa dengan diagram CPU dan NET.

Untuk memilih bagian rekaman, klik lama, lalu tarik ke kiri atau kanan di Ringkasan linimasa.

Untuk memilih bagian menggunakan keyboard:

1. Fokuskan trek Utama atau trek tetangganya.
2. Gunakan tombol W, A, S, D untuk memperbesar, bergerak ke kiri, memperkecil, dan bergerak ke kanan.

Untuk memilih sebagian menggunakan trackpad:

1. Arahkan kursor ke bagian Ringkasan linimasa atau salah satu jalur (Utama dan jalur di sekitarnya).
2. Dengan menggunakan dua jari, geser ke atas untuk memperkecil, geser ke kiri untuk berpindah ke kiri, geser ke bawah untuk memperbesar, dan geser ke kanan untuk berpindah ke kanan.

Membuat breadcrumb dan berpindah antar-tingkat zoom

Ringkasan linimasa memungkinkan Anda membuat beberapa breadcrumb bertingkat secara berurutan, meningkatkan tingkat zoom, lalu beralih dengan bebas di antara tingkat zoom.

Untuk membuat dan menggunakan breadcrumb:

1. Di Ringkasan linimasa, pilih bagian rekaman.
2. Arahkan kursor ke pilihan, lalu klik tombol N ms zoom_in. Pilihan akan diperluas untuk mengisi Ringkasan linimasa. Rantai breadcrumb mulai dibuat di bagian atas Ringkasan linimasa.
3. Ulangi dua langkah sebelumnya untuk membuat breadcrumb bertingkat lainnya. Anda dapat terus menyusun breadcrumb bertingkat selama rentang pilihan lebih besar dari 5 milidetik.
4. Untuk beralih ke tingkat zoom yang dipilih, klik breadcrumb yang sesuai dalam rantai di bagian atas Ringkasan linimasa.

Untuk menghapus turunan breadcrumb, klik kanan breadcrumb induk, lalu pilih Hapus breadcrumb turunan.

Men-scroll flame chart yang panjang

Untuk men-scroll diagram nyala api yang panjang di jalur Main atau jalur di sekitarnya, klik dan tahan, lalu tarik ke arah mana pun hingga hal yang Anda cari terlihat.

Aktivitas penelusuran

Anda dapat menelusuri aktivitas di jalur Utama dan permintaan di jalur Jaringan.

Untuk membuka kotak penelusuran di bagian bawah panel Performa, tekan:

• macOS: Command+F
• Windows, Linux: Control+F

Contoh ini menunjukkan ekspresi reguler di kotak penelusuran di bagian bawah yang menemukan aktivitas apa pun yang dimulai dengan E.

Untuk beralih aktivitas yang cocok dengan kueri Anda:

• Klik tombol expand_less Previous atau expand_more Next.
• Tekan Shift+Enter untuk memilih sebelumnya atau Enter untuk memilih berikutnya.

Panel Performa menampilkan tooltip di atas aktivitas yang dipilih di kotak penelusuran.

Untuk mengubah setelan kueri:

• Klik match_case Match case untuk membuat kueri peka huruf besar/kecil.
• Klik regular_expression Ekspresi reguler untuk menggunakan ekspresi reguler dalam kueri Anda.

Untuk menyembunyikan kotak penelusuran, klik Batal.

Mengubah urutan lagu dan menyembunyikannya

Untuk merapikan rekaman aktivitas performa, Anda dapat mengubah urutan jalur dan menyembunyikan jalur yang tidak relevan dalam mode konfigurasi jalur.

Untuk memindahkan dan menyembunyikan lagu:

1. Untuk memasuki mode konfigurasi, klik kanan nama trek, lalu pilih Konfigurasi trek.
2. Klik arrow_upward ke atas atau arrow_downward ke bawah untuk memindahkan trek ke atas atau ke bawah. Klik visibility_off untuk menyembunyikannya.
3. Setelah selesai, klik Selesai mengonfigurasi jalur di bagian bawah untuk keluar dari mode konfigurasi.

Tonton video untuk melihat cara kerja alur kerja ini.

Panel Performa menyimpan konfigurasi jalur untuk rekaman aktivitas baru, tetapi tidak di sesi DevTools berikutnya.

Melihat aktivitas thread utama

Gunakan jalur Main untuk melihat aktivitas yang terjadi di thread utama halaman.

Klik peristiwa untuk melihat informasi selengkapnya di tab Ringkasan. Panel Performa menguraikan peristiwa yang dipilih dengan warna biru.

Contoh ini menunjukkan informasi selengkapnya tentang peristiwa panggilan fungsi get di tab Ringkasan.

Membaca diagram flame

Panel Performa menampilkan aktivitas thread utama dalam flame chart. Sumbu x mewakili rekaman dari waktu ke waktu. Sumbu y mewakili stack panggilan. Peristiwa di atas menyebabkan peristiwa di bawah.

Contoh ini menunjukkan diagram lingkaran api di jalur Main. Peristiwa click menyebabkan panggilan fungsi anonim. Fungsi ini, pada gilirannya, memanggil onEndpointClick_, yang memanggil handleClick_, dan seterusnya.

Panel Performa menetapkan warna acak pada skrip untuk membagi diagram lingkaran api dan membuatnya lebih mudah dibaca. Pada contoh sebelumnya, panggilan fungsi dari satu skrip berwarna biru muda. Panggilan dari skrip lain berwarna merah muda muda. Warna kuning yang lebih gelap mewakili aktivitas pembuatan skrip, dan peristiwa ungu mewakili aktivitas rendering. Peristiwa kuning dan ungu yang lebih gelap ini konsisten di semua rekaman.

Tugas yang lama juga ditandai dengan segitiga merah, dan bagian yang lebih dari 50 milidetik diarsir dengan warna merah:

Dalam contoh ini, tugas memerlukan waktu lebih dari 400 milidetik, sehingga bagian yang mewakili 350 milidetik terakhir diarsir merah, sedangkan 50 milidetik awal tidak.

Selain itu, jalur Main menampilkan informasi tentang profil CPU yang dimulai dan dihentikan dengan fungsi konsol profile() dan profileEnd().

Untuk menyembunyikan diagram lingkaran api panggilan JavaScript yang mendetail, lihat Menonaktifkan contoh JavaScript. Jika sampel JS dinonaktifkan, Anda hanya akan melihat peristiwa tingkat tinggi seperti Event (click) dan Function Call.

Melacak pemicu peristiwa

Jalur Utama dapat menampilkan panah yang menghubungkan pemicu berikut dan peristiwa yang disebabkannya:

• Pembatalan validasi gaya atau tata letak -> Hitung ulang gaya atau Tata letak
• Request Animation Frame -> Animation Frame Fired
• Minta Callback Tidak Ada Aktivitas -> Aktifkan Callback Tidak Ada Aktivitas
• Instal Timer -> Timer Diaktifkan
• Create WebSocket -> Send... dan Receive WebSocket Handshake atau Destroy WebSocket

Untuk melihat panah, temukan pemicu atau peristiwa yang disebabkannya dalam diagram lingkaran api, lalu pilih.

Jika dipilih, tab Ringkasan akan menampilkan link Inisiator untuk untuk inisiator dan link Dimulai oleh untuk peristiwa yang mereka sebabkan. Klik untuk berpindah-pindah di antara peristiwa yang sesuai.

Menyembunyikan fungsi dan turunannya dalam diagram lingkaran api

Untuk merapikan diagram lingkaran api di thread Main, Anda dapat menyembunyikan fungsi yang dipilih atau turunannya:

1. Di jalur Main, klik kanan fungsi dan pilih salah satu opsi berikut atau tekan pintasan yang sesuai:

   • Sembunyikan fungsi (H)
   • Sembunyikan turunan (C)
   • Sembunyikan turunan yang berulang (R)
   • Mereset turunan (U)
   • Mereset rekaman aktivitas (T)
   • Menambahkan skrip ke daftar yang diabaikan (I)

   

   Tombol drop-down arrow_drop_down muncul di samping nama fungsi dengan turunan tersembunyi.

2. Untuk melihat jumlah turunan tersembunyi, arahkan kursor ke tombol drop-down arrow_drop_down.

   

3. Untuk mereset fungsi dengan turunan tersembunyi atau seluruh diagram nyala api, pilih fungsi dan tekan U atau klik kanan fungsi mana pun, lalu pilih Reset trace.

Mengabaikan skrip dalam diagram percik

Untuk menambahkan skrip ke daftar yang diabaikan, klik kanan skrip di diagram, lalu pilih Tambahkan skrip ke daftar yang diabaikan.

Diagram ini menciutkan skrip yang diabaikan, menandainya sebagai Di daftar yang diabaikan, dan menambahkannya ke aturan Pengecualian kustom di setelan Setelan > Daftar yang diabaikan. Skrip yang diabaikan akan disimpan hingga Anda menghapusnya dari rekaman aktivitas atau dari Aturan pengecualian kustom.

Melihat aktivitas dalam tabel

Setelah merekam halaman, Anda tidak perlu mengandalkan jalur Utama saja untuk menganalisis aktivitas. DevTools juga menyediakan tiga tampilan tabel untuk menganalisis aktivitas. Setiap tampilan memberi Anda perspektif yang berbeda tentang aktivitas:

• Jika Anda ingin melihat aktivitas root yang menyebabkan pekerjaan paling banyak, gunakan tab Hierarki Panggilan.
• Jika Anda ingin melihat aktivitas yang menghabiskan sebagian besar waktu secara langsung, gunakan tab Bottom-Up.
• Jika Anda ingin melihat aktivitas sesuai urutan terjadinya selama perekaman, gunakan tab Log Peristiwa.

Untuk membantu Anda menemukan hal yang dicari dengan lebih cepat, ketiga tab tersebut memiliki tombol untuk pemfilteran lanjutan di samping panel Filter:

• match_case Cocokkan huruf besar/kecil.
• regular_expression Ekspresi reguler.
• match_word Cocokkan seluruh kata.

Setiap tampilan tabel di panel Performa menampilkan link untuk aktivitas seperti panggilan fungsi. Untuk membantu Anda men-debug, DevTools menemukan deklarasi fungsi yang sesuai dalam file sumber. Selain itu, jika peta sumber yang sesuai ada dan diaktifkan, DevTools akan otomatis menemukan file asli.

Klik link untuk membuka file sumber di panel Sumber.

Catatan: Tiga bagian berikutnya merujuk ke demo yang sama. Anda dapat menjalankan demo sendiri di Demo Tab Aktivitas dan melihat sumbernya di GoogleChrome/devtools-samples/perf/activitytabs.html.

Aktivitas root

Berikut adalah penjelasan konsep aktivitas root yang disebutkan di tab Call Tree, tab Bottom-Up, dan bagian Event Log.

Aktivitas root adalah aktivitas yang menyebabkan browser melakukan beberapa pekerjaan. Misalnya, saat Anda mengklik halaman, browser akan memicu aktivitas Event sebagai aktivitas root. Event tersebut kemudian dapat menyebabkan pengendali dijalankan.

Dalam diagram lingkaran api jalur Main, aktivitas root berada di bagian atas diagram. Di tab Hierarki Panggilan dan Log Peristiwa, aktivitas root adalah item tingkat teratas.

Lihat Tab Hierarki Panggilan untuk mengetahui contoh aktivitas root.

Tab Hierarki Panggilan

Gunakan tab Hierarki Panggilan untuk melihat aktivitas root yang menyebabkan pekerjaan paling banyak.

Tab Hierarki Panggilan hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih bagian rekaman untuk mempelajari cara memilih bagian.

Dalam contoh ini, item tingkat teratas di kolom Aktivitas, seperti Event, Paint, dan Composite Layers adalah aktivitas root. Penyusunan bertingkat mewakili stack panggilan. Dalam contoh ini, Event menyebabkan Function Call, yang menyebabkan button.addEventListener, yang menyebabkan b, dan seterusnya.

Waktu Sendiri mewakili waktu yang dihabiskan secara langsung dalam aktivitas tersebut. Total Waktu mewakili waktu yang dihabiskan dalam aktivitas tersebut atau turunannya.

Klik Waktu Sendiri, Total Waktu, atau Aktivitas untuk mengurutkan tabel menurut kolom tersebut.

Gunakan kotak Filter untuk memfilter peristiwa menurut nama aktivitas.

Secara default, menu Pengelompokan ditetapkan ke Tidak ada Pengelompokan. Gunakan menu Pengelompokan untuk mengurutkan tabel aktivitas berdasarkan berbagai kriteria.

Klik Tampilkan Stack Terberat untuk menampilkan tabel lain di sebelah kanan tabel Aktivitas. Klik aktivitas untuk mengisi tabel Heaviest Stack. Tabel Stack Terberat menunjukkan turunan aktivitas yang dipilih yang memerlukan waktu terlama untuk dieksekusi.

Tab Bottom-Up

Gunakan tab Bottom-Up untuk melihat aktivitas mana yang secara langsung menghabiskan waktu paling banyak secara agregat.

Tab Bottom-Up hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih bagian rekaman untuk mempelajari cara memilih bagian.

Dalam diagram flame jalur Main pada contoh ini, Anda dapat melihat bahwa hampir semua waktu dihabiskan untuk mengeksekusi tiga panggilan ke wait(). Oleh karena itu, aktivitas teratas di tab Bottom-Up adalah wait. Dalam diagram api, warna kuning di bawah panggilan ke wait sebenarnya adalah ribuan panggilan Minor GC. Oleh karena itu, Anda dapat melihat bahwa di tab Bottom-Up, aktivitas termahal berikutnya adalah Minor GC.

Kolom Waktu Sendiri menunjukkan waktu gabungan yang dihabiskan secara langsung dalam aktivitas tersebut, di semua kejadiannya.

Kolom Total Waktu mewakili waktu gabungan yang dihabiskan dalam aktivitas tersebut atau turunannya.

Tab Log Aktivitas

Gunakan tab Log Peristiwa untuk melihat aktivitas dalam urutan terjadinya selama perekaman.

Tab Log Peristiwa hanya menampilkan aktivitas selama bagian rekaman yang dipilih. Lihat Memilih bagian rekaman untuk mempelajari cara memilih bagian.

Kolom Start Time menunjukkan titik saat aktivitas tersebut dimulai, relatif terhadap awal perekaman. Waktu mulai 1573.0 ms untuk item yang dipilih dalam contoh ini berarti aktivitas dimulai 1.573 md setelah perekaman dimulai.

Kolom Waktu Sendiri menunjukkan waktu yang dihabiskan langsung dalam aktivitas tersebut.

Kolom Total Waktu menunjukkan waktu yang dihabiskan secara langsung dalam aktivitas tersebut atau dalam turunan apa pun.

Klik Waktu Mulai, Waktu Sendiri, atau Total Waktu untuk mengurutkan tabel menurut kolom tersebut.

Gunakan kotak Filter untuk memfilter aktivitas menurut nama.

Gunakan menu Durasi untuk memfilter aktivitas yang memerlukan waktu kurang dari 1 md atau 15 md. Secara default, menu Durasi disetel ke Semua, yang berarti semua aktivitas ditampilkan.

Nonaktifkan kotak centang Pemuatan, Pembuatan Skrip, Rendering, atau Pengecatan untuk memfilter semua aktivitas dari kategori tersebut.

Melihat pengaturan waktu

Di jalur Pengaturan waktu, lihat penanda penting seperti:

• First Paint (FP)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Peristiwa DOMContentLoaded (DCL)
• Peristiwa Muat (L)
• Panggilan performance.mark() kustom Anda. Setiap tanda dengan tooltip ditampilkan di bawah pada 813,44 md, berlabel Mulai menjalankan JavaScript.
• Panggilan performance.measure() kustom Anda. Rentang kuning ditampilkan di bawah, berlabel Interaksi Lambat.

Pilih penanda untuk melihat detail selengkapnya di tab Ringkasan, termasuk stempel waktu, total waktu, waktu mandiri, dan objek detail. Untuk panggilan performance.mark() dan performance.measure(), tab ini juga menampilkan pelacakan tumpukan.

Melihat interaksi

Lihat interaksi pengguna di jalur Interaksi untuk melacak potensi masalah responsivitas.

Untuk melihat interaksi:

1. Buka DevTools, misalnya, di halaman demo ini.
2. Buka panel Performa dan mulai perekaman.
3. Klik elemen (kopi) dan hentikan perekaman.
4. Temukan jalur Interaksi di linimasa.

Dalam contoh ini, jalur Interaksi menunjukkan interaksi Pointer. Interaksi memiliki whisker yang menunjukkan penundaan input dan presentasi pada batas waktu pemrosesan. Arahkan kursor ke interaksi untuk melihat tooltip dengan penundaan input, waktu pemrosesan, dan penundaan presentasi.

Jalur Interaksi juga menampilkan peringatan Interaction to Next Paint (INP) untuk interaksi yang lebih dari 200 milidetik di tab Ringkasan dan di tooltip saat mengarahkan kursor:

Jalur Interaksi menandai interaksi selama lebih dari 200 milidetik dengan segitiga merah di pojok kanan atas.

Melihat aktivitas GPU

Lihat aktivitas GPU di bagian GPU.

Melihat aktivitas raster

Lihat aktivitas raster di bagian Thread Pool.

Menganalisis frame per detik (FPS)

DevTools menyediakan banyak cara untuk menganalisis frame per detik:

• Gunakan bagian Frames untuk melihat berapa lama waktu yang diperlukan frame tertentu.
• Gunakan pengukur FPS untuk estimasi FPS secara real time saat halaman berjalan. Lihat Melihat frame per detik secara real time dengan pengukur FPS.

Bagian Frames

Bagian Frames memberi tahu Anda dengan tepat berapa lama waktu yang diperlukan untuk frame tertentu.

Arahkan kursor ke bingkai untuk melihat tooltip yang berisi informasi selengkapnya.

Contoh ini menampilkan tooltip saat Anda mengarahkan kursor ke bingkai.

Bagian Frames dapat menampilkan empat jenis frame:

1. Frame tidak ada aktivitas (putih). Tidak ada perubahan.
2. Frame (hijau). Dirender seperti yang diharapkan dan tepat waktu.
3. Frame yang ditampilkan sebagian (kuning dengan pola garis putus-putus lebar yang jarang). Chrome telah melakukan yang terbaik untuk merender setidaknya beberapa update visual tepat waktu. Misalnya, jika pekerjaan thread utama proses perender (animasi kanvas) terlambat, tetapi thread kompositor (scroll) tepat waktu.
4. Frame yang dihapus (merah dengan pola garis solid yang rapat). Chrome tidak dapat merender frame dalam waktu yang wajar.

Contoh ini menampilkan tooltip saat Anda mengarahkan kursor ke frame yang ditampilkan sebagian.

Klik frame untuk melihat informasi selengkapnya tentang frame di tab Ringkasan. DevTools menguraikan frame yang dipilih dengan warna biru.

Melihat permintaan jaringan

Luaskan bagian Jaringan untuk melihat waterfall permintaan jaringan yang terjadi selama perekaman performa.

Di samping nama jalur Jaringan, terdapat legenda dengan jenis permintaan berkode warna.

Permintaan pemblokiran rendering ditandai dengan segitiga merah di sudut kanan atas.

Arahkan kursor ke permintaan untuk melihat tooltip dengan:

• URL permintaan dan total waktu yang diperlukan untuk mengeksekusinya.
• Prioritas atau perubahan prioritas, misalnya, Medium -> High.
• Apakah permintaannya adalah Render blocking atau bukan.
• Perincian pengaturan waktu permintaan, yang akan dijelaskan nanti.

Saat Anda mengklik permintaan, jalur Jaringan akan menggambar panah dari pemicunya ke permintaan.

Selain itu, panel Performa menampilkan tab Ringkasan dengan informasi selengkapnya tentang permintaan, termasuk, tetapi tidak terbatas pada kolom Prioritas Awal dan Prioritas (akhir). Jika nilainya berbeda, prioritas pengambilan permintaan telah berubah selama perekaman. Untuk mengetahui informasi selengkapnya, lihat Mengoptimalkan pemuatan resource dengan Fetch Priority API.

Tab Summary juga menampilkan perincian pengaturan waktu permintaan.

Permintaan untuk www.google.com diwakili oleh garis di sebelah kiri (|–), batang di tengah dengan bagian gelap dan bagian terang, serta garis di sebelah kanan (–|).

Anda dapat menemukan perincian pengaturan waktu lainnya di tab Jaringan. Klik kanan permintaan di jalur Jaringan atau URL-nya di tab Ringkasan, lalu klik Tampilkan di panel Jaringan. DevTools akan mengarahkan Anda ke panel Jaringan dan memilih permintaan yang sesuai. Buka tab Pengaturan waktu.

Berikut cara kedua pengelompokan ini dipetakan satu sama lain:

• Baris kiri (|–) adalah semua hal hingga grup peristiwa Connection start, inklusif. Dengan kata lain, ini adalah semua hal sebelum Request Sent.
• Bagian terang panel adalah Request sent dan Waiting for server response.
• Bagian gelap panel adalah Content download.
• Baris kanan (–|) adalah waktu yang dihabiskan untuk menunggu thread utama. Tab Jaringan > Pengaturan waktu tidak menampilkannya.

Melihat metrik memori

Aktifkan kotak centang Memory untuk melihat metrik memori dari rekaman terakhir.

DevTools menampilkan diagram Memory baru, di atas tab Summary. Ada juga diagram baru di bawah diagram NET, yang disebut HEAP. Diagram HEAP memberikan informasi yang sama dengan baris JS Heap dalam diagram Memory.

Contoh ini menampilkan metrik memori di atas tab Ringkasan.

Garis berwarna pada diagram dipetakan ke kotak centang berwarna di atas diagram. Nonaktifkan kotak centang untuk menyembunyikan kategori tersebut dari diagram.

Diagram hanya menampilkan wilayah rekaman yang dipilih. Pada contoh sebelumnya, diagram Memori hanya menampilkan penggunaan memori untuk awal perekaman, hingga sekitar tanda 1000 md.

Melihat durasi bagian rekaman

Saat menganalisis bagian seperti Jaringan atau Utama, terkadang Anda memerlukan estimasi yang lebih akurat tentang waktu yang diperlukan peristiwa tertentu. Tahan Shift, klik dan tahan, lalu tarik ke kiri atau kanan untuk memilih bagian rekaman. Di bagian bawah pilihan Anda, DevTools akan menampilkan durasi yang diperlukan bagian tersebut.

Dalam contoh ini, stempel waktu 488.53ms di bagian bawah bagian yang dipilih menunjukkan berapa lama bagian tersebut berlangsung.

Melihat screenshot

Lihat Mengambil screenshot saat merekam untuk mempelajari cara mengaktifkan screenshot.

Arahkan kursor ke Ringkasan linimasa untuk melihat screenshot tampilan halaman selama rekaman tersebut. Ringkasan linimasa adalah bagian yang berisi diagram CPU, FPS, dan NET.

Anda juga dapat melihat screenshot dengan mengklik frame di bagian Frames. DevTools menampilkan versi kecil screenshot di tab Summary.

Contoh ini menampilkan screenshot untuk frame 195.5ms di tab Ringkasan saat Anda mengkliknya di bagian Frame.

Klik thumbnail di tab Ringkasan untuk memperbesar screenshot.

Contoh ini menampilkan screenshot yang diperbesar setelah Anda mengklik thumbnail-nya di tab Ringkasan.

Melihat informasi lapisan

Untuk melihat informasi lapisan lanjutan tentang frame:

1. Aktifkan instrumentasi paint lanjutan.
2. Pilih bingkai di bagian Frames. DevTools menampilkan informasi tentang lapisannya di tab Lapisan baru, di samping tab Log Peristiwa.

Arahkan kursor ke lapisan untuk menandainya dalam diagram.

Contoh ini menunjukkan lapisan #39 yang ditandai saat Anda mengarahkan kursor ke lapisan tersebut.

Untuk memindahkan diagram:

• Klik Pan Mode untuk bergerak di sepanjang sumbu X dan Y.
• Klik Rotate Mode untuk memutar sepanjang sumbu Z.
• Klik Reset Transform untuk mereset diagram ke posisi aslinya.

Lihat cara kerja analisis lapisan:

Melihat paint profiler

Untuk melihat informasi lanjutan tentang peristiwa gambar:

1. Aktifkan instrumentasi paint lanjutan.
2. Pilih peristiwa Paint di jalur Main.

Menganalisis performa rendering dengan tab Rendering

Gunakan fitur tab Rendering untuk membantu memvisualisasikan performa rendering halaman Anda.

Buka tab Rendering.

Melihat frame per detik secara real time dengan pengukur FPS

Statistik rendering frame adalah overlay yang muncul di sudut kanan atas area pandang Anda. Alat ini memberikan estimasi FPS secara real time saat halaman berjalan.

Lihat Statistik rendering frame.

Melihat peristiwa lukisan secara real time dengan Flashing Cat

Gunakan Paint Flashing untuk mendapatkan tampilan real-time dari semua peristiwa paint di halaman.

Lihat Flash Paint.

Melihat overlay lapisan dengan Batas Lapisan

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

Lihat Batas lapisan.

Menemukan masalah performa scroll secara real time

Gunakan Masalah Performa Scroll untuk mengidentifikasi elemen halaman yang memiliki pemroses peristiwa terkait scroll yang dapat membahayakan performa halaman. DevTools menguraikan elemen yang berpotensi bermasalah dalam warna hijau kebiruan.

Lihat Masalah performa scroll.