Analizzare le perdite di memoria con gli agenti AI

Matthias Rohmer
José Luis Zapata

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

In un workflow basato su agenti, l'agente di coding acquisisce più snapshot in diversi stati dell'applicazione e utilizza strumenti di analisi specializzati.

Pattern comuni di perdite di memoria

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

  • Listener di eventi non cancellati:listener di eventi collegati a oggetti globali (come window o document) che impediscono la garbage collection.
  • Nodi DOM scollegati:nodi rimossi dall'albero del documento, ma ancora riferiti da 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 senza limiti:strutture di dati utilizzate per la memorizzazione nella cache che aumentano 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. Sono troppo grandi e superano i limiti del contesto. La competenza di debug della perdita di memoria indica esplicitamente agli agenti di evitare di leggere questi file.

  • Metodologia dei tre snapshot:per trovare le perdite in modo affidabile, l'agente in genere deve acquisire tre snapshot: una baseline prima dell'azione, un target dopo l'azione e uno snapshot finale dopo il ripristino dell'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:rivedi 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 separato fa parte di una cache intenzionale prima di chiedere all'agente di annullare i riferimenti.

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

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

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

Rileva i listener di eventi non cancellati durante la navigazione

Le app a pagina singola (SPA) spesso perdono memoria quando gli sviluppatori dimenticano di rimuovere i listener di eventi globali dopo lo smontaggio di un componente. Puoi chiedere al tuo agente di verificare che la memoria venga liberata correttamente quando si passa da una visualizzazione all'altra.

Prompt 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 uno snapshot dell'heap di base sulla home page, passa alla dashboard e torna alla home page per acquisire uno snapshot finale. Quindi 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 UI

Modali, menu a discesa e componenti UI complessi lasciano spesso nodi DOM scollegati se i riferimenti vengono mantenuti nelle variabili JavaScript dopo essere stati rimossi dal DOM.

Prompt 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, target 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.

Prompt 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 una corretta garbage collection.

Eseguire il debug delle perdite di memoria nei processi in background

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

Prompt di esempio:

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

Esecuzione di esempio dell'agente: 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 ciclo di rendering inserisce nuove mesh WebGL in un array a ogni frame senza raccogliere i precedenti, suggerendo ottimizzazioni per il riutilizzo degli oggetti.