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 Heap-Snapshots kann Ihr Agent Objekte identifizieren, die nicht ordnungsgemäß bereinigt werden, und gezielte Code-Refactorings vorschlagen.
In einem agentenbasierten Workflow erstellt Ihr Coding-Agent mehrere Snapshots in verschiedenen Anwendungsstatus und verwendet spezielle Analysetools.
Häufige Muster für Speicherlecks
Bei der Speicheranalyse geht es darum, häufige Leckmuster zu finden, darunter:
- Nicht gelöschte Event-Listener:Event-Listener, die an globale Objekte (wie
windowoderdocument) angehängt sind und die automatische Speicherbereinigung verhindern. - Abgetrennte DOM-Knoten:Knoten, die aus dem Dokumentbaum entfernt wurden, auf die aber weiterhin von einer JavaScript-Variablen verwiesen wird.
- Unbeabsichtigte globale Variablen:Variablen, die ohne ordnungsgemäße Bereichsdefinition deklariert werden und für immer im Speicher verbleiben.
- Closures:Closures, die unbeabsichtigt Verweise auf große Objekte im eigenen Bereich beibehalten.
- Unbegrenzte Datenstrukturen:Datenstrukturen, die für das Caching verwendet werden und unbegrenzt wachsen.
Hinweise zur Arbeitsspeicheranalyse
Beachten Sie bei der Verwendung der Speicheranalyse Folgendes:
Roh-Snapshots nicht direkt lesen:Lassen Sie Ihren KI-Agenten keine Roh-
.heapsnapshot-Dateien direkt lesen. Sie sind zu groß und überschreiten die Kontextlimits. Der Skill für das Debuggen von Speicherlecks weist Agents explizit an, diese Dateien nicht zu lesen.Methode mit drei Snapshots:Um Lecks zuverlässig zu finden, muss Ihr Agent in der Regel drei Snapshots erfassen: einen Baseline-Snapshot vor der Maßnahme, einen Ziel-Snapshot nach der Maßnahme und einen letzten Snapshot nach dem Rückgängigmachen der Maßnahme. Einige Aktionen, z. B. solche, die durch Timer (
setTimeout) oder Animationen (requestAnimationFrame) ausgelöst werden, erfolgen ohne Nutzerinteraktion und erfordern möglicherweise keinen Rückgängig-Schritt.Einige Aktionen, z. B. solche, die durch Timer (
setTimeout) oder Animationen (requestAnimationFrame) ausgelöst werden, erfolgen ohne Nutzerinteraktion und können trotzdem den Speicherverbrauch erhöhen.Vor dem Beheben prüfen:Überprüfen Sie immer die Ergebnisse des Agents, um sicherzustellen, dass die vorgeschlagenen Aktionen für die Logik Ihrer Anwendung anwendbar und korrekt sind. Prüfen Sie beispielsweise, ob ein getrennter Knoten Teil eines beabsichtigten Caches ist, bevor Sie den Agenten anweisen, die Referenzen zu löschen.
Anwendungsfälle für die Analyse von Speicherlecks
Weisen Sie Ihren Agenten an, den Speicher bei sich wiederholenden Aktionen wie Timern und Nutzerinteraktionen zu analysieren, anstatt Snapshots manuell zu erstellen und sie von Hand zu vergleichen. Mit diesen Workflows können Sie die Speicheranalyse in Ihren Debugging-Prozess einbinden.
Hinweis:Die Schritte zur Ausführung von Agents sind Beispiele für potenzielles Verhalten. Ihr Agent kann sich anders verhalten.
Nicht gelöschte 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 demontiert wurde. Sie können Ihren Agenten damit beauftragen, zu prüfen, ob der Arbeitsspeicher beim Wechsel zwischen Ansichten korrekt freigegeben wird.
Beispiel für einen 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 Ausführung eines Agents:Ihr Agent erstellt einen Heap-Snapshot auf der Startseite, ruft das Dashboard auf und kehrt zur Startseite zurück, um einen finalen Snapshot zu erstellen. Anschließend werden interne Analysetools verwendet, um Snapshots zu bewerten. Es wird erkannt, dass ein scroll-Listener, der an das window-Objekt angehängt ist, nie gelöscht wurde. Außerdem wird der spezifische Code bereitgestellt, mit dem removeEventListener in der Bereinigungsfunktion Ihrer Komponente aufgerufen werden kann.
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 gespeichert werden, nachdem sie aus dem DOM entfernt wurden.
Beispiel für einen 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 Ausführung eines KI-Agenten:Ihr KI-Agent interagiert mit dem Einstellungsmodal, während er die erforderlichen Baseline-, Ziel- und finalen Snapshots erfasst. Bei der Analyse werden mehrere wachsende Objekte mit der Bezeichnung „Detached HTMLDivElement“ erkannt. Der KI-Agent informiert Sie über das Ergebnis und bittet Sie um Bestätigung, bevor er den Code ändert, um die Variablen, die die DOM-Referenzen enthalten, auf null zu setzen.
Unbegrenzte Caches in fortlaufenden Interaktionen finden
Funktionen wie unendliches Scrollen oder kontinuierliches Abrufen von Daten können zu Speicherlecks führen, wenn die zugrunde liegenden Arrays oder Maps ohne Begrenzung wachsen.
Beispiel für einen 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 Ausführung eines Agents:Ihr Agent analysiert den Speicherstatus vor und nach dem Scrollen. Es wird eine Closure identifiziert, die versehentlich ein großes Array erfasst, das unbegrenzt 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 automatische Speicherbereinigung zu ermöglichen.
Speicherlecks in Hintergrundprozessen beheben
Durch Animations- und Hintergrundtimer kann es ohne explizite Nutzerinteraktion zu Speicherlecks kommen. Sie können Ihren Agent anweisen, das Speicherwachstum im Zeitverlauf zu beobachten, um Speicherlecks für diese Prozesse zu finden.
Beispiel für einen Prompt:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
Beispiel für die Ausführung eines Agents:Ihr Agent untersucht die Canvas-Anwendung und erstellt automatisch in regelmäßigen Abständen Snapshots, um die Arbeitsspeichernutzung im Zeitverlauf zu überwachen. Es analysiert den Heap und stellt fest, dass im Rendering-Loop in jedem Frame neue WebGL-Meshes in ein Array eingefügt werden, ohne dass die vorherigen bereinigt werden. Daher werden Optimierungen für die Wiederverwendung von Objekten vorgeschlagen.