Speicherlecks mit KI-Agents analysieren

Matthias Rohmer
José Luis Zapata

Mit Chrome-Entwicklertools für KI-Agenten kann Ihr Coding-Agent clientseitige Speicherlecks (einschließlich JavaScript und WebAssembly) in Ihrer Anwendung analysieren und beheben. Durch die Automatisierung der Erfassung und Analyse von Heapsnapshots kann Ihr Agent Objekte identifizieren, die nicht ordnungsgemäß bereinigt werden, und gezielte Code-Refactorings vorschlagen.

In einem Agentic Workflow erstellt Ihr Coding-Agent mehrere Snapshots in verschiedenen Anwendungszuständen und verwendet spezielle Analysetools.

Tools zur Speicherfehlerbehebung aktivieren

Standardmäßig stellt Chrome-Entwicklertools für KI-Agenten nur das Tool take_heapsnapshot zur Verfügung. Die Tools zur Analyse von Heap-Snapshots (z. B. compare_heapsnapshots, get_heapsnapshot_summary und get_heapsnapshot_retaining_paths) sind nur verfügbar, wenn Sie den Server mit dem Flag --memoryDebugging starten. Ohne dieses Flag kann Ihr Agent Snapshots erfassen, aber nicht analysieren.

Wenn Sie die Tools zur Speicherfehlerbehebung aktivieren möchten, fügen Sie Ihren Serverargumenten --memoryDebugging hinzu:

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

Weitere Optionen finden Sie unter Konfiguration.

Häufige Muster für Speicherlecks

Bei der Speicheranalyse werden häufige Muster für Speicherlecks gesucht, darunter:

  • Nicht bereinigte Event-Listener: Event-Listener, die an globale Objekte (z. B. window oder document) angehängt sind und die Bereinigung verhindern.
  • Getrennte DOM-Knoten: Knoten, die aus der Dokumentstruktur entfernt wurden, aber weiterhin von einer JavaScript-Variablen referenziert werden.
  • Unbeabsichtigte globale Variablen: Variablen, die ohne ordnungsgemäße Bereichsdefinition deklariert wurden und für immer im Speicher verbleiben.
  • Closures: Closures, die unbeabsichtigt Verweise auf große Objekte im eigenen Bereich behalten.
  • Unbegrenzte Datenstrukturen: Datenstrukturen, die für das Caching verwendet werden und ohne Begrenzung wachsen.

Überlegungen zur Speicheranalyse

Beachten Sie bei der Verwendung der Speicheranalyse Folgendes:

  • Roh-Snapshots nicht direkt lesen: Lassen Sie Ihren Agenten keine rohen .heapsnapshot-Dateien direkt lesen. Sie sind zu groß und überschreiten die Kontextlimits. Die Funktion zur Fehlerbehebung bei Speicherlecks weist Agenten ausdrücklich an, diese Dateien nicht zu lesen.

  • Methode mit drei Snapshots: Um Speicherlecks zuverlässig zu finden, muss Ihr Agent in der Regel drei Snapshots erfassen: einen Baseline-Snapshot vor der Aktion, einen Ziel-Snapshot nach der Aktion und einen letzten Snapshot nach dem Rückgängigmachen der Aktion. Einige Aktionen, z. B. solche, die durch Timer (setTimeout) oder Animationen (requestAnimationFrame) ausgelöst werden, erfolgen ohne Nutzerinteraktion und erfordern möglicherweise keinen Schritt zum Rückgängigmachen.

    Beachten Sie, dass einige Aktionen, z. B. solche, die durch Timer (setTimeout) oder Animationen (requestAnimationFrame) ausgelöst werden, ohne Nutzerinteraktion erfolgen und trotzdem die Arbeitsspeichernutzung erhöhen können.

  • Vor der Korrektur überprüfen: Überprüfen Sie immer die Ergebnisse des Agenten, um sicherzustellen, dass die vorgeschlagenen Aktionen für die Logik Ihrer Anwendung geeignet und korrekt sind. Bestätigen Sie beispielsweise, ob ein getrennter Knoten Teil eines beabsichtigten Caches ist, bevor Sie den Agenten anweisen, die Verweise auf „null“ zu setzen.

Anwendungsfälle für die Analyse von Speicherlecks

Weisen Sie Ihren Agenten an, den Speicher bei sich wiederholenden Aktionen, einschließlich Timern und Nutzerinteraktionen, zu profilieren, anstatt Snapshots manuell zu erstellen und sie von Hand zu vergleichen. Binden Sie die Speicheranalyse mit diesen Workflows in Ihren Debugging-Prozess ein.

Hinweis: Die Schritte zur Agentenausführung sind Beispiele für potenzielles Verhalten. Ihr Agent kann anders handeln.

Nicht bereinigte Event-Listener während der Navigation erkennen

Bei Single-Page-Anwendungen (SPAs) kommt es häufig zu Speicherlecks, wenn Entwickler vergessen, globale Event-Listener zu entfernen, nachdem eine Komponente entfernt wurde. Sie können Ihren Agenten beauftragen, zu überprüfen, ob der Speicher beim Navigieren zwischen Ansichten korrekt freigegeben wird.

Beispiel-Prompt:

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.

Beispiel für die Agentenausführung: Ihr Agent erstellt einen Baseline-Heap-Snapshot auf der Startseite, navigiert zum Dashboard und dann zurück zur Startseite, um einen letzten Snapshot zu erstellen. Anschließend werden interne Analysetools verwendet, um Snapshots auszuwerten. Dabei wird festgestellt, dass ein scroll-Listener, der an das window-Objekt angehängt ist, nie bereinigt wurde. Der Agent stellt den spezifischen Code bereit, um removeEventListener in der Bereinigungsfunktion Ihrer Komponente aufzurufen.

Getrennte DOM-Knoten in UI-Komponenten identifizieren

Bei Modalen, Drop-downs und komplexen UI-Komponenten bleiben häufig getrennte DOM-Knoten zurück, wenn Verweise darauf in JavaScript-Variablen beibehalten werden, nachdem sie aus dem DOM entfernt wurden.

Beispiel-Prompt:

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.

Beispiel für die Agentenausführung: Ihr Agent interagiert mit dem Modal für die Einstellungen und erfasst dabei die erforderlichen Baseline-, Ziel- und letzten Snapshots. Die Analyse ergibt mehrere wachsende Objekte, die als „Getrenntes HTMLDivElement“ gekennzeichnet sind. Der Agent informiert Sie über das Ergebnis und bittet um Ihre Bestätigung, bevor er den Code ändert, um die Variablen, die die DOM-Verweise enthalten, auf null zu setzen.

Unbegrenzte Caches bei kontinuierlichen Interaktionen finden

Bei Funktionen wie dem unendlichen Scrollen oder dem kontinuierlichen Abrufen von Daten kann es zu Speicherlecks kommen, wenn die zugrunde liegenden Arrays oder Maps ohne Begrenzung wachsen.

Beispiel-Prompt:

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.

Beispiel für die Agentenausführung: Ihr Agent analysiert den Speicherzustand vor und nach dem Scrollen. Dabei wird eine Closure identifiziert, die unbeabsichtigt ein großes Array erfasst, das ohne Begrenzung wächst. Der Agent schlägt vor, Caching-Limits zu implementieren oder eine WeakMap für Daten zu verwenden, die mit den Objektlebenszyklen verknüpft sind, um eine ordnungsgemäße Bereinigung zu ermöglichen.

Speicherlecks in Hintergrundprozessen beheben

Animationen und Hintergrundtimer können ohne explizite Nutzerinteraktion zu Speicherlecks führen. Sie können Ihren Agenten anweisen, das Speicherwachstum im Zeitverlauf zu beobachten, um Speicherlecks für diese Prozesse zu finden.

Beispiel-Prompt:

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

Beispiel für die Agentenausführung: Ihr Agent untersucht die Canvas-Anwendung und erstellt automatisch in regelmäßigen Abständen Snapshots, um die Arbeitsspeichernutzung im Zeitverlauf zu beobachten. Dabei wird der Heap analysiert und festgestellt, dass die Rendering-Schleife bei jedem Frame neue WebGL-Meshes in ein Array verschiebt, ohne die vorherigen zu bereinigen. Der Agent schlägt Optimierungen für die Wiederverwendung von Objekten vor.