Apakah hal ini terdengar familier? Anda melakukan proses debug masalah performa di Chrome DevTools, tetapi banyaknya informasi di panel Performa membuat pengguna sulit berfokus hanya pada bagian yang paling relevan dan dapat ditindaklanjuti. Di antara panjang garis waktu, kedalaman bagan api, dan luasnya berbagai trek data yang berbeda, sulit untuk menavigasinya. Walaupun sekuat panel Performance, kegunaannya tidak harus mengorbankan kegunaan.
Sebagai bagian dari inisiatif kami untuk meningkatkan alat performa Chrome, kami baru-baru ini meluncurkan tiga fitur baru 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 melihat lebih dekat setiap fitur tersebut dan menunjukkan bagaimana Anda dapat menggunakannya untuk fokus hanya pada informasi yang paling penting.
Menyembunyikan bagian linimasa yang tidak relevan
Kinerja web beroperasi pada skala milidetik, jadi meskipun rekaman kinerja Anda hanya berdurasi 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 memperbesar atau menggeser di dalam area minat yang Anda tetapkan. 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 tampilan dekat ringkasan linimasa, yang memvisualisasikan aktivitas thread utama seperti eksekusi skrip dan tugas presentasi. Saat Anda menahan kursor di atasnya, sebuah tombol baru akan muncul yang akan menetapkan batas garis waktu ke jendela yang aktif. Tombol ini diberi label berdasarkan lebar periode waktu, dalam milidetik, dan ikon . Breadcrumb berada di atas ringkasan linimasa, dan masing-masing diberi label berdasarkan ukuran jangka waktunya.
Untuk menggunakan fitur ini:
- Zoom dan geser linimasa ke area yang diinginkan.
- Klik ikon kaca pembesar di ringkasan linimasa untuk menutup linimasa dan menetapkan breadcrumb.
- Ulangi seperlunya untuk memperbesar area bertingkat menarik.
- Klik breadcrumb untuk kembali ke area minat sebelumnya atau seluruh rentang linimasa.
Memangkas linimasa membantu memastikan Anda tidak akan melakukan scroll secara tidak sengaja keluar dari batas 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 untuk menemukan peluang performa seperti perubahan posisi/geometri yang dipaksakan dan mengidentifikasi akar masalahnya di flame chart.
Menyembunyikan bagian yang tidak relevan dari flame chart
Menganalisis aktivitas thread utama bukanlah hal yang mudah. Bagian panel Performa ini dikenal sebagai flame chart, karena bisa sangat lama dan rumit stack panggilannya. 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 dengan tepat entri mana dalam flame chart yang akan disembunyikan, sehingga Anda dapat berfokus pada informasi yang paling dapat ditindaklanjuti.
Saat Anda mengklik kanan pada fungsi di {i>flame chart<i}, menu konteks akan muncul dengan beberapa opsi untuk menyembunyikan entri:
- Sembunyikan fungsi: Menghapus fungsi yang dipilih dari flame chart. Turunannya akan pindah ke atas agar muncul segera setelah fungsi induknya.
- Sembunyikan turunan: Memangkas flame chart pada fungsi yang dipilih, menyembunyikan semua turunannya.
- Sembunyikan turunan berulang: Menghapus semua instance fungsi yang dipilih dari flame chart lainnya.
Ada juga beberapa pintasan keyboard bermanfaat yang dapat Anda gunakan saat sebuah fungsi dipilih:
- H: menyembunyikan fungsi yang dipilih
- C: menyembunyikan turunan fungsi yang dipilih
- R: menyembunyikan instance dari fungsi yang dipilih nanti dalam stack
- U: menampilkan turunan tersembunyi dari fungsi yang dipilih
Sembunyikan skrip yang tidak relevan secara permanen
Opsi Tambahkan skrip ke daftar yang diabaikan menyembunyikan fungsi yang dipilih dari flame chart, serta semua fungsi lainnya yang ditentukan dalam file skrip yang sama. Skrip juga ditambahkan ke daftar pengabaian, 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 flame chart pada trace yang baru. Skrip di luar kontrol Anda akan menjadi kandidat yang baik untuk daftar yang diabaikan. Di sisi lain, menyembunyikan fungsi tertentu bersifat sementara untuk pelacakan 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 rekaman aktivitas. Fungsi dengan turunan tersembunyi dianotasi dengan ikon ▼, yang juga mereset turunan saat diklik.
Kedalaman dan kompleksitas yang tidak perlu yang bisa Anda hilangkan dari flame chart akan membuatnya lebih berguna. 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 sedang dikerjakan.
Sembunyikan lagu yang tidak relevan
Aktivitas thread utama hanya terdiri dari satu jalur panel Performa. Jalur di panel Performa memvisualisasikan aktivitas proses, dan semuanya diselaraskan dengan linimasa umum untuk membantu proses debug. Selain jalur Utama, ada jalur individual untuk subframe, rangkaian pesan, dan pekerja lain yang digunakan oleh halaman, serta jalur Network, Frames, Animations, dan Interactions. Ada lebih banyak lagi trek yang menandai aktivitas proses Chrome tingkat rendah seperti IO, GPU, dan Compositor. Ada banyak sekali informasi di dalamnya. Namun, untuk sebagian besar alur kerja performa, Anda hanya perlu memikirkan informasi dari beberapa lagu dalam satu waktu.
Mulai Chrome 125, ada mode konfigurasi baru yang memungkinkan Anda menyembunyikan jalur yang tidak diperlukan atau mengaturnya ulang sesuai keinginan. Misalnya, jika mengoptimalkan interaksi yang lambat, Anda dapat memilih untuk menyembunyikan semuanya kecuali yang melacak Interactions, Main, dan GPU.
Untuk mengedit trek, klik kanan pada judul trek apa saja dan pilih Konfigurasi trek.... Ini akan membuka mode konfigurasi, di mana Anda dapat menampilkan, menyembunyikan, atau mengatur ulang setiap trek. Klik tombol Selesai mengonfigurasi jalur untuk menyimpan preferensi Anda.
Dengan mengonfigurasi jalur, Anda dapat mengontrol cara panel Performa menampilkan informasi penting untuk alur kerja Anda. Anda dapat menggunakan setelan ini untuk menyembunyikan aktivitas dari proses yang tidak terkait, dan memindahkan {i>track<i} dengan cara yang memberi Anda akses termudah ke data yang Anda butuhkan.
Menyelesaikan
Ketiga fitur ini memberikan kontrol ergonomis baru yang canggih untuk menyesuaikan alur kerja performa Anda. Dengan menggunakan fitur ini dan mengurangi jumlah derau, Anda akan menempatkan diri pada posisi yang jauh lebih baik untuk menemukan apa yang Anda cari dan memahami data.
Kami ingin mengetahui apa saja yang sudah berjalan dengan baik atau bagaimana pengalaman Anda dapat ditingkatkan. Beri tahu kami jika ada pertanyaan atau masukan umum dengan menghubungi @ChromeDevTools. Jika ada yang tidak berfungsi atau Anda memiliki saran tentang fitur baru, beri komentar pada masalah terbuka ini.
Ini hanyalah awal dari inisiatif kami untuk meningkatkan alat performa Chrome dan kami senang dapat berbagi semua hal lainnya yang telah kami lakukan untuk membuat panel Performa lebih mudah digunakan dan lebih canggih dari sebelumnya. Kami akan memublikasikan postingan berikutnya yang menampilkan rangkaian fitur berikutnya di blog Chrome untuk Developer. Sementara itu, lihat halaman What's New in Chrome untuk terus mendapatkan info terbaru mengenai semua hal baru di DevTools dan Chrome.