Analizzare le perdite di memoria con gli agenti AI

Matthias Rohmer

José Luis Zapata

Chrome DevTools per gli agenti consente al tuo agente di codifica di analizzare e correggere le perdite di memoria lato client (inclusi JavaScript e WebAssembly) nella tua applicazione. Automatizzando la raccolta e l'analisi delle istantanee heap, il tuo agente può individuare gli oggetti che non vengono sottoposti correttamente al garbage collection e suggerire il refactoring del codice mirato.

In un flusso di lavoro con agenti, il tuo agente di codifica acquisisce più snapshot in diversi stati dell'applicazione e utilizza strumenti di analisi specializzati.

Attivare gli strumenti di debug della memoria

Per impostazione predefinita, Chrome DevTools per gli agenti espone solo lo strumento take_heapsnapshot. Gli strumenti che analizzano le istantanee heap (ad esempio, compare_heapsnapshots, get_heapsnapshot_summary e get_heapsnapshot_retaining_paths) sono disponibili solo quando avvii il server con il flag --memoryDebugging. Senza questo flag, l'agente può acquisire snapshot, ma non può analizzarli.

Per attivare gli strumenti di debug della memoria, aggiungi --memoryDebugging agli argomenti del server:

"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]

Per altre opzioni, consulta la sezione Configurazione.

Pattern comuni di perdite di memoria

L'analisi della memoria si concentra sulla ricerca di pattern di perdite comuni, tra cui:

• Listener di eventi non cancellati: listener di eventi collegati a oggetti globali (come window o document) che impediscono il garbage collection.
• Nodi DOM scollegati: nodi rimossi dall'albero del documento, ma a cui fa ancora riferimento una variabile JavaScript.
• Variabili globali non intenzionali: variabili dichiarate senza un ambito appropriato che rimangono in memoria per sempre.
• Chiusure: chiusure che mantengono involontariamente riferimenti a oggetti di grandi dimensioni nel proprio ambito.
• Strutture di dati illimitate: strutture di dati utilizzate per la memorizzazione nella cache che crescono senza limiti.

Considerazioni per l'analisi della memoria

Quando utilizzi l'analisi della memoria, tieni presente quanto segue:

• Non leggere direttamente gli snapshot non elaborati: non consentire all'agente di leggere direttamente i file .heapsnapshot non elaborati. Sono troppo grandi e superano i limiti di contesto. La competenza di debug delle perdite di memoria indica esplicitamente agli agenti di evitare di leggere questi file.

• La metodologia a tre snapshot: per trovare le perdite in modo affidabile, l'agente in genere deve acquisire tre snapshot: una di base prima dell'azione, una di destinazione dopo l'azione e una finale dopo aver annullato l'azione. Tieni presente che alcune azioni, come quelle attivate da timer (setTimeout) o animazioni (requestAnimationFrame), si verificano senza interazione dell'utente e potrebbero non richiedere un passaggio di inversione.

  Tieni presente che alcune azioni, come quelle attivate da timer (setTimeout) o animazioni (requestAnimationFrame), si verificano senza interazione dell'utente e potrebbero comunque aumentare la memoria utilizzata.

• Verifica prima di correggere: esamina sempre i risultati dell'agente per assicurarti che le azioni proposte siano applicabili e corrette per la logica della tua applicazione. Ad esempio, verifica se un nodo scollegato fa parte di una cache intenzionale prima di indicare all'agente di impostare i riferimenti su null.

Casi d'uso per l'analisi delle perdite di memoria

Indica all'agente di profilare la memoria durante le azioni ripetitive, inclusi timer e interazioni dell'utente, anziché acquisire manualmente gli snapshot e confrontarli a mano. Integra l'analisi della memoria nel processo di debug con questi flussi di lavoro.

Nota: i passaggi di esecuzione dell'agente sono esempi di potenziali comportamenti. Il tuo agente potrebbe agire in modo diverso.

Rilevare i listener di eventi non cancellati durante la navigazione

Le applicazioni a pagina singola (SPA) spesso perdono memoria quando gli sviluppatori dimenticano di rimuovere i listener di eventi globali dopo che un componente viene smontato. Puoi chiedere al tuo agente di verificare che la memoria venga liberata correttamente durante la navigazione tra le visualizzazioni.

Testo di esempio:

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.

Esecuzione dell'agente di esempio: l'agente acquisisce un'istantanea heap di base nella home page, passa alla dashboard e torna alla home page per acquisire un'istantanea heap finale. Poi utilizza strumenti di analisi interni per valutare gli snapshot, rileva che un listener scroll collegato all'oggetto window non è mai stato cancellato e fornisce il codice specifico per chiamare removeEventListener nella funzione di pulizia del componente.

Identificare i nodi DOM scollegati nei componenti dell'interfaccia utente

Le finestre modali, i menu a discesa e i componenti dell'interfaccia utente complessi spesso lasciano nodi DOM scollegati se i riferimenti a questi vengono mantenuti nelle variabili JavaScript dopo essere stati rimossi dal DOM.

Testo di esempio:

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.

Esecuzione dell'agente di esempio: l'agente interagisce con la finestra modale delle impostazioni durante la raccolta degli snapshot di base, di destinazione e finali richiesti. L'analisi rivela diversi oggetti in crescita etichettati come Detached HTMLDivElement. L'agente ti informa del risultato e ti chiede una conferma prima di modificare il codice per impostare le variabili che contengono i riferimenti DOM su null.

Trovare cache illimitate nelle interazioni continue

Funzionalità come lo scorrimento infinito o il recupero continuo dei dati possono causare perdite di memoria se gli array o le mappe sottostanti crescono all'infinito senza un limite.

Testo di esempio:

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.

Esecuzione dell'agente di esempio: l'agente analizza lo stato della memoria prima e dopo lo scorrimento. Identifica una chiusura che acquisisce involontariamente un array di grandi dimensioni che cresce senza limiti. L'agente suggerisce di implementare limiti di memorizzazione nella cache o di utilizzare una WeakMap per i dati associati ai cicli di vita degli oggetti per consentire il garbage collection corretto.

Eseguire il debug delle perdite di memoria nei processi in background

I timer di animazione e di background possono causare perdite di memoria senza un'interazione esplicita dell'utente. Puoi indicare all'agente di monitorare la crescita della memoria nel tempo per trovare le perdite di memoria per questi processi.

Testo di esempio:

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

Esecuzione dell'agente di esempio: l'agente esplora l'applicazione canvas e acquisisce automaticamente snapshot periodici per monitorare l'utilizzo della memoria nel tempo. Analizza l'heap e identifica che il loop di rendering inserisce nuove mesh WebGL in un array su ogni frame senza eseguire il garbage collection di quelle precedenti, suggerendo ottimizzazioni per il riutilizzo degli oggetti.