Chrome DevTools - Profil CPU JavaScript di Chrome 58

Kayce Basques

Twitter GitHub Glitch

Di Chrome 58, yang saat ini disebut Canary, panel Linimasa telah diganti namanya menjadi panel Performa, panel Profiles telah diganti namanya menjadi panel Memori, dan fitur Record JavaScript CPU Profile di panel Profiles telah dipindahkan ke lokasi yang lebih tersembunyi.

Tujuan jangka panjang adalah menghapus JavaScript CPU Profiler lama, dan membuat semua orang bekerja dengan alur kerja baru.

Panduan migrasi kecil ini menunjukkan cara merekam profil JS di panel Performa, dan cara UI panel Performa dipetakan ke alur kerja lama yang biasa Anda gunakan.

Mengakses CPU profiler JavaScript lama

Jika lebih menyukai alur kerja "Record JavaScript CPU Profile" lama yang sebelumnya tersedia di panel Profil, Anda masih dapat mengaksesnya seperti berikut:

1. Buka menu utama DevTools.
2. Pilih More tools > JavaScript Profiler. Profiler lama akan terbuka di panel baru bernama JavaScript Profiler.

Peringatan: Tujuan jangka panjangnya adalah memigrasikan semua orang ke alur kerja baru. Alur kerja ini dapat dihapus di versi DevTools mendatang.

Cara merekam profil JS

1. Buka DevTools.

2. Klik tab Performa.

   

   Gambar 1. Panel Performa.

3. Rekam dengan salah satu cara berikut:

   • Untuk membuat profil pemuatan halaman, klik Rekam Pemuatan Halaman. DevTools otomatis memulai perekaman, lalu otomatis berhenti saat mendeteksi bahwa halaman telah selesai dimuat.
   • Untuk membuat profil halaman yang berjalan, klik Record, lakukan tindakan yang ingin dibuat profil, lalu klik Stop setelah selesai.

Cara alur kerja lama dipetakan ke alur kerja baru

Dari tampilan Diagram alur kerja lama, screenshot di bawah menunjukkan posisi diagram ringkasan penggunaan CPU (panah atas) dan diagram flame chart (panah bawah) dalam alur kerja baru.

Gambar 2. Pemetaan antara flame chart di alur kerja lama (kiri) dan alur kerja baru (kanan).

Tampilan Berat (Bottom Up) tersedia di tab Bottom-Up:

Gambar 3. Pemetaan antara tampilan Bottom-Up di alur kerja lama (kiri) dan alur kerja baru (kanan).

Dan tampilan Pohon (Top Down) tersedia di tab Call Tree:

Gambar 4. Pemetaan antara Tampilan hierarki di alur kerja lama (kiri) dan alur kerja baru (kanan).

Ping @ChromeDevTools di Twitter atau buka masalah GitHub di repo dokumen kami jika kami melewatkan fitur apa pun, atau jika Anda memiliki pertanyaan lain tentang artikel ini.