Menganalisis kebocoran memori dengan agen AI

Matthias Rohmer
José Luis Zapata

Chrome DevTools untuk agen memungkinkan agen coding Anda menganalisis dan memperbaiki kebocoran memori sisi klien (termasuk JavaScript dan WebAssembly) di aplikasi Anda. Dengan mengotomatiskan pengumpulan dan analisis snapshot heap, agen Anda dapat menentukan objek yang tidak dikumpulkan sampah dengan benar dan menyarankan refactoring kode yang ditargetkan.

Dalam alur kerja berbasis agen, agen coding Anda mengambil beberapa snapshot di berbagai status aplikasi dan menggunakan alat analisis khusus.

Pola kebocoran memori umum

Analisis memori berfokus pada penemuan pola kebocoran umum, termasuk:

  • Pemroses peristiwa yang tidak dihapus: Pemroses peristiwa yang terlampir ke objek global (seperti window atau document) yang mencegah pembersihan sampah memori.
  • Node DOM terpisah: Node yang dihapus dari pohon dokumen, tetapi masih direferensikan oleh variabel JavaScript.
  • Variabel global yang tidak disengaja: Variabel yang dideklarasikan tanpa cakupan yang tepat dan tetap berada dalam memori selamanya.
  • Penutupan: Penutupan yang secara tidak sengaja menyimpan referensi ke objek besar dalam cakupannya sendiri.
  • Struktur data tanpa batas: Struktur data yang digunakan untuk penyiapan cache yang berkembang tanpa batas.

Pertimbangan untuk analisis memori

Saat menggunakan analisis memori, perhatikan hal-hal berikut:

  • Jangan membaca snapshot mentah secara langsung: Jangan biarkan agen Anda membaca file .heapsnapshot mentah secara langsung. Aset terlalu besar dan melebihi batas konteks. Keterampilan pen-debug-an kebocoran memori secara eksplisit menginstruksikan agen untuk menghindari pembacaan file ini.

  • Metodologi tiga snapshot: Untuk menemukan kebocoran secara andal, agen Anda umumnya perlu mengambil tiga snapshot: snapshot dasar sebelum tindakan, snapshot target setelah tindakan, dan snapshot akhir setelah mengembalikan tindakan. Perhatikan bahwa beberapa tindakan, seperti yang dipicu oleh timer (setTimeout) atau animasi (requestAnimationFrame), terjadi tanpa interaksi pengguna dan mungkin tidak memerlukan langkah pembalikan.

    Perhatikan bahwa beberapa tindakan, seperti yang dipicu oleh timer (setTimeout) atau animasi (requestAnimationFrame), terjadi tanpa interaksi pengguna dan mungkin masih meningkatkan penggunaan memori.

  • Verifikasi sebelum memperbaiki: Selalu tinjau temuan agen untuk memastikan tindakan yang diusulkannya dapat diterapkan dan benar untuk logika aplikasi Anda. Misalnya, konfirmasi apakah node yang terlepas adalah bagian dari cache yang disengaja sebelum menginstruksikan agen untuk membatalkan referensi.

Kasus penggunaan untuk analisis kebocoran memori

Instruksikan agen Anda untuk memprofilkan memori selama tindakan berulang, termasuk timer dan interaksi pengguna, alih-alih mengambil snapshot dan membandingkannya secara manual. Integrasikan analisis memori ke dalam proses pen-debug-an Anda dengan alur kerja berikut.

Catatan: Langkah-langkah eksekusi agen adalah contoh perilaku potensial. Agen Anda mungkin bertindak berbeda.

Mendeteksi pemroses peristiwa yang tidak dibersihkan selama navigasi

Aplikasi web satu halaman (SPA) sering mengalami kebocoran memori saat developer lupa menghapus pemroses peristiwa global setelah komponen di-unmount. Anda dapat menugaskan agen untuk memverifikasi bahwa memori dibebaskan dengan benar saat bernavigasi antar-tampilan.

Contoh perintah:

Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.

Contoh eksekusi agen: Agen Anda mengambil cuplikan heap dasar di halaman beranda, membuka dasbor, dan kembali ke halaman beranda untuk mengambil cuplikan akhir. Kemudian, alat ini menggunakan alat analisis internal untuk mengevaluasi snapshot, mendeteksi bahwa pemroses scroll yang terlampir pada objek window tidak pernah dibersihkan, dan memberikan kode spesifik untuk memanggil removeEventListener dalam fungsi pembersihan komponen Anda.

Mengidentifikasi node DOM terlepas dalam komponen UI

Modal, dropdown, dan komponen UI yang kompleks sering kali meninggalkan node DOM yang terlepas jika referensinya disimpan dalam variabel JavaScript setelah dihapus dari DOM.

Contoh perintah:

Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.

Contoh eksekusi agen: Agen Anda berinteraksi dengan modal setelan sambil mengumpulkan snapshot dasar, target, dan akhir yang diperlukan. Analisis mengungkapkan beberapa objek yang terus bertambah dan diberi label sebagai Detached HTMLDivElement. Agen akan memberi tahu Anda tentang temuan tersebut dan meminta konfirmasi Anda sebelum mengubah kode untuk menyetel variabel yang menyimpan referensi DOM ke null.

Menemukan cache tanpa batas dalam interaksi berkelanjutan

Fitur seperti scroll tanpa batas atau pengambilan data berkelanjutan dapat menyebabkan kebocoran memori jika array atau peta yang mendasarinya tumbuh tanpa batas.

Contoh perintah:

Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.

Contoh eksekusi agen: Agen Anda menganalisis status memori sebelum dan sesudah men-scroll. Hal ini mengidentifikasi penutupan yang secara tidak sengaja mengambil array besar yang tumbuh tanpa batas. Agen menyarankan untuk menerapkan batas penyimpanan dalam cache atau menggunakan WeakMap untuk data yang terkait dengan siklus proses objek agar memungkinkan pembersihan sampah memori yang tepat.

Men-debug kebocoran memori dalam proses latar belakang

Animasi dan timer latar belakang dapat menyebabkan kebocoran memori tanpa interaksi pengguna yang jelas. Anda dapat menginstruksikan agen untuk memantau pertumbuhan memori dari waktu ke waktu untuk menemukan kebocoran memori untuk proses ini.

Contoh perintah:

Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.

Contoh eksekusi agen: Agen Anda menjelajahi aplikasi kanvas dan secara otomatis mengambil snapshot berkala untuk memantau penggunaan memori dari waktu ke waktu. Alat ini menganalisis heap dan mengidentifikasi bahwa loop rendering mendorong mesh WebGL baru ke array di setiap frame tanpa mengumpulkan sampah dari mesh sebelumnya, sehingga menyarankan pengoptimalan untuk penggunaan ulang objek.