chromedevtools/debugagem-vazamento-memoria

Debug de Vazamento de Memória

Este skill fornece orientação especializada e fluxos de trabalho para encontrar, diagnosticar e corrigir vazamentos de memória em aplicações JavaScript e Node.js usando as ferramentas MCP do Chrome DevTools.

Pré-requisitos

As ferramentas avançadas de debug de memória (compare_heapsnapshots, get_heapsnapshot_details, etc.) só estão disponíveis quando o servidor é iniciado com a flag --memoryDebugging. Primeiro, verifique se essas ferramentas estão disponíveis; se não estiverem, tente ler o arquivo de configuração MCP para verificar se --memoryDebugging está habilitado.

Princípios Fundamentais

• Prefira as ferramentas MCP de memória: NÃO tente ler arquivos .heapsnapshot brutos diretamente, pois eles são extremamente grandes e consumirão muitos tokens. Use as ferramentas de heap snapshot do Chrome DevTools MCP para resumir, comparar e inspecionar snapshots.
• Isole o Vazamento: Determine se o vazamento está no navegador (lado do cliente) ou no Node.js (lado do servidor).
• Culpados Comuns: Procure por nós DOM desanexados, closures não tratadas, variáveis globais, listeners de eventos que não foram removidos e caches que crescem sem limites. Nota: Nós DOM desanexados às vezes são caches intencionais; sempre pergunte ao usuário antes de anulá-los.
• Feche Snapshots Carregados: Snapshots de heap podem ser grandes. Após concluir uma investigação, use close_heapsnapshot para cada snapshot carregado para liberar a memória mantida pelo servidor MCP.

Fluxos de Trabalho

1. Capturando Snapshots

Ao investigar um vazamento de memória em uma aplicação web frontend, utilize as ferramentas do chrome-devtools-mcp para interagir com a aplicação e tirar snapshots.

• Use ferramentas específicas de página como click, navigate_page, fill, etc. (especificando pageId) para manipular a página até o estado desejado.
• Reverta a página ao estado original após as interações para ver se a memória é liberada.
• Repita as mesmas interações do usuário 10 vezes para amplificar o vazamento.
• Use take_heapsnapshot (com pageId) para salvar arquivos .heapsnapshot no disco nos estados de linha de base, alvo (após ações) e final (após reverter ações).

2. Comparando Snapshots

Depois de gerar arquivos .heapsnapshot usando take_heapsnapshot, compare-os com as ferramentas de memória do Chrome DevTools MCP.

• Comece com get_heapsnapshot_summary para cada snapshot para confirmar que os arquivos carregam e comparar totais de alto nível.
• Use compare_heapsnapshots para comparar snapshots de linha de base e alvo. Comece sem classIndex para o diff resumido e, em seguida, solicite diffs detalhados de classe apenas para crescimento suspeito, especificando classIndex.
• Use a saída resumida de compare_heapsnapshots antes de analisar IDs de nós específicos.

3. Inspecionando Retentores e Cadeias de Dominadores

Quando uma classe ou tipo de objeto cresce inesperadamente, inspecione a cadeia de retenção e os dominadores com as ferramentas MCP antes de alterar o código.

• Use get_heapsnapshot_class_nodes para listar instâncias da classe suspeita.
• Use get_heapsnapshot_retainers, get_heapsnapshot_retaining_paths, get_heapsnapshot_dominators e get_heapsnapshot_edges para entender por que nós representativos ainda estão acessíveis.
• Use get_heapsnapshot_object_details com um nodeId específico para recuperar metadados detalhados do objeto (tamanho, tipo, distância e estado de desanexação do DOM).
• Use get_heapsnapshot_duplicate_strings quando o crescimento de strings domina o diff.
• Leia references/common-leaks.md para exemplos de vazamentos de memória comuns e como corrigi-los depois que o caminho de retenção apontar para o código da aplicação.

4. Análise Avançada e Filtros Categorizados

Use as ferramentas MCP de memória e filtros integrados para identificar categorias específicas de vazamento diretamente, sem ferramentas externas.

• Use get_heapsnapshot_details ou get_heapsnapshot_class_nodes com filterName para focar em causas comuns de vazamento:
  • objectsRetainedByDetachedDomNodes: Identifica elementos DOM desanexados retidos na memória.
  • objectsRetainedByEventHandlers: Identifica objetos mantidos vivos por listeners de eventos não removidos.
  • objectsRetainedByContexts: Identifica objetos presos em closures ou contextos de execução.
  • objectsRetainedByConsole: Identifica objetos retidos por logs de console.