O Chrome DevTools para Agentes permite que seu agente de programação analise e corrija vazamentos de memória do lado do cliente (incluindo JavaScript e WebAssembly) no aplicativo. Ao automatizar a coleta e a análise de instantâneos de alocação heap, o agente pode identificar objetos que não estão sendo coletados corretamente e sugerir a refatoração de código direcionada.
Em um fluxo de trabalho Agentic Workflows, seu agente de programação faz vários snapshots em diferentes estados do aplicativo e usa ferramentas de análise especializadas.
Ativar ferramentas de depuração de memória
Por padrão, o Chrome DevTools para Agentes expõe apenas a ferramenta take_heapsnapshot. As ferramentas que analisam instantâneos de alocação heap (por exemplo, compare_heapsnapshots, get_heapsnapshot_summary e get_heapsnapshot_retaining_paths) só estão disponíveis quando você inicia o servidor com a flag --memoryDebugging. Sem essa flag, o agente pode capturar snapshots, mas não pode analisá-los.
Para ativar as ferramentas de depuração de memória, adicione --memoryDebugging aos argumentos do servidor:
"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]
Para mais opções, consulte Configuração.
Padrões comuns de vazamento de memória
A análise de memória se concentra em encontrar padrões comuns de vazamento, incluindo:
- Listeners de eventos não limpos:listeners de eventos anexados a objetos globais (como
windowoudocument) que impedem a coleta de lixo. - Nós DOM desanexados:nós removidos da árvore de documentos, mas ainda referenciados por uma variável JavaScript.
- Variáveis globais não intencionais:variáveis declaradas sem escopo adequado que permanecem na memória para sempre.
- Fechamentos:fechamentos que mantêm referências a objetos grandes no próprio escopo.
- Estruturas de dados não vinculadas:estruturas de dados usadas para armazenamento em cache que crescem sem limites.
Considerações para análise de memória
Ao usar a análise de memória, tenha em mente o seguinte:
Não leia snapshots brutos diretamente:não permita que o agente leia arquivos
.heapsnapshotbrutos diretamente. Eles são muito grandes e excedem os limites de contexto. A habilidade de depuração de vazamento de memória instrui explicitamente os agentes a evitar a leitura desses arquivos.A metodologia de três snapshots:para encontrar vazamentos de forma confiável, o agente geralmente precisa capturar três snapshots: uma linha de base antes da ação, um destino após a ação e um snapshot final após reverter a ação. Algumas ações, como as acionadas por timers (
setTimeout) ou animações (requestAnimationFrame), ocorrem sem interação do usuário e podem não exigir uma etapa de reversão.Algumas ações, como as acionadas por timers (
setTimeout) ou animações (requestAnimationFrame), ocorrem sem interação do usuário e ainda podem aumentar o uso da memória.Verifique antes de corrigir:sempre revise as descobertas do agente para garantir que as ações propostas sejam aplicáveis e corretas para a lógica do aplicativo. Por exemplo, confirme se um nó desanexado faz parte de um cache intencional antes de instruir o agente a anular as referências.
Casos de uso para análise de vazamento de memória
Instrua o agente a criar um perfil de memória durante ações repetitivas, incluindo timers e interações do usuário, em vez de fazer snapshots e diferenciá-los manualmente. Integre a análise de memória ao processo de depuração com estes fluxos de trabalho.
Observação:as etapas de execução do agente são exemplos de comportamento potencial. O agente pode agir de maneira diferente.
Detectar listeners de eventos não limpos durante a navegação
Os aplicativos de página única (SPAs, na sigla em inglês) geralmente vazam memória quando os desenvolvedores se esquecem de remover listeners de eventos globais após a desmontagem de um componente. Você pode atribuir ao agente a tarefa de verificar se a memória é liberada corretamente ao navegar entre as visualizações.
Exemplo de comando:
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.
Exemplo de execução do agente:o agente faz um instantâneo de alocação heap de linha de base na página inicial, navega até o painel e volta para a página inicial para fazer um instantâneo final. Em seguida, ele usa ferramentas de análise internas para avaliar snapshots, detecta que um listener scroll anexado ao objeto window nunca foi limpo e fornece o código específico para chamar removeEventListener na função de limpeza do componente.
Identificar nós DOM desanexados em componentes de IU
Modais, menus suspensos e componentes de IU complexos geralmente deixam nós DOM desanexados se as referências a eles forem mantidas em variáveis JavaScript depois de serem removidas do DOM.
Exemplo de comando:
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.
Exemplo de execução do agente:o agente interage com o modal de configurações ao coletar os snapshots de linha de base, de destino e final necessários. A análise revela vários objetos crescentes rotulados como HTMLDivElement desanexado. O agente informa a descoberta e pede sua confirmação antes de mudar o código para definir as variáveis que contêm as referências DOM como null.
Encontrar caches não vinculados em interações contínuas
Recursos como rolagem infinita ou busca contínua de dados podem vazar memória se as matrizes ou mapas subjacentes crescerem indefinidamente sem um limite.
Exemplo de comando:
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.
Exemplo de execução do agente:o agente analisa o estado da memória antes e depois da rolagem. Ele identifica um fechamento que captura involuntariamente uma matriz grande que cresce sem limites. O agente sugere a implementação de limites de armazenamento em cache ou o uso de um WeakMap para dados associados aos ciclos de vida do objeto para permitir a coleta de lixo adequada.
Depurar vazamentos de memória em processos em segundo plano
Timers de animação e de segundo plano podem vazar memória sem interação explícita do usuário. Você pode instruir o agente a monitorar o crescimento da memória ao longo do tempo para encontrar vazamentos de memória para esses processos.
Exemplo de comando:
Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.
Exemplo de execução do agente:o agente explora o aplicativo de tela e faz snapshots periódicos automaticamente para monitorar o uso da memória ao longo do tempo. Ele analisa o heap e identifica que o loop de renderização envia novas malhas WebGL para uma matriz em cada frame sem coletar as anteriores, sugerindo otimizações para a reutilização de objetos.