Dipublikasikan: 19 Maret 2025
Dalam cakupan berkelanjutan kami tentang inisiatif untuk meningkatkan alat performa Chrome, dengan senang hati kami mengumumkan lebih banyak upgrade pada cara Anda berinteraksi dengan panel Performa DevTools. Peningkatan ini dirancang untuk meningkatkan kemampuan Anda dalam menavigasi rekaman aktivitas performa dan mengurangi derau yang tidak relevan, sehingga Anda dapat berkonsentrasi untuk melacak dan menyelesaikan masalah performa dengan cepat.
Navigasi yang lebih baik
Kami telah menerima masukan dari banyak pengguna bahwa men-scroll dan memperbesar di panel Performa dapat menjadi tidak intuitif. Meskipun banyak pengguna lama sudah terbiasa, banyak orang mengharapkan gestur scroll untuk men-scroll, dan tidak memperbesar dan memperkecil rekaman aktivitas.
Opsi baru di bagian memungkinkan peralihan antara scroll "Klasik" yang ada dan pendekatan "Modern" yang baru.
Dalam mode Klasik, men-scroll (dengan trackpad atau roda scroll) akan terus memperbesar dan memperkecil, sedangkan menahan tombol shift dan men-scroll akan men-scroll flamechart ke atas dan ke bawah.
Dalam mode Modern baru, hal ini dibalik: scroll sekarang men-scroll flamechart, sedangkan tombol shift dan scroll akan memperbesar dan memperkecil.
Pintasan keyboard (seperti menggunakan WASD untuk menavigasi rekaman aktivitas) akan terus berfungsi tanpa perubahan.
Ringkasan dua arah
Di dekat bagian atas panel Performa terdapat diagram CPU, yang merupakan bagian dari ringkasan linimasa. Panel ini menampilkan estimasi penggunaan CPU selama perekaman rekaman aktivitas, yang dikelompokkan menurut jenis pekerjaan (misalnya, oranye untuk eksekusi skrip, ungu untuk operasi rendering).
Tindakan ini akan memberikan ringkasan—terkadang disebut sebagai minimap—rekaman aktivitas, yang memberikan ringkasan umum tentang seluruh linimasa meskipun Anda memperbesar untuk menyelidiki masalah tertentu.
Namun, Anda dapat kehilangan tempat yang tepat di minimap dengan mudah saat melihat rekaman aktivitas—dan sebaliknya—sehingga kami telah memperkenalkan fitur baru yang membantu mengaitkan ringkasan dengan tampilan yang diperbesar. Sekarang, saat Anda mengarahkan kursor ke ringkasan, garis vertikal yang sesuai akan muncul di flamechart, yang menandai titik waktu yang sama di flamechart:
Demikian pula, mengarahkan kursor ke entri dalam flamechart kini akan menandai bagian yang sesuai dari diagram CPU. Hal ini sangat bagus untuk melihat tugas mana yang menyebabkan lonjakan CPU tersebut.
Memfilter rekaman aktivitas
Proses debug masalah performa biasanya melibatkan penyaringan data dalam jumlah besar. Untuk membantu Anda berfokus pada informasi yang paling relevan, kami telah meningkatkan kemampuan untuk memfilter derau.
Tahun lalu, kami memperkenalkan kemampuan untuk menambahkan skrip di panel Performa ke daftar abaikan DevTools, yang memfilter entri yang kurang relevan dalam flamechart. Misalnya, jika Anda men-debug performa komponen di halaman, hal ini dapat mengganggu jika callstack framework Anda cukup dalam sehingga Anda harus men-scroll panel performa ke atas dan ke bawah, dan Anda sering ingin menciutkan sebagian besar callstack tersebut untuk berfokus pada bagian yang penting.
Anda dapat mengklik kanan entri di flamechart dan memilih Add script to ignore list, yang akan menambahkan skrip ke daftar abaikan DevTools dan menciutkan entri apa pun darinya di flamechart.
Namun, sekarang Anda juga dapat mengedit daftar yang diabaikan secara manual langsung dari di bagian atas panel Performa. Regex daftar abaikan dibagikan di seluruh DevTools—sehingga skrip yang cocok akan dilewati saat men-debug di panel Sumber dan diciutkan menjadi satu entri di flamechart—dan daftarnya tetap ada di seluruh sesi DevTools.
Dengan cara ini, Anda mendapatkan kontrol yang lebih terperinci atas file yang akan diabaikan, dan tempat yang praktis untuk mengaktifkan dan menonaktifkan aturan saat Anda bekerja.
Redupkan skrip pihak ketiga
Skrip pihak ketiga umum digunakan di situs, tetapi sering kali berada di luar kendali kami, atau tidak relevan untuk sesi proses debug tertentu. Opsi Dim 3rd parties baru di bagian atas panel Performa akan membuat skrip dan aktivitas jaringan pihak ketiga berwarna abu-abu di linimasa, sehingga mengurangi kekacauan visual dan memungkinkan Anda berfokus pada kontribusi performa pihak pertama.
Namun, terkadang Anda menginginkan kontrol yang lebih besar, seperti berkonsentrasi pada pihak ketiga tertentu, atau bahkan hanya kontribusi dari API atau CDN Anda sendiri. Di bagian bawah panel pada tab Ringkasan, terdapat pengelompokan pihak pertama dan ketiga yang dapat ditemukan DevTools di halaman. Mengarahkan kursor ke setiap entitas dalam daftar akan membuat aktivitas apa pun yang bukan berasal dari entitas tersebut berwarna abu-abu.
Kesimpulan
Fitur baru ini akan membantu Anda menavigasi panel Performa dengan lebih baik dan memfilter derau untuk berkonsentrasi pada bagian rekaman aktivitas yang penting bagi Anda. Coba fitur ini dan beri tahu kami bagaimana fitur ini dapat ditingkatkan lebih lanjut atau peningkatan lain yang ingin Anda lihat.