Apakah hal ini terdengar familier? Anda men-debug masalah performa di Chrome DevTools, tetapi banyaknya informasi di panel Performa membuat Anda sulit berfokus hanya pada bagian yang paling relevan dan dapat ditindaklanjuti. Antara panjang {i>timeline<i}, kedalaman {i>flame chart<i}, dan luasnya berbagai {i>track<i} data yang berbeda, bukanlah hal yang mudah untuk dinavigasi. Meskipun panel Performance sangat tangguh, manfaatnya tidak harus mengorbankan kegunaannya.
Sebagai bagian dari inisiatif kami untuk meningkatkan kualitas alat performa Chrome, belum lama ini kami meluncurkan tiga fitur baru yang bertujuan untuk mengurangi kepadatan informasi dan membantu developer menyesuaikan alur kerja mereka:
- Menyembunyikan bagian linimasa yang tidak relevan
- Menyembunyikan bagian flame chart yang tidak relevan
- Menyembunyikan lagu yang tidak relevan
Dalam postingan ini, kita akan membahas lebih lanjut tiap fitur tersebut dan menunjukkan bagaimana Anda dapat menggunakannya untuk berfokus hanya pada informasi yang paling penting.
Menyembunyikan bagian linimasa yang tidak relevan
Performa web beroperasi dalam skala milidetik, jadi walaupun rekaman performa Anda hanya beberapa detik, masih ada banyak peluang untuk kehilangan posisi Anda.
Di Chrome 122, kami menambahkan kemampuan untuk membuat breadcrumb. Fitur ini memungkinkan Anda membatasi batas linimasa sehingga Anda hanya dapat melakukan zoom atau menggeser di dalam area minat yang ditetapkan oleh Anda. Membatasi linimasa dengan cara ini dapat sangat berguna jika Anda mencoba men-debug masalah responsivitas, misalnya, sehingga Anda dapat memfokuskan perhatian pada satu interaksi atau tugas panjang yang bermasalah.
Screenshot sebelumnya menunjukkan close-up ringkasan linimasa, yang memvisualisasikan aktivitas thread utama seperti eksekusi skrip dan pekerjaan presentasi. Saat Anda menahan kursor di atasnya, tombol baru akan muncul yang akan menetapkan batas linimasa ke jendela saat ini. Tombol diberi label berdasarkan lebar periode waktu, dalam milidetik, dan ikon . Breadcrumb terletak di atas ringkasan linimasa, dan masing-masing diberi label berdasarkan ukuran periode waktunya.
Untuk menggunakan fitur ini:
- Zoom dan geser linimasa ke area menarik.
- Klik ikon kaca pembesar di ringkasan linimasa untuk menyetel linimasa dan menetapkan breadcrumb.
- Ulangi sesuai kebutuhan untuk memperbesar area minat bertingkat.
- Klik breadcrumb untuk kembali ke area minat sebelumnya atau rentang waktu lengkap.
Memangkas linimasa membantu memastikan bahwa Anda tidak akan pernah men-scroll secara tidak sengaja ke bagian linimasa yang tidak relevan. Namun, jika perlu, Anda dapat mengklik breadcrumb untuk memperkecil tampilan. Manfaat lainnya adalah ringkasan linimasa akan tetap selaras dengan jalur berikut. Hal ini dapat memudahkan Anda menemukan peluang performa seperti perubahan posisi/geometri yang dipaksakan dan mengidentifikasi akar masalahnya dalam flame chart.
Menyembunyikan bagian flame chart yang tidak relevan
Menganalisis aktivitas thread utama bukanlah hal yang mudah. Bagian panel Performa ini dikenal sebagai diagram api, karena stack panggilan dapat menjadi panjang dan ramping. Dalam beberapa kasus yang ekstrem, stack ini bisa sangat berat sehingga sulit untuk memahami semuanya dan fokus pada apa yang Anda coba optimalkan.
Mulai Chrome 124, Anda dapat menyesuaikan entri mana yang akan disembunyikan di diagram api, sehingga Anda dapat berfokus pada informasi yang paling bisa ditindaklanjuti.
Saat Anda mengklik kanan sebuah fungsi dalam flame chart, menu konteks akan muncul dengan beberapa opsi untuk menyembunyikan entri:
- Sembunyikan fungsi: Menghapus fungsi yang dipilih dari diagram lingkaran api. Turunannya akan bergerak ke atas agar muncul segera setelah fungsi induknya.
- Sembunyikan turunan: Memangkas flame chart pada fungsi yang dipilih, menyembunyikan semua turunannya.
- Sembunyikan turunan yang berulang: Menghapus semua instance fungsi yang dipilih dari bagian lain flame chart.
Ada juga beberapa pintasan keyboard bermanfaat yang dapat Anda gunakan saat fungsi dipilih:
- H: menyembunyikan fungsi yang dipilih
- C: menyembunyikan turunan fungsi yang dipilih
- R: menyembunyikan instance fungsi yang dipilih nanti di stack'
- U: menampilkan turunan tersembunyi dari fungsi yang dipilih
Menyembunyikan skrip yang tidak relevan secara permanen
Opsi Add script toignore list menyembunyikan fungsi yang dipilih dari flame chart, serta semua fungsi lainnya yang ditentukan dalam file skrip yang sama. Skrip juga ditambahkan ke daftar abaikan, yang digunakan debugger DevTools untuk melangkahi fungsi dan mengabaikan pengecualian yang berasal dari skrip.
Skrip yang ditambahkan ke daftar yang diabaikan akan dipertahankan, sehingga skrip tersebut akan terus disembunyikan dari diagram api di rekaman aktivitas baru. Skrip di luar kendali Anda akan menjadi kandidat yang baik untuk daftar yang diabaikan. Di sisi lain, menyembunyikan setiap fungsi bersifat sementara untuk rekaman aktivitas saat ini dan lebih bergantung pada situasi. Misalnya, Anda mungkin ingin menyembunyikan tumpukan panggilan fungsi rekursif yang rumit agar pelacakan lebih mudah digunakan.
Untuk mengembalikan daftar yang diabaikan atau fungsi tersembunyi lainnya di flame chart, Anda dapat menggunakan menu konteks untuk mereset turunan fungsi yang dipilih atau mereset semua fungsi tersembunyi di seluruh trace. Fungsi dengan turunan tersembunyi dianotasi dengan ikon ▼, yang juga mengatur ulang turunan ketika diklik.
Kedalaman dan kompleksitas yang tidak perlu yang dapat Anda ambil dari flame chart akan membuatnya jauh lebih bermanfaat. Saat diperlukan, memiliki kemampuan untuk menyesuaikan entri mana yang Anda lihat merupakan peningkatan ergonomis untuk membantu Anda memfokuskan perhatian pada informasi yang paling signifikan untuk tugas yang ada.
Menyembunyikan jalur yang tidak relevan
Aktivitas thread utama hanya membentuk satu jalur dari panel Performa. Jalur di panel Performa memvisualisasikan aktivitas proses, dan semuanya diselaraskan dengan linimasa umum untuk membantu proses debug. Selain jalur Utama, ada jalur terpisah untuk subframe, thread, dan pekerja lain yang digunakan oleh halaman, serta jalur Jaringan, Frame, Animasi, dan Interaksi. Lebih banyak jalur menandai aktivitas proses Chrome tingkat rendah seperti IO, GPU, dan Compositor. Itu banyak sekali informasi. Namun, untuk sebagian besar alur kerja performa, Anda hanya perlu memikirkan informasi dari beberapa trek pada satu waktu.
Mulai Chrome 125, ada mode konfigurasi baru yang memungkinkan Anda menyembunyikan jalur yang tidak diperlukan atau mengatur ulang sesuai keinginan. Misalnya, jika Anda mengoptimalkan interaksi lambat, Anda dapat memilih untuk menyembunyikan semuanya kecuali jalur Interaksi, Utama, dan GPU.
Untuk mengedit trek, klik kanan judul trek mana saja, lalu pilih Configure track.... Tindakan ini akan membuka mode konfigurasi, tempat Anda dapat menampilkan, menyembunyikan, atau mengatur ulang setiap trek. Klik tombol Finish configuring tracks untuk menyimpan preferensi Anda.
Dengan mengonfigurasi jalur, Anda dapat mengontrol cara panel Performa menyajikan informasi penting ke alur kerja Anda. Anda dapat menggunakan setelan ini untuk menyembunyikan aktivitas dari proses yang tidak terkait, dan memindahkan jalur dengan cara yang memberi Anda akses termudah ke data yang Anda butuhkan.
Menyelesaikan
Ketiga fitur ini memberi Anda kontrol ergonomis baru yang canggih untuk menyesuaikan alur kerja performa. Dengan menggunakan fitur ini dan mengurangi jumlah derau, Anda akan berada dalam posisi yang jauh lebih baik untuk menemukan apa yang Anda cari dan memahami data.
Kami ingin mengetahui apa yang menurut Anda berfungsi dengan baik atau cara meningkatkan pengalaman Anda. Beri tahu kami jika ada pertanyaan atau masukan umum dengan menghubungi @ChromeDevTools. Jika ada yang tidak berfungsi atau Anda memiliki saran untuk fitur baru, beri komentar di masalah terbuka ini.
Ini hanyalah awal dari inisiatif kami untuk meningkatkan kualitas alat performa Chrome dan kami dengan senang hati akan membagikan semua hal lain yang kami siapkan untuk membuat panel Performa lebih mudah digunakan dan lebih canggih dari sebelumnya. Kami akan memublikasikan postingan kami berikutnya yang menampilkan rangkaian fitur berikutnya di blog Chrome untuk Developer. Sementara itu, lihat halaman Yang Baru di Chrome untuk terus mendapatkan info terbaru tentang semua yang baru di DevTools dan Chrome.