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 agentic, agen coding Anda mengambil beberapa snapshot di berbagai status aplikasi dan menggunakan alat analisis khusus.
Mengaktifkan alat proses debug memori
Secara default, Chrome DevTools untuk agen hanya mengekspos alat take_heapsnapshot
tool. Alat yang menganalisis cuplikan heap (misalnya, compare_heapsnapshots, get_heapsnapshot_summary, dan get_heapsnapshot_retaining_paths) hanya tersedia saat Anda memulai server dengan tanda --memoryDebugging. Tanpa flag ini, agen Anda dapat
mengambil snapshot, tetapi tidak dapat menganalisisnya.
Untuk mengaktifkan alat proses debug memori, tambahkan --memoryDebugging ke argumen server Anda:
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
Untuk opsi selengkapnya, lihat Konfigurasi.
Pola kebocoran memori umum
Analisis memori berfokus pada menemukan pola kebocoran umum, termasuk:
- Pemroses peristiwa yang tidak dihapus: Pemroses peristiwa yang dilampirkan ke objek global
(seperti
windowataudocument) yang mencegah pembersihan sampah memori. - Node DOM terpisah: Node yang dihapus dari hierarki 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.
- Closure: Closure yang secara tidak sengaja menyimpan referensi ke objek besar dalam cakupannya sendiri.
- Struktur data tidak terbatas: Struktur data yang digunakan untuk caching yang berkembang tanpa batas.
Pertimbangan untuk analisis memori
Saat menggunakan analisis memori, perhatikan hal berikut:
Jangan membaca snapshot mentah secara langsung: Jangan biarkan agen Anda membaca file
.heapsnapshotmentah secara langsung. File tersebut terlalu besar dan melebihi batas konteks. Keterampilan proses debug kebocoran memori secara eksplisit menginstruksikan agen untuk menghindari pembacaan file ini.Metodologi tiga snapshot: Untuk menemukan kebocoran dengan andal, agen Anda biasanya perlu mengambil tiga snapshot: dasar pengukuran sebelum tindakan, 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 diusulkan 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 proses debug Anda dengan alur kerja ini.
Catatan: Langkah-langkah eksekusi agen adalah contoh perilaku potensial. Agen Anda mungkin bertindak secara berbeda.
Mendeteksi pemroses peristiwa yang tidak dibersihkan selama navigasi
Aplikasi web satu halaman (SPA) sering kali mengalami kebocoran memori saat developer lupa menghapus pemroses peristiwa global setelah komponen dilepas. 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 dilampirkan ke objek window tidak pernah
dihapus, dan memberikan kode spesifik untuk memanggil removeEventListener dalam
fungsi pembersihan komponen Anda.
Mengidentifikasi node DOM terpisah dalam komponen UI
Modal, dropdown, dan komponen UI yang kompleks sering kali meninggalkan node DOM yang terlepas jika referensi ke node tersebut 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 saat
mengumpulkan snapshot dasar pengukuran, target, dan akhir yang diperlukan. Analisis
mengungkapkan beberapa objek yang berkembang yang diberi label sebagai HTMLDivElement Terpisah. Agen
akan memberi tahu Anda tentang temuan tersebut dan meminta konfirmasi Anda sebelum mengubah
kode untuk menetapkan variabel yang menyimpan referensi DOM ke null.
Menemukan cache tak terbatas 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. Alat ini mengidentifikasi closure yang secara tidak sengaja menangkap array besar yang bertambah tanpa batas. Agen menyarankan untuk menerapkan batas caching atau menggunakan WeakMap untuk data yang terkait dengan siklus proses objek guna memungkinkan pembersihan sampah memori yang tepat.
Men-debug kebocoran memori dalam proses latar belakang
Timer animasi dan latar belakang dapat menyebabkan kebocoran memori tanpa interaksi pengguna yang eksplisit. 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 pembersihan sampah memori pada mesh sebelumnya, sehingga menyarankan pengoptimalan untuk penggunaan kembali objek.