Narzędzia deweloperskie w Chrome dla agentów umożliwiają agentowi kodowania analizowanie i naprawianie wycieków pamięci po stronie klienta (w tym JavaScript 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 mechanizm odśmiecania, i sugerować ukierunkowane refaktoryzacje kodu.
W Agentic Workflows agent kodowania wykonuje wiele zrzutów w różnych stanach aplikacji i używa specjalistycznych narzędzi do analizy.
Włączanie narzędzi do debugowania pamięci
Domyślnie Narzędzia deweloperskie w Chrome dla agentów udostępniają tylko narzędzie take_heapsnapshot. Narzędzia do analizowania zrzutów sterty (np. compare_heapsnapshots, get_heapsnapshot_summary i get_heapsnapshot_retaining_paths) są dostępne tylko wtedy, gdy uruchomisz serwer z flagą --memoryDebugging. Bez tej flagi agent może przechwytywać zrzuty, ale nie może ich analizować.
Aby włączyć narzędzia do debugowania pamięci, dodaj --memoryDebugging do argumentów serwera:
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
Więcej opcji znajdziesz w sekcji Konfiguracja.
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 (takich jak
windowlubdocument), które uniemożliwiają odśmiecanie. - Odłączone węzły DOM: węzły usunięte z drzewa dokumentu, ale nadal przywoływane przez zmienną JavaScript.
- Nieumyślne zmienne globalne: zmienne zadeklarowane bez odpowiedniego zakresu, które pozostają w pamięci na zawsze.
- Domykanie: domykanie, które nieumyślnie zachowuje odniesienia do dużych obiektów w swoim zakresie.
- Nieograniczone struktury danych: struktury danych używane do buforowania, które rosną bez ograniczeń.
Wskazówki dotyczące analizy pamięci
Podczas analizy pamięci pamiętaj o tych kwestiach:
Nie czytaj bezpośrednio surowych zrzutów: nie pozwól agentowi bezpośrednio odczytywać surowych plików
.heapsnapshot. Są one zbyt duże i przekraczają limity kontekstu. Umiejętność debugowania wycieków pamięci wyraźnie instruuje agentów, aby nie odczytywali tych plików.Metodologia 3 zrzutów: aby niezawodnie wykrywać wycieki, agent musi zwykle przechwycić 3 zrzuty: zrzut bazowy przed działaniem, zrzut docelowy po działaniu i zrzut końcowy po przywróceniu działania. Pamiętaj, że niektóre działania, np. wywoływane przez timery (
setTimeout) lub animacje (requestAnimationFrame), występują bez interakcji użytkownika i mogą nie wymagać kroku przywracania.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 naprawieniem: zawsze sprawdzaj wyniki agenta, aby upewnić się, że proponowane przez niego działania są odpowiednie i prawidłowe w przypadku logiki aplikacji. Na przykład przed poinstruowaniem agenta, aby ustawił odniesienia na wartość null, sprawdź, czy odłączony węzeł jest częścią zamierzonego bufora.
Przypadki użycia analizy wycieków pamięci
Poproś agenta o profilowanie pamięci podczas powtarzających się działań, w tym timerów i interakcji użytkownika, zamiast ręcznie wykonywać zrzuty i porównywać je. Zintegruj analizę pamięci z procesem debugowania za pomocą tych przepływów pracy.
Uwaga: kroki wykonywania agenta to przykłady potencjalnego zachowania. Twój agent może działać inaczej.
Wykrywanie nieusuniętych detektorów zdarzeń podczas nawigacji
Aplikacje jednostronicowe (SPA) często powodują wycieki pamięci, gdy deweloperzy zapomną usunąć globalne detektory zdarzeń po odmontowaniu komponentu. Możesz zlecić agentowi 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ładowe wykonanie agenta: agent wykonuje bazowy zrzut sterty na stronie głównej, przechodzi do panelu i wraca na stronę główną, aby wykonać końcowy zrzut sterty. Następnie używa wewnętrznych narzędzi do analizy, aby ocenić zrzuty, wykrywa, że detektor scroll dołączony do obiektu window nigdy nie został usunięty, i podaje konkretny kod, aby wywołać removeEventListener w funkcji czyszczenia komponentu.
Identyfikowanie odłączonych węzłów DOM w komponentach interfejsu
Okna modalne, listy rozwijane i złożone komponenty interfejsu często pozostawiają odłączone węzły DOM, jeśli odniesienia do nich są przechowywane w zmiennych JavaScript po ich usunięciu 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ładowe wykonanie agenta: agent wchodzi w interakcje z oknem modalnym ustawień, zbierając wymagane zrzuty bazowe, docelowe i końcowe. Analiza ujawnia kilka rosnących obiektów oznaczonych jako Detached HTMLDivElement. Agent informuje Cię o tym i prosi o potwierdzenie przed zmianą kodu, aby ustawić zmienne zawierające odniesienia do DOM na null.
Znajdowanie nieograniczonych buforów w ciągłych interakcjach
Funkcje takie jak przewijanie nieskończone lub ciągłe pobieranie danych mogą powodować wycieki pamięci, jeśli podstawowe tablice lub mapy rosną 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ładowe wykonanie agenta: agent analizuje stan pamięci przed i po przewinięciu. Wykrywa domknięcie, które nieumyślnie przechwytuje dużą tablicę rosnącą bez ograniczeń. Agent sugeruje wdrożenie limitów buforowania lub użycie WeakMap w przypadku danych powiązanych z cyklami życia obiektów, aby umożliwić prawidłowe odśmiecanie.
Debugowanie wycieków pamięci w procesach w tle
Animacje i timery działające 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ładowe wykonanie agenta: agent eksploruje aplikację canvas i automatycznie wykonuje okresowe zrzuty, aby monitorować wykorzystanie pamięci w czasie. Analizuje stertę i stwierdza, że pętla renderowania umieszcza nowe siatki WebGL w tablicy w każdej klatce bez odśmiecania poprzednich, sugerując optymalizacje ponownego użycia obiektów.