Referensi fitur performa

Kayce Basques

Sofia Emelianova

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

Lihat Memulai Menganalisis Performa Runtime untuk tutorial terpandu tentang cara menganalisis performa halaman menggunakan Chrome DevTools.

Mencatat performa

Anda dapat merekam performa runtime atau pemuatan.

Mencatat performa runtime

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

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

3. Klik Record .

   

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

5. Klik Rekam lagi atau klik Berhenti untuk berhenti merekam.

Mencatat performa pemuatan

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

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

3. Klik Start profiling and reload page . DevTools membuka about:blank terlebih dahulu untuk menghapus screenshot dan rekaman aktivitas yang tersisa. Kemudian, DevTools merekam metrik performa saat halaman dimuat ulang, lalu otomatis menghentikan perekaman beberapa detik setelah pemuatan selesai.

   

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

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

Ambil screenshot saat merekam

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

Baca artikel 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.

Tampilkan setelan perekaman

Klik Capture settings untuk menampilkan lebih banyak setelan yang terkait dengan cara DevTools merekam performa.

Nonaktifkan contoh JavaScript

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

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

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

Contoh ini menampilkan rekaman dengan sampel JS yang dinonaktifkan.

Contoh ini menunjukkan rekaman dengan contoh JS yang diaktifkan.

Batasi jaringan saat merekam

Untuk membatasi jaringan saat merekam:

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

Batasi CPU saat merekam

Untuk men-throttle CPU saat merekam:

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

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

Mengaktifkan instrumentasi paint lanjutan

Untuk melihat instrumentasi paint mendetail:

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

Untuk mempelajari cara berinteraksi dengan informasi paint, lihat View layer dan View paint profiler.

Emulasi konkurensi hardware

Untuk menguji performa aplikasi dengan berbagai jumlah inti prosesor, Anda dapat mengonfigurasi nilai yang dilaporkan oleh properti navigator.hardwareConcurrency. Beberapa aplikasi menggunakan properti ini untuk mengontrol tingkat paralelisme aplikasinya, misalnya, untuk mengontrol ukuran kumpulan pthread Emscripten.

Untuk mengemulasi konkurensi hardware:

1. Buka menu Setelan pengambilan. Lihat Menampilkan setelan perekaman.
2. Centang Hardware serentak dan tetapkan jumlah core dalam kotak input.

DevTools menampilkan ikon peringatan di samping tab Performa untuk mengingatkan Anda bahwa emulasi serentak hardware diaktifkan.

Untuk mengembalikan ke nilai default 10, klik tombol Kembalikan .

Menyimpan rekaman

Untuk menyimpan rekaman, klik kanan dan pilih Simpan Profil.

Memuat rekaman

Untuk memuat rekaman, klik kanan dan pilih Load Profile.

Hapus rekaman sebelumnya

Setelah membuat rekaman, tekan Clear recording untuk menghapus rekaman tersebut dari panel Performance.

Menganalisis rekaman performa

Setelah Anda merekam performa runtime atau mencatat performa pemuatan, panel Performa akan menyediakan banyak data untuk menganalisis performa terkait hal yang baru saja terjadi.

Menavigasi rekaman

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

Pilih bagian rekaman

Di bawah panel tindakan pada panel 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 sepanjang Ringkasan linimasa.

Untuk memilih bagian menggunakan keyboard:

1. Memfokuskan trek Utama atau lagu di dekatnya.
2. Gunakan tombol W, A, S, D untuk memperbesar, menggeser ke kiri, memperkecil, dan menggeser ke kanan.

Untuk memilih bagian menggunakan trackpad:

1. Arahkan kursor ke bagian Ringkasan linimasa atau salah satu trek (Utama dan tetangganya).
2. Dengan dua jari, geser ke atas untuk memperkecil, geser ke kiri untuk bergerak ke kiri, geser ke bawah untuk memperbesar, dan geser ke kanan untuk bergerak ke kanan.

Membuat breadcrumb dan melompat antar-tingkat zoom

Ringkasan linimasa memungkinkan Anda membuat beberapa breadcrumb bertingkat secara berurutan, meningkatkan tingkat zoom, lalu melompat ke tingkat yang dipilih.

Untuk membuat dan menggunakan breadcrumb:

1. Di Ringkasan linimasa, pilih sebagian rekaman.
2. Arahkan kursor ke pilihan, lalu klik tombol N md zoom_in. Pilihan ini 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 bertingkat breadcrumb selama rentang pilihan lebih besar dari 5 milidetik.
4. Untuk melompat ke tingkat zoom yang dipilih, klik breadcrumb yang sesuai pada rantai di bagian atas Ringkasan linimasa.

Men-scroll flame chart panjang

Untuk men-scroll flame chart panjang di trek Main atau di tetangganya, klik lama, lalu tarik ke arah mana saja hingga yang Anda cari muncul di tampilan.

Aktivitas penelusuran

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

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

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

Untuk melihat-lihat aktivitas yang cocok dengan kueri Anda:

• Klik tombol expand_less Sebelumnya atau expand_less Berikutnya.
• 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 Cocokkan huruf besar/kecil 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.

Melihat aktivitas thread utama

Gunakan jalur Utama untuk melihat aktivitas yang terjadi di rangkaian pesan utama halaman.

Klik peristiwa untuk melihat informasi selengkapnya tentang peristiwa tersebut 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.

Baca flame chart

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

Contoh ini menunjukkan flame chart di trek Main. Peristiwa click menyebabkan panggilan fungsi anonim. Fungsi ini kemudian disebut onEndpointClick_, yang disebut handleClick_, dan seterusnya.

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

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

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

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

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

Melacak inisiator acara

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

• Pembatalan validasi gaya atau tata letak -> Hitung ulang gaya atau Tata Letak
• Permintaan Bingkai Animasi -> Bingkai Animasi Diaktifkan
• Minta Callback Tidak Ada Aktivitas -> Callback Aktifkan Tidak Ada Aktivitas
• Instal Timer -> Timer Diaktifkan
• Create WebSocket -> Send... dan Receive WebSocket Handshake atau Destroy WebSocket

Untuk melihat panah, temukan salah satu inisiator dalam bagan api, lalu klik.

Melihat aktivitas dalam tabel

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

• Jika Anda ingin melihat aktivitas root yang menyebabkan pekerjaan paling banyak, gunakan tab Hierarki Panggilan.
• Jika Anda ingin melihat aktivitas yang paling banyak menghabiskan 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 Anda cari 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 Sources.

Catatan:Tiga bagian berikutnya merujuk pada 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 Log Peristiwa.

Aktivitas root adalah aktivitas yang menyebabkan browser melakukan beberapa tugas. Misalnya, saat Anda mengklik sebuah halaman, browser akan mengaktifkan aktivitas Event sebagai aktivitas root. Selanjutnya, Event tersebut dapat menyebabkan pengendali dieksekusi.

Di flame chart lagu Utama, aktivitas root berada di bagian atas diagram. Di tab Call Tree dan Event Log, aktivitas root adalah item tingkat atas.

Lihat Tab Hierarki Panggilan untuk contoh aktivitas root.

Tab Hierarki Panggilan

Gunakan tab Call Tree untuk melihat aktivitas root yang menyebabkan pekerjaan terbanyak.

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

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

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

Klik Self Time, Total Time, atau Activity untuk mengurutkan tabel berdasarkan kolom tersebut.

Gunakan kotak Filter untuk memfilter peristiwa berdasarkan nama aktivitas.

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

Klik Show Heaviest Stack untuk menampilkan tabel lain di sebelah kanan tabel Activity. Klik aktivitas untuk mengisi tabel Heaviest Stack. Tabel Heaviest Stack menunjukkan turunan mana dari aktivitas yang dipilih yang memerlukan waktu paling lama untuk dijalankan.

Tab Bottom-Up

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

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

Di flame chart trek Utama dari contoh ini, Anda dapat melihat bahwa hampir seluruh waktu dihabiskan untuk menjalankan tiga panggilan ke wait(). Oleh karena itu, aktivitas teratas di tab Bottom-Up adalah wait. Dalam flame chart, warna kuning di bawah panggilan ke wait sebenarnya merupakan ribuan panggilan Minor GC. Dengan demikian, Anda dapat melihat bahwa di tab Bottom-Up, aktivitas yang paling mahal berikutnya adalah Minor GC.

Kolom Self Time mewakili waktu gabungan yang dihabiskan langsung dalam aktivitas tersebut, dalam semua kemunculannya.

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

Tab Log Peristiwa

Gunakan tab Log Peristiwa untuk melihat aktivitas sesuai 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 mewakili titik tempat aktivitas 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 Mandiri menunjukkan waktu yang dihabiskan langsung dalam aktivitas tersebut.

Kolom Total Time mewakili waktu yang dihabiskan secara langsung dalam aktivitas tersebut atau di salah satu turunannya.

Klik Start Time, Self Time, atau Total Time untuk mengurutkan tabel berdasarkan kolom tersebut.

Gunakan kotak Filter untuk memfilter aktivitas menurut nama.

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

Nonaktifkan kotak centang Loading, Scripting, Rendering, atau Painting untuk memfilter semua aktivitas dari kategori tersebut.

Lihat pengaturan waktu

Di jalur Waktu, lihat penanda penting seperti:

• First Paint (FP)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Peristiwa DOMContentLoaded (DCL)
• Peristiwa Pemuatan (L)
• Panggilan performance.mark() kustom Anda. Satu tanda dengan tooltip ditunjukkan di bawah ini pada 813,44 md, yang diberi label Mulai menjalankan JavaScript.
• Panggilan performance.measure() kustom Anda. Rentang berwarna kuning ditampilkan di bawah ini, yang diberi label Interaksi Lambat.

Untuk melihat detail selengkapnya di tab Ringkasan, pilih penanda. Untuk melihat stempel waktu penanda, arahkan kursor ke stempel waktu pada jalur Waktu.

Lihat interaksi

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

Untuk melihat interaksi:

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

Dalam contoh ini, jalur Interactions 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 Interactions juga menampilkan peringatan Interaction to Next Paint (INP) untuk interaksi lebih dari 200 milidetik di tab Ringkasan dan di tooltip saat mengarahkan kursor:

Jalur Interactions menandai interaksi lebih dari 200 milidetik dengan segitiga merah di sudut kanan atas.

Lihat aktivitas GPU

Lihat aktivitas GPU di bagian GPU.

Lihat aktivitas raster

Lihat aktivitas raster di bagian Raster.

Menganalisis frame per detik (FPS)

DevTools menyediakan banyak cara untuk menganalisis frame per detik:

• Gunakan bagian Frame untuk melihat waktu yang dibutuhkan dalam frame.
• Gunakan pengukur FPS untuk mengetahui estimasi FPS real time saat halaman berjalan. Baca artikel Melihat frame per detik secara real time dengan pengukur FPS.

Bagian Frames

Bagian Frame memberi tahu Anda dengan tepat berapa lama waktu yang dibutuhkan frame tertentu.

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

Contoh ini menunjukkan tooltip saat Anda mengarahkan kursor ke sebuah bingkai.

Bagian Frame 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 jarang). Chrome melakukan yang terbaik untuk merender setidaknya beberapa update visual tepat waktu. Misalnya, jika pekerjaan thread utama dari proses perender (animasi kanvas) terlambat, tetapi thread compositor (scrolling) tepat waktu.
4. Bingkai diletakkan (merah dengan pola garis solid yang padat). Chrome tidak dapat merender frame dalam waktu yang wajar.

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

Klik frame untuk melihat informasi lebih lanjut tentang frame tersebut di tab Summary. DevTools menguraikan bingkai yang dipilih dengan warna biru.

Lihat permintaan jaringan

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

Permintaan diberi kode warna sebagai berikut:

• HTML: Biru
• CSS: Ungu
• JS: Kuning
• Gambar: Hijau

Klik permintaan untuk melihat informasi selengkapnya tentang permintaan tersebut di tab Ringkasan. Pada contoh sebelumnya, tab Ringkasan menampilkan informasi tentang permintaan hijau yang dipilih.

Persegi biru gelap di kiri atas permintaan berarti permintaan dengan prioritas yang lebih tinggi. Persegi biru muda berarti prioritas yang lebih rendah. Pada contoh sebelumnya, permintaan yang dipilih memiliki prioritas tinggi, dan permintaan berwarna biru di atasnya adalah prioritas tertinggi.

Bagian Ringkasan mencakup kolom Prioritas Awal dan (final) Prioritas. Jika nilainya berbeda, prioritas pengambilan permintaan telah berubah selama perekaman. Untuk informasi selengkapnya, lihat Mengoptimalkan pemuatan resource dengan Fetch Priority API.

Pada contoh sebelumnya, permintaan untuk www.google.com direpresentasikan oleh garis di sebelah kiri, batang di tengah dengan bagian gelap dan bagian terang, serta garis di sebelah kanan. Screenshot berikutnya menunjukkan representasi yang sesuai dari permintaan yang sama di tab Timing pada panel Network. Berikut adalah bagaimana kedua representasi ini dipetakan satu sama lain:

• Baris kiri akan menentukan grup peristiwa Connection Start, inklusif. Dengan kata lain, semuanya sebelum Request Sent, eksklusif.
• Bagian terang dari batang adalah Request Sent dan Waiting (TTFB).
• Bagian gelap pada batang adalah Content Download.
• Baris kanan pada dasarnya adalah waktu yang dihabiskan untuk menunggu thread utama. Ini tidak ditampilkan di tab Waktu.

Contoh ini menunjukkan representasi bilah garis dari permintaan www.google.com.

Contoh ini menampilkan representasi tab Waktu dari permintaan www.google.com.

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 menunjukkan metrik memori di atas tab Summary.

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

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

Melihat durasi sebagian rekaman

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

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

Lihat screenshot

Lihat Mengambil screenshot saat merekam untuk mempelajari cara mengaktifkan screenshot.

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

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

Contoh ini menampilkan screenshot untuk bingkai 195.5ms di tab Summary saat Anda mengkliknya di bagian Frames.

Klik thumbnail di tab Ringkasan untuk memperbesar screenshot.

Contoh ini menunjukkan screenshot yang diperbesar setelah Anda mengklik thumbnailnya di tab Ringkasan.

Lihat informasi lapisan

Untuk melihat informasi lapisan lanjutan tentang bingkai:

1. Aktifkan instrumentasi paint lanjutan.
2. Pilih bingkai di bagian Frame. DevTools menampilkan informasi tentang lapisannya di tab Layers baru, di samping tab Event Log.

Arahkan kursor ke atas lapisan untuk menandainya dalam diagram.

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

Untuk memindahkan diagram:

• Klik Mode Geser untuk bergerak 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 paint:

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.

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. Fitur ini memberikan estimasi FPS real time saat halaman berjalan.

Lihat Statistik rendering frame.

Lihat peristiwa melukis secara real time dengan Paint Flashing

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

Lihat Paint flash.

Melihat overlay lapisan dengan Batas Lapisan

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

Lihat Batas lapisan.

Menemukan masalah performa scroll secara real time

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

Lihat Masalah performa scroll.