Met Chrome DevTools voor agents kan je programmeeragent geheugenlekken aan de clientzijde (waaronder JavaScript en WebAssembly) in je app analyseren en oplossen. Door de verzameling en analyse van momentopnamen van heap te automatiseren, kan je agent objecten aanwijzen die niet op de juiste manier worden opgeruimd door garbage collection en gerichte code-refactoring voorstellen.
In een workflow met een agent maakt je programmeer-agent meerdere momentopnamen van verschillende app-statussen en gebruikt gespecialiseerde analysetools.
Tools voor foutopsporing in geheugen aanzetten
Standaard maakt Chrome DevTools voor agents alleen de tool take_heapsnapshot
beschikbaar. De tools die momentopnamen van heap analyseren (bijvoorbeeld compare_heapsnapshots, get_heapsnapshot_summary en get_heapsnapshot_retaining_paths), zijn alleen beschikbaar als je de server start met de vlag --memoryDebugging. Zonder deze markering kan je agent wel momentopnamen maken, maar deze niet analyseren.
Als je de tools voor geheugenfoutopsporing wilt aanzetten, voeg je --memoryDebugging toe aan je serverargumenten:
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
Ga naar Configuratie voor meer opties.
Veelvoorkomende patronen van geheugenlekken
Geheugenanalyse is gericht op het vinden van veelvoorkomende lekpatronen, waaronder:
- Niet-opgeruimde event-listeners: Event-listeners die zijn gekoppeld aan globale objecten (zoals
windowofdocument) en die garbage collection voorkomen. - Losgekoppelde DOM-knooppunten: knooppunten die uit de documentstructuur zijn verwijderd, maar nog steeds worden verwezen door een JavaScript-variabele.
- Onbedoelde globale variabelen: Variabelen die zijn gedefinieerd zonder het juiste bereik en die voor altijd in het geheugen blijven.
- Afsluitingen: Afsluitingen die onbedoeld verwijzingen naar grote objecten in hun eigen bereik houden.
- Onbegrensde gegevensstructuren: Gegevensstructuren die worden gebruikt voor caching en die onbeperkt groeien.
Overwegingen voor geheugenanalyse
Houd rekening met het volgende als je geheugenanalyse gebruikt:
Lees onbewerkte snapshots niet rechtstreeks: Laat je agent onbewerkte
.heapsnapshot-bestanden niet rechtstreeks lezen. Ze zijn te groot en overschrijden de contextlimieten. De vaardigheid voor foutopsporing in geheugenlekken geeft medewerkers expliciet de instructie om deze bestanden niet te lezen.De methode met 3 momentopnamen: Om lekken betrouwbaar te vinden, moet je agent over het algemeen 3 momentopnamen maken: een basislijn vóór de actie, een doel na de actie en een laatste momentopname nadat de actie is teruggedraaid. Sommige acties, zoals acties die worden geactiveerd door timers (
setTimeout) of animaties (requestAnimationFrame), vinden plaats zonder gebruikersinteractie en vereisen misschien geen omkeringsstap.Sommige acties, zoals acties die worden geactiveerd door timers (
setTimeout) of animaties (requestAnimationFrame), vinden plaats zonder gebruikersinteractie en kunnen het geheugengebruik nog steeds verhogen.Verifiëren voordat je het probleem oplost: Controleer altijd de bevindingen van de agent om te zorgen dat de voorgestelde acties van toepassing zijn en kloppen voor de logica van je app. Bevestig bijvoorbeeld of een losgekoppelde node deel uitmaakt van een opzettelijke cache voordat je de agent opdracht geeft de verwijzingen ongeldig te maken.
Use cases voor analyse van geheugenlekken
Instructeer je agent om het geheugen te profileren tijdens herhaalde acties, waaronder timers en gebruikersinteracties, in plaats van handmatig snapshots te maken en deze handmatig te vergelijken. Integreer geheugenanalyse in je foutopsporingsproces met deze workflows.
Opmerking: De stappen voor de uitvoering van de agent zijn voorbeelden van mogelijk gedrag. Je agent kan zich anders gedragen.
Niet-gewiste event-listeners waarnemen tijdens navigatie
Apps met één pagina (single-page applications, SPA's) lekken vaak geheugen als ontwikkelaars vergeten globale event-listeners te verwijderen nadat een component is ontkoppeld. Je kunt je agent de opdracht geven om te controleren of het geheugen correct wordt vrijgemaakt als je tussen weergaven navigeert.
Voorbeeldprompt:
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.
Voorbeeld van agentuitvoering: Je agent maakt een baseline momentopname van heap op de homepage, gaat naar het dashboard en gaat terug naar de homepage om een laatste momentopname te maken. Daarna gebruikt de tool interne analysetools om momentopnamen te evalueren, detecteert dat een scroll-listener die aan het window-object is gekoppeld, nooit is gewist en biedt de specifieke code om removeEventListener aan te roepen in de opschoonfunctie van je component.
Losgekoppelde DOM-nodes in UI-componenten identificeren
Modale vensters, dropdownmenu's en complexe UI-componenten laten vaak losgekoppelde DOM-nodes achter als verwijzingen ernaar worden bewaard in JavaScript-variabelen nadat ze uit de DOM zijn verwijderd.
Voorbeeldprompt:
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.
Voorbeeld van agentuitvoering: Je agent werkt met de instellingenmodaal terwijl deze de vereiste basislijn-, doel- en uiteindelijke momentopnamen verzamelt. De analyse toont verschillende groeiende objecten met het label Detached HTMLDivElement. De agent informeert je over de bevinding en vraagt om je bevestiging voordat de code wordt gewijzigd om de variabelen die de DOM-verwijzingen bevatten in te stellen op null.
Onbegrensde caches vinden in continue interacties
Functies zoals oneindig scrollen of continu gegevens ophalen kunnen geheugenlekken veroorzaken als de onderliggende arrays of kaarten oneindig groeien zonder limiet.
Voorbeeldprompt:
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.
Voorbeeld van uitvoering door de agent: De agent analyseert de geheugenstatus vóór en na het scrollen. Het identificeert een sluiting die onbedoeld een grote array vastlegt die zonder limieten groeit. De agent stelt voor om cachelimieten te implementeren of een WeakMap te gebruiken voor gegevens die zijn gekoppeld aan de levenscycli van objecten om een goede garbagecollection mogelijk te maken.
Geheugenlekken in achtergrondprocessen opsporen
Animatie- en achtergrondtimers kunnen geheugen lekken zonder expliciete gebruikersinteractie. Je kunt je agent opdracht geven om de geheugengroei in de loop van de tijd te monitoren om geheugenlekken voor deze processen te vinden.
Voorbeeldprompt:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
Voorbeeld van agentuitvoering: Je agent verkent de canvas-app en maakt automatisch periodieke momentopnamen om het geheugengebruik in de loop van de tijd bij te houden. De tool analyseert de heap en stelt vast dat de rendering-loop bij elk frame nieuwe WebGL-meshes naar een array pusht zonder de vorige op te ruimen. De tool stelt optimalisaties voor hergebruik van objecten voor.