🅰️
ChatGPT intermediate

Melhores práticas de debugging em angular para Angular

Prompt gerado automaticamente para Debugging em Angular em Angular

2 usos Angular

Prompt completo

"Como um desenvolvedor Angular experiente, estou enfrentando um problema de desempenho crítico em uma aplicação de grande escala. Identifiquei que o *change detection* está sendo disparado excessivamente em um componente complexo com muitos subcomponentes, mesmo quando os dados de entrada não mudam.

Gere um guia passo a passo, detalhado e prático, para depurar e otimizar este cenário específico de *change detection* excessivo em Angular. O guia deve abordar:

1.  **Ferramentas e Técnicas de Profiling:** Quais ferramentas (Angular DevTools, Chrome DevTools - Performance/Profiler, etc.) usar e como interpretá-las para identificar a origem exata dos *change detections* desnecessários.
2.  **Estratégias de Otimização:**
    *   Uso correto de `OnPush` (com exemplos práticos para diferentes cenários: inputs primitivos, objetos, arrays).
    *   Técnicas para garantir imutabilidade dos dados (explicação e exemplos de uso de bibliotecas como Immer.js ou estratégias manuais).
    *   Otimização de *event handlers* e *subscriptions* para evitar re-renderizações desnecessárias.
    *   Considerações sobre *trackBy* em `*ngFor` e seu impacto no desempenho.
    *   Estratégias para desativar temporariamente ou controlar o *change detection* em partes da aplicação (`ChangeDetectorRef`).
3.  **Cenários Comuns de Armadilhas:** Quais são os erros comuns que levam a *change detection* excessivo e como evitá-los (ex: modificação direta de objetos passados por `@Input`, uso indevido de *pipes* impuros, etc.).
4.  **Verificação e Validação:** Como verificar se as otimizações implementadas realmente resolveram o problema e não introduziram novos *bugs* ou regressões de desempenho.

O guia deve ser escrito em um tom didático, com exemplos de código concisos quando apropriado, e focado em soluções que possam ser aplicadas em um ambiente de produção real."

Tags relacionadas

Angular Debugging em Angular gerado-automaticamente

Como usar este prompt

1

Clique no botão "Copiar" para copiar o prompt para sua área de transferência

2

Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)

3

Cole o prompt e adapte conforme necessário para seu contexto específico