Chrome DevTools - Profil CPU JavaScript di Chrome 58

Kayce Basques

Di Chrome 58, yang saat ini adalah Canary, panel Linimasa telah diganti namanya menjadi panel Performa, panel Profil telah diganti namanya menjadi panel Memori, dan fitur Rekam Profil CPU JavaScript di panel Profil telah dipindahkan ke lokasi yang lebih tersembunyi.

Tujuan jangka panjangnya adalah menghapus CPU Profiler JavaScript lama, dan membuat semua orang menggunakan 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 Anda lebih menyukai alur kerja "Rekam Profil CPU JavaScript" lama yang sebelumnya tersedia di panel Profil, Anda tetap dapat mengaksesnya seperti ini:

  1. Buka menu utama DevTools.
  2. Pilih Alat lainnya > JavaScript Profiler. Profiler lama akan terbuka di panel baru yang disebut JavaScript Profiler.

Cara merekam profil JS

  1. Buka DevTools.

  2. Klik tab Performa.

    Panel performa Chrome DevTools.
    Gambar 1. Panel Performance.

  3. Rekam dengan salah satu cara berikut:

    • Untuk membuat profil pemuatan halaman, klik Catat Pemuatan Halaman. DevTools otomatis memulai perekaman, lalu otomatis berhenti saat mendeteksi halaman selesai dimuat.
    • Untuk membuat profil halaman yang berjalan, klik Record, lakukan tindakan yang ingin Anda buat profilnya, lalu klik Stop setelah selesai.

Bagaimana alur kerja lama dipetakan ke alur kerja baru

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

Pemetaan antara flame chart dalam alur kerja lama dan 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:

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

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

Pemetaan antara Tampilan hierarki di alur kerja lama dan alur kerja baru.
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 repositori dokumen kami jika kami melewatkan fitur apa pun, atau jika Anda memiliki pertanyaan lain tentang artikel ini.