Menggunakan panel Performa Chrome DevTools untuk membuat profil aplikasi Angular

Andrés Olivares

Pawel Kozlowski

Framework web seperti Angular, React, Vue, dan Svelte mempermudah penulisan dan pemeliharaan aplikasi web yang kompleks dalam skala besar.

Namun, framework ini memperkenalkan lapisan abstraksi di atas model aplikasi browser. Faktanya, kode yang ditulis oleh developer menggunakan abstraksi ini biasanya akan ditranspilasi menjadi kode yang tidak dapat dibaca, di-minify, dan dibundel. Akibatnya, memanfaatkan sepenuhnya kecanggihan DevTools untuk men-debug dan membuat profil aplikasi ini bisa menjadi tantangan bagi developer.

Misalnya, saat membuat profil aplikasi Angular dengan panel Performance di DevTools, inilah yang akan Anda lihat:

Dengan informasi yang disajikan seperti ini, mungkin sulit untuk mengetahui bottleneck performa apa yang ada dalam codebase Anda. Bagaimanapun, informasi tersebut tidak memiliki konteks konstruksi framework dan sebagian besar informasi yang ditampilkan berupa kode yang diminimalkan. Selain itu, sulit untuk membedakan antara aktivitas yang terkait langsung dengan kode yang Anda tulis, internal framework, dan kode pihak ketiga lainnya yang mungkin berjalan di halaman yang sama.

Motivasi umum bagi penulis framework dan abstraksi adalah mengimplementasikan ekstensi DevTools mereka sendiri yang menyajikan data pembuatan profil dalam hal konsep framework. Alat ini sangat berguna saat men-debug dan memprofilkan aplikasi yang dibangun dengan framework tertentu. Namun, sering kali Anda perlu mengorelasikan data framework di profiler framework Anda sendiri dengan informasi runtime browser di panel Performa DevTools. Jika kedua sumber data ini ditampilkan secara terpisah di alat yang berbeda, akan sulit untuk menemukan dan memperbaiki hambatan, terutama saat aplikasi menjadi lebih kompleks. Berikut contoh visualisasi profil di Profiler Angular DevTools:

Dalam kondisi ideal, developer akan memiliki tampilan tempat dua sumber data ditampilkan bersama dalam konteks yang sama yang dipetakan ke linimasa yang sama.

Oleh karena itu, kami berkolaborasi dengan tim Angular untuk menghadirkan data runtime Angular langsung ke panel Performance menggunakan Performance panel Extensibility API. Dalam postingan ini, kita akan mempelajari kemampuan API dan cara penggunaannya dalam framework Angular untuk mencapai hal ini. Implementasi ini dapat berfungsi sebagai contoh untuk framework dan abstraksi lain yang ingin meningkatkan pengalaman developer mereka dengan menginstrumentasi alat mereka sendiri dan membantu developer menggunakan Chrome DevTools.

Apa itu API ekstensibilitas panel Performa?

API ini memungkinkan Anda menambahkan entri waktu Anda sendiri ke rekaman aktivitas panel Performa, dalam linimasa yang sama dengan data browser lainnya. Ada dua mekanisme yang memungkinkan Anda melakukannya:

• User Timing API
• console.timeStamp API

User Timing API

Anda dapat menggunakan performance.mark dan performance.measure untuk menambahkan entri seperti berikut:

// Mark used to represent the start of some activity you want to measure.
// In this case, the rendering of a component.
const renderStart = performance.now();

// ... later in your code

performance.measure("Component rendering", {
  start: renderStart,
  detail: {
    devtools: {
      dataType: "track-entry",
      track: "Components",
      color: "secondary",
      properties: [
        ["Render reason", "Props changed"],
        ["Priority", "low"]
      ],
    }
  }
});

Tindakan ini akan menghasilkan trek Komponen yang ditambahkan ke linimasa Anda dengan pengukuran:

API ini memungkinkan Anda menambahkan entri ke buffer Linimasa performa, sekaligus menampilkannya di UI panel Performa DevTools.

Pelajari lebih lanjut API ini dan objek devtools di dokumen.

console.timeStamp API

API ini adalah alternatif ringan untuk User Timing API. Dengan menggunakan contoh yang sama seperti sebelumnya, Anda dapat memiliki:

// Mark used to represent the start of some activity you want to measure.
// In this case, the rendering of a component.
const renderStart = performance.now();

// ... later in your code

console.timeStamp(
"Component rendering",
/* start time */ renderStart,
/* end time (current time) */ undefined,
/* track name */ "Components",
 /* track group name */ undefined,
 /* color */ "secondary"
);

API ini menyediakan metode berperforma tinggi untuk menginstrumentasi aplikasi: tidak seperti alternatif User Timing API, API ini tidak membuat data yang di-buffer. API ini secara eksklusif menambahkan data ke panel **Performa** di DevTools. Artinya, saat DevTools tidak merekam aktivitas, panggilan ke API tidak akan melakukan apa pun (tidak melakukan apa pun), sehingga jauh lebih cepat dan sesuai untuk jalur aktif yang sensitif terhadap performa. Pilihan untuk menggunakan argumen posisional, bukan objek yang berisi semua parameter penyesuaian, juga bertujuan untuk menjaga agar API tetap ringan.

Pelajari lebih lanjut cara menggunakan console.timeStamp untuk memperluas panel Performa dan parameter yang dapat Anda teruskan dalam dokumen.

Cara Angular mengintegrasikan API ekstensibilitas DevTools

Kita akan melihat cara tim Angular menggunakan API ekstensibilitas untuk berintegrasi dengan Chrome DevTools.

Menghindari overhead dengan console.timestamp

Pengukuran Angular dengan API ekstensibilitas panel Performa tersedia mulai versi 20. Tingkat perincian yang diinginkan untuk data performa di DevTools memerlukan API yang cepat, sehingga pull request (60217) yang menambahkan instrumentasi memilih untuk menggunakan console.timeStamp API. Hal ini mencegah performa runtime aplikasi terpengaruh oleh potensi overhead API pembuatan profil.

Data berinstrumen

Untuk memberikan gambaran yang baik tentang kode Angular yang sedang berjalan serta alasan kode tersebut berjalan, beberapa bagian dari pipeline startup dan rendering diinstrumentasikan, termasuk:

• Bootstrapping aplikasi dan komponen.
• Pembuatan dan update komponen.
• Eksekusi pemroses peristiwa dan hook siklus proses.
• Banyak lainnya (misalnya, pembuatan komponen dinamis dan penangguhan rendering blok).

Pengodean warna

Kode warna digunakan untuk memberi sinyal kepada developer tentang kategori entri pengukuran tertentu. Misalnya, warna yang digunakan untuk entri yang menandai eksekusi kode TypeScript yang ditulis oleh developer berbeda dengan warna yang digunakan untuk kode yang dihasilkan oleh compiler Angular.

Pada screenshot berikut, Anda dapat melihat bagaimana hasilnya dalam titik entri (seperti deteksi perubahan dan pemrosesan komponen) berwarna biru, kode yang dihasilkan berwarna ungu, dan kode TypeScript (seperti pemroses peristiwa dan hook) dirender berwarna hijau.

Perhatikan bahwa argumen warna yang diteruskan ke API bukan nilai warna CSS, tetapi token semantik yang dipetakan ke warna yang cocok dengan UI DevTools. Kemungkinan nilainya adalah primary, secondary, dan tertiary, dengan masing-masing varian -dark dan -light serta warna error.

Lagu

Pada saat penulisan, semua data runtime Angular ditambahkan ke jalur yang sama (berlabel "🅰️ Angular"). Namun, Anda dapat menambahkan beberapa jalur ke rekaman aktivitas dan bahkan mengelompokkan jalur. Misalnya, dengan panggilan berikut ke API console.timeStamp:

console.timeStamp("Component 1", componentStart1, componentEnd1, "Components", "Client", "primary");
console.timeStamp("Component 2", componentStart2, componentEnd2, "Components", "Client", "primary");
console.timeStamp("Hook 1", hookStart, hookEnd, "Hooks", "Client", "primary");
console.timeStamp("Fetch data base", fetchStart, fetchEnd, "Server", "primary");

Anda akan melihat data yang disusun dalam jalur dengan cara berikut:

Menggunakan jalur terpisah dapat berguna misalnya saat Anda memiliki aktivitas asinkron, beberapa tugas yang berjalan secara paralel, atau hanya grup aktivitas yang cukup berbeda sehingga layak dipisahkan di area UI yang berbeda.

Mengapa hal ini penting bagi developer Angular

Tujuan dari integrasi langsung ini adalah untuk memberikan pengalaman analisis performa yang lebih intuitif dan komprehensif. Dengan menampilkan data performa internal Angular langsung di panel **Performa**, developer akan mendapatkan:

• Peningkatan Visibilitas: Menjadikan peristiwa performa khusus Angular seperti rendering komponen, siklus deteksi perubahan, dan lainnya, terlihat dalam linimasa browser yang lebih luas.
• Pemahaman yang Lebih Baik: Dengan informasi kaya konteks tentang proses internal Angular, yang membantu Anda menentukan hambatan performa secara lebih efektif.

Mengaktifkan integrasi

Penggunaan API ekstensibilitas secara resmi tersedia di build pengembangan mulai dari Angular versi 20. Untuk mengaktifkannya, Anda harus menjalankan utilitas global `ng.enableProfiling()` di aplikasi atau di konsol DevTools. Lihat informasi selengkapnya tentang integrasi di [Dokumen Angular](https://angular.dev/best-practices/profiling-with-chrome-devtools)

Pertimbangan Lainnya

Beberapa pertimbangan penting yang harus diperhitungkan.

Peta sumber dan kode yang diminifikasi:

Peta sumber adalah alat yang banyak digunakan yang bertujuan untuk menjembatani kesenjangan antara kode yang di-bundle / diminifikasi dan kode yang ditulis, jadi...

Bukankah peta sumber seharusnya menyelesaikan masalah kode yang diminifikasi dalam aplikasi yang di-bundle?

Meskipun peta sumber memang membantu, peta sumber tidak sepenuhnya menghilangkan tantangan saat membuat profil aplikasi web yang rumit dan di-minify. Peta sumber memungkinkan DevTools memetakan kembali kode yang diminifikasi ke kode sumber asli Anda, sehingga memudahkan proses pen-debug-an. Namun, hanya mengandalkan peta sumber untuk analisis performa masih dapat menimbulkan beberapa batasan. Misalnya, memilih cara pemisahan visual antara kode yang ditulis dan internal framework hanya dengan peta sumber saja akan rumit. Sebaliknya, API ekstensibilitas memberikan fleksibilitas untuk mencapai perbedaan ini dan menampilkannya dengan cara yang dianggap paling nyaman oleh developer.

Ekstensi Chrome DevTools:

Ekstensi Chrome yang menggunakan DevTools API adalah alat yang banyak digunakan untuk memperluas devtools.

Apakah profiler khusus (misalnya, ekstensi Chrome DevTools) tidak diperlukan atau tidak dianjurkan sekarang setelah API ini tersedia?

Tidak, API ini tidak dimaksudkan untuk menggantikan atau menghambat pengembangan profiler khusus seperti ekstensi Chrome DevTools. Dasbor ini tetap dapat menawarkan fitur, visualisasi, dan alur kerja khusus yang disesuaikan dengan kebutuhan tertentu. API ekstensibilitas panel Performa bertujuan untuk menciptakan integrasi data kustom yang lancar dengan visualisasi browser di panel Performa.

Jalur ke depan

Prospek API ekstensibilitas.

Bekerja dengan lebih banyak framework dan abstraksi

Kami sangat antusias dengan framework dan abstraksi lain yang mengadopsi API ini untuk meningkatkan pengalaman pembuatan profil developer mereka. Misalnya, React telah menerapkan adopsi API eksperimental untuk framework mereka. Pengukuran ini menampilkan rendering komponen klien dan server serta data API penjadwalan React. Cari tahu lebih lanjut tentang fitur ini dan cara mengaktifkannya di halaman React.

Build produksi

Salah satu tujuan API ini adalah bekerja sama dengan penyedia framework dan abstraksi secara umum untuk mengadopsi dan mengaktifkan instrumentasi dalam build produksi. Hal ini dapat berdampak besar pada performa aplikasi yang dikembangkan dengan abstraksi ini, karena developer akan dapat memprofilkan aplikasi sebagaimana yang dialami pengguna mereka. Kami yakin bahwa console.timeStamp API memungkinkan hal ini tercapai, mengingat kecepatan dan overhead-nya yang rendah. Namun, saat ini framework masih bereksperimen dengan API dan menyelidiki jenis instrumentasi yang lebih skalabel dan berguna bagi developer.