Linimasa DevTools - Kini menyediakan cerita lengkap

Heather Mahan

Panel Linimasa DevTools selalu menjadi perhentian pertama terbaik di jalur menuju pengoptimalan performa. Ikhtisar terpusat tentang aktivitas aplikasi ini membantu Anda menganalisis waktu yang dihabiskan untuk memuat, membuat skrip, merender, dan menggambar. Baru-baru ini, kami telah mengupgrade Linimasa dengan lebih banyak instrumentasi sehingga Anda dapat melihat tampilan performa aplikasi yang lebih mendalam.

Kami telah menambahkan fitur berikut:

Perhatikan bahwa penggunaan opsi pengambilan Paint yang dijelaskan dalam artikel ini menimbulkan beberapa overhead performa, jadi hanya aktifkan opsi tersebut jika Anda menginginkannya.

Profiler JavaScript Terintegrasi

Jika pernah mencari-cari di panel Profiles, Anda mungkin sudah familier dengan JavaScript CPU profiler. Alat ini mengukur di mana waktu eksekusi dihabiskan dalam fungsi JavaScript Anda. Dengan menampilkan profil JavaScript menggunakan Flame Chart, Anda dapat memvisualisasikan pemrosesan JavaScript dari waktu ke waktu.

Sekarang, Anda bisa mendapatkan perincian terperinci tentang eksekusi JavaScript di panel Linimasa. Dengan memilih opsi pengambilan JS Profiler, Anda dapat melihat stack panggilan JavaScript di Linimasa bersama dengan peristiwa browser lainnya. Menambahkan fitur ini ke Linimasa membantu menyederhanakan alur kerja proses debug Anda. Namun lebih dari itu, fitur ini memungkinkan Anda melihat JavaScript dalam konteks dan mengidentifikasi bagian kode yang memengaruhi waktu muat dan rendering halaman.

Selain profiler JavaScript, kami juga mengintegrasikan tampilan Flame Chart ke panel Timeline. Anda sekarang bisa menampilkan aktivitas aplikasi sebagai waterfall peristiwa klasik atau sebagai Flame Chart. Ikon Flame Chart memungkinkan Anda beralih di antara dua tampilan ini.

Ikon Flame.
Menggunakan opsi rekaman JS Profiler dan tampilan Flame Chart untuk menyelidiki stack panggilan di Timeline.
Menggunakan opsi pengambilan JS Profiler dan tampilan Flame Chart untuk menyelidiki stack panggilan di Timeline.

Penampil Frame

Seni pengomposisian lapisan merupakan aspek lain dari browser yang sebagian besar disembunyikan dari developer. Jika digunakan dengan hemat dan hati-hati, lapisan dapat membantu menghindari pengecatan ulang yang mahal dan menghasilkan peningkatan kinerja yang sangat besar. Namun, memprediksi bagaimana browser akan menggabungkan konten Anda sering kali sulit diprediksi. Dengan opsi pengambilan Paint baru Linimasa, Anda dapat memvisualisasikan lapisan gabungan pada setiap frame rekaman.

Saat Anda memilih panel frame abu-abu di atas Thread Utama, panel Lapisan memberikan model visual dari lapisan yang menyusun aplikasi Anda.

Anda dapat memperbesar/memperkecil, memutar, dan menyeret model lapisan untuk menjelajahi isinya. Mengarahkan kursor ke atas lapisan akan menunjukkan posisinya saat ini pada halaman. Dengan mengklik kanan lapisan, Anda dapat melompat ke node yang sesuai di panel Elements. Fitur ini menunjukkan apa yang dipromosikan ke lapisan. Jika memilih lapisan, Anda juga dapat melihat alasan lapisan tersebut dipromosikan di baris berlabel Alasan Komposisi.

Memeriksa lapisan dari Galeri Polaroid Tersebar Codrops untuk mengungkap alasan browser untuk komposisi.
Memeriksa lapisan dari Codrops' Scattered Polaroids Gallery untuk mengungkap alasan browser untuk pengomposisian.

Profiler Paint

Terakhir, kami telah menambahkan paint profiler untuk membantu Anda mengidentifikasi jank yang disebabkan oleh paint yang mahal. Fitur ini memperkaya Linimasa dengan detail lebih lanjut tentang pekerjaan yang dilakukan Chrome selama peristiwa paint.

Sebagai permulaan, sekarang lebih mudah untuk mengidentifikasi konten visual yang sesuai dengan setiap peristiwa paint. Saat Anda memilih peristiwa paint hijau di Timeline, panel Details akan menampilkan pratinjau piksel sebenarnya yang telah digambar.

Melihat pratinjau piksel yang dilukis oleh browser menggunakan opsi pengambilan Paint.
Melihat pratinjau piksel yang dilukis oleh browser menggunakan opsi pengambilan Paint.

Jika Anda benar-benar ingin mendalaminya, beralihlah ke panel Paint Profiler. Profiler ini menampilkan perintah draw persis yang dieksekusi browser untuk paint yang dipilih. Untuk membantu menghubungkan perintah native ini dengan konten yang sebenarnya di aplikasi, Anda dapat mengklik kanan panggilan draw* dan langsung menuju node yang sesuai di panel Elements.

Mengaitkan panggilan gambar browser asli ke elemen DOM menggunakan Paint Profiler.
Mengaitkan panggilan draw browser native ke elemen DOM menggunakan Paint Profiler.

Garis waktu mini di bagian atas panel memungkinkan Anda memutar kembali proses menggambar dan mengetahui operasi mana yang mahal untuk dilakukan oleh browser. Operasi gambar diberi kode warna sebagai berikut: merah muda (bentuk), biru (bitmap), hijau (teks), dan ungu (lain-lain). Tinggi bilah menunjukkan durasi panggilan, jadi menyelidiki batang yang tinggi dapat membantu Anda memahami apa biaya untuk paint tertentu.

Membuat profil dan meraih keuntungan!

Dalam hal pengoptimalan performa, pengetahuan browser bisa sangat ampuh. Dengan memberikan gambaran sekilas, update Linimasa ini membantu memperjelas hubungan antara kode Anda dan proses rendering Chrome. Coba opsi baru ini di Timeline dan lihat apa yang dapat dilakukan Chrome DevTools untuk meningkatkan alur kerja pencarian jank Anda!