Met Chrome DevTools voor agents kan uw codeeragent geheugenlekken aan de clientzijde (inclusief JavaScript en WebAssembly) in uw applicatie analyseren en verhelpen. Door het verzamelen en analyseren van heap-snapshots te automatiseren, kan uw agent objecten opsporen die niet correct worden opgeruimd door de garbage collector en gerichte code-refactoring voorstellen.
In een agentische workflow maakt uw codeeragent meerdere momentopnamen van verschillende applicatiestatussen en gebruikt daarbij gespecialiseerde analysetools.
Veelvoorkomende geheugenlekpatronen
Geheugenanalyse richt zich op het vinden van veelvoorkomende lekpatronen, waaronder:
- Niet-opgeruimde gebeurtenislisteners: Gebeurtenislisteners die zijn gekoppeld aan globale objecten (zoals
windowofdocument) en die voorkomen dat de garbage collector ze verwijdert. - Losgekoppelde DOM-knooppunten: Knooppunten die uit de documentstructuur zijn verwijderd, maar nog steeds worden aangeroepen door een JavaScript-variabele.
- Onbedoelde globale variabelen: Variabelen die zonder de juiste scope zijn gedeclareerd en die voor altijd in het geheugen blijven.
- Closures: Closures die onbedoeld verwijzingen naar grote objecten binnen hun eigen bereik houden.
- Onbegrensde datastructuren: Datastructuren die worden gebruikt voor caching en die onbeperkt kunnen groeien.
Overwegingen bij geheugenanalyse
Houd bij het uitvoeren van geheugenanalyse rekening met het volgende:
Lees geen onbewerkte snapshots rechtstreeks: Laat uw agent geen onbewerkte
.heapsnapshot-bestanden rechtstreeks lezen. Deze bestanden zijn te groot en overschrijden de contextlimieten. De vaardigheid voor het debuggen van geheugenlekken instrueert agents expliciet om het lezen van deze bestanden te vermijden.De methode met drie momentopnamen: Om lekken betrouwbaar te vinden, moet uw agent doorgaans drie momentopnamen vastleggen: een basislijn vóór de actie, een doelmomentopname na de actie en een laatste momentopname na het terugdraaien van de actie. Houd er rekening mee dat sommige acties, zoals die welke worden geactiveerd door timers (
setTimeout) of animaties (requestAnimationFrame), plaatsvinden zonder gebruikersinteractie en mogelijk geen terugdraaistap vereisen.Houd er rekening mee dat sommige acties, zoals die welke worden geactiveerd door timers (
setTimeout) of animaties (requestAnimationFrame), plaatsvinden zonder tussenkomst van de gebruiker en toch het geheugenverbruik kunnen verhogen.Controleer vóór het oplossen van problemen: Controleer altijd de bevindingen van de agent om er zeker van te zijn dat de voorgestelde acties toepasbaar en correct zijn voor de logica van uw applicatie. Controleer bijvoorbeeld of een losgekoppeld knooppunt deel uitmaakt van een opzettelijke cache voordat u de agent opdracht geeft de verwijzingen te annuleren.
Gebruiksscenario's voor geheugenlekanalyse
Geef uw agent de opdracht om het geheugen te profileren tijdens repetitieve acties, zoals timers en gebruikersinteracties, in plaats van handmatig momentopnamen te maken en deze te vergelijken. Integreer geheugenanalyse in uw debugproces met behulp van deze workflows.
Let op: De stappen die de agent uitvoert, zijn voorbeelden van mogelijk gedrag. Uw agent kan zich anders gedragen.
Detecteer niet-verwijderde gebeurtenislisteners tijdens navigatie
Single-page applicaties (SPA's) lekken vaak geheugen wanneer ontwikkelaars vergeten globale eventlisteners te verwijderen nadat een component is ontkoppeld. U kunt uw agent de opdracht geven om te controleren of het geheugen correct wordt vrijgegeven bij het navigeren tussen weergaven.
Voorbeeldopdracht:
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: Uw agent maakt een basismomentopname van de heap op de startpagina, navigeert naar het dashboard en navigeert terug naar de startpagina om een laatste momentopname te maken. Vervolgens gebruikt de agent interne analysetools om de momentopnamen te evalueren, detecteert dat een scroll die aan het window object is gekoppeld nooit is gewist en levert de specifieke code om removeEventListener aan te roepen in de opschoonfunctie van uw component.
Identificeer losgekoppelde DOM-knooppunten in UI-componenten.
Modals, dropdownmenu's en complexe UI-componenten laten vaak losgekoppelde DOM-knooppunten achter als er na verwijdering uit de DOM nog verwijzingen naar deze knooppunten in JavaScript-variabelen worden bewaard.
Voorbeeldopdracht:
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: Uw agent interacteert met het instellingenvenster terwijl de vereiste basis-, doel- en eindmomentopnamen worden verzameld. De analyse onthult verschillende groeiende objecten met het label 'Detached HTMLDivElement'. De agent informeert u over deze bevinding en vraagt om uw bevestiging voordat de code wordt aangepast om de variabelen die de DOM-referenties bevatten op null te zetten.
Vind onbegrensde caches in continue interacties.
Functies zoals oneindig scrollen of continu gegevens ophalen kunnen geheugenlekken veroorzaken als de onderliggende arrays of maps onbeperkt blijven groeien zonder een maximumlimiet.
Voorbeeldopdracht:
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 agentuitvoering: Uw agent analyseert de geheugenstatus vóór en na het scrollen. Hij identificeert een closure die onbedoeld een grote array vastlegt die onbeperkt groeit. De agent stelt voor om cachelimieten in te stellen of een WeakMap te gebruiken voor gegevens die gerelateerd zijn aan de levenscyclus van objecten, om een correcte garbage collection mogelijk te maken.
Debug geheugenlekken in achtergrondprocessen
Animaties en achtergrondtimers kunnen geheugenlekken veroorzaken zonder expliciete tussenkomst van de gebruiker. U kunt uw agent instrueren om de geheugengroei in de loop van de tijd te monitoren om geheugenlekken bij deze processen op te sporen.
Voorbeeldopdracht:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
Voorbeeld van agentuitvoering: Uw agent verkent de canvasapplicatie en maakt automatisch periodieke momentopnamen om het geheugengebruik in de loop van de tijd te monitoren. De agent analyseert de heap en identificeert dat de renderinglus in elk frame nieuwe WebGL-meshes aan een array toevoegt zonder de vorige meshes te verwijderen, wat optimalisaties voor hergebruik van objecten suggereert.