Analizowanie wycieków pamięci za pomocą agentów AI

Matthias Rohmer

José Luis Zapata

Narzędzia deweloperskie w Chrome dla agentów umożliwiają agentowi kodującemu analizowanie i naprawianie wycieków pamięci po stronie klienta (w tym JavaScriptu i WebAssembly) w aplikacji. Dzięki automatyzacji zbierania i analizowania zrzutów sterty agent może wskazywać obiekty, które nie są prawidłowo usuwane przez odśmiecanie pamięci, i sugerować ukierunkowane refaktoryzacje kodu.

W przypadku przepływu pracy opartego na agentach agent kodowania wykonuje wiele zrzutów w różnych stanach aplikacji i korzysta ze specjalistycznych narzędzi analitycznych.

Typowe wzorce wycieków pamięci

Analiza pamięci koncentruje się na znajdowaniu typowych wzorców wycieków, w tym:

• Nieusunięte detektory zdarzeń: detektory zdarzeń dołączone do obiektów globalnych (np. window lub document), które uniemożliwiają odśmiecanie pamięci.
• Odłączone węzły DOM: węzły usunięte z drzewa dokumentu, ale nadal odwoływane przez zmienną JavaScript.
• Nieumyślne zmienne globalne: zmienne zadeklarowane bez odpowiedniego zakresu, które pozostają w pamięci na zawsze.
• Zamknięcia: zamknięcia, które nieumyślnie zachowują odniesienia do dużych obiektów w swoim zakresie.
• Nieograniczone struktury danych: struktury danych używane do buforowania, które rosną bez ograniczeń.

Istotne kwestie dotyczące analizy pamięci

Podczas korzystania z analizy pamięci pamiętaj o tych kwestiach:

• Nie odczytuj bezpośrednio surowych migawek: nie zezwalaj agentowi na bezpośrednie odczytywanie plików .heapsnapshot. Są za duże i przekraczają limity kontekstu. Umiejętność debugowania wycieków pamięci wyraźnie instruuje agentów, aby unikali odczytywania tych plików.

• Metoda trzech zrzutów: aby niezawodnie wykrywać wycieki, agent musi zwykle wykonać 3 zrzuty: zrzut bazowy przed działaniem, zrzut docelowy po działaniu i zrzut końcowy po wycofaniu działania. Pamiętaj, że niektóre działania, np. te wywoływane przez timery (setTimeout) lub animacje (requestAnimationFrame), występują bez interakcji ze strony użytkownika i mogą nie wymagać kroku cofania.

  Pamiętaj, że niektóre działania, np. wywoływane przez liczniki czasu (setTimeout) lub animacje (requestAnimationFrame), występują bez interakcji użytkownika i mogą nadal zwiększać wykorzystanie pamięci.

• Sprawdź przed naprawą: zawsze sprawdzaj wyniki działania agenta, aby mieć pewność, że proponowane przez niego działania są odpowiednie i prawidłowe w kontekście logiki Twojej aplikacji. Na przykład przed wydaniem agentowi polecenia unieważnienia odwołań sprawdź, czy odłączony węzeł jest częścią zamierzonej pamięci podręcznej.

Przypadki użycia analizy wycieków pamięci

Poproś agenta o profilowanie pamięci podczas powtarzalnych działań, w tym timerów i interakcji użytkownika, zamiast ręcznie robić zrzuty i porównywać je. Zintegruj analizę pamięci z procesem debugowania, korzystając z tych przepływów pracy.

Uwaga: kroki wykonywania agenta to przykłady potencjalnego działania. Twój agent może działać inaczej.

Wykrywanie niewyczyszczonych detektorów zdarzeń podczas nawigacji

Aplikacje jednostronicowe (SPA) często powodują wycieki pamięci, gdy deweloperzy zapomną usunąć globalne odbiorniki zdarzeń po odmontowaniu komponentu. Możesz poprosić agenta o sprawdzenie, czy pamięć jest prawidłowo zwalniana podczas przechodzenia między widokami.

Przykładowy 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.

Przykład działania agenta: agent wykonuje podstawowy zrzut sterty na stronie głównej, przechodzi do panelu i wraca na stronę główną, aby wykonać ostateczny zrzut. Następnie używa wewnętrznych narzędzi analitycznych do oceny migawek, wykrywa, że słuchacz scroll dołączony do obiektu window nigdy nie został wyczyszczony, i podaje konkretny kod do wywołania removeEventListener w funkcji czyszczenia komponentu.

Identyfikowanie odłączonych węzłów DOM w komponentach interfejsu

Okna modalne, menu i złożone komponenty interfejsu często pozostawiają odłączone węzły DOM, jeśli odwołania do nich są przechowywane w zmiennych JavaScript po usunięciu ich z DOM.

Przykładowy 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.

Przykład działania agenta: agent wchodzi w interakcje z oknem ustawień, zbierając wymagane zrzuty bazowe, docelowe i końcowe. Analiza wykrywa kilka rosnących obiektów oznaczonych jako Detached HTMLDivElement. Agent informuje Cię o wyniku i prosi o potwierdzenie przed zmianą kodu, aby ustawić zmienne zawierające odwołania do DOM na null.

Znajdowanie nieograniczonych pamięci podręcznych w ciągłych interakcjach

Funkcje takie jak przewijanie nieskończone lub ciągłe pobieranie danych mogą powodować wyciek pamięci, jeśli bazowe tablice lub mapy rosną w nieskończoność bez ograniczeń.

Przykładowy 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.

Przykład działania agenta: agent analizuje stan pamięci przed przewinięciem i po nim. Wykrywa zamknięcie, które nieumyślnie przechwytuje dużą tablicę rosnącą bez ograniczeń. Agent sugeruje wdrożenie limitów buforowania lub użycie obiektu WeakMap w przypadku danych powiązanych z cyklami życia obiektów, aby umożliwić prawidłowe odśmiecanie pamięci.

Debugowanie wycieków pamięci w procesach w tle

Animacje i timery w tle mogą powodować wycieki pamięci bez wyraźnej interakcji użytkownika. Możesz poprosić agenta o monitorowanie wzrostu pamięci w czasie, aby wykryć wycieki pamięci w tych procesach.

Przykładowy prompt:

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

Przykład działania agenta: agent eksploruje aplikację Canvas i automatycznie wykonuje okresowe zrzuty, aby monitorować wykorzystanie pamięci w czasie. Analizuje on stertę i wykrywa, że pętla renderowania umieszcza nowe siatki WebGL w tablicy w każdej klatce bez usuwania poprzednich, co sugeruje optymalizacje ponownego użycia obiektów.