Olá a todos!

Neste artigo, vou falar com você sobre a ferramenta chamada Angular DevTools que foi lançada pela primeira vez com o Angular 12. Esta é a ferramenta que permite depurar seu aplicativo Angular melhor para ver a estrutura de seu aplicativo.

Ele pode lembrá-lo da extensão de Augury que você pode usar. Mas Augury não suporta o renderizador Ivy. Angular DevTools é compatível e funciona a partir do Angular 9 e superior.

Vamos começar!

Primeiramente, gostaria de compartilhar meu inventário básico de aplicativos Angular com você. Também vou usar este aplicativo para explicar as ferramentas de desenvolvimento. Você também pode usar e revisar o aplicativo. Usei esquemas NgRx e Angular Material .

Aqui está meu repositório GitHub:

Além disso, você pode verificar a versão ao vivo:

Antes de começar, gostaria de compartilhar a documentação oficial com você:

Em sua página oficial, há um vídeo de explicação rápida, e você precisa baixar esta extensão:

Esta extensão agora tem um fundo preto, o que significa que nenhum aplicativo Angular foi detectado. Temos que navegar para algum aplicativo Angular que está sendo executado no modo de desenvolvimento.

Vamos apenas navegar até este aplicativo. Aqui você pode ver o aplicativo do workshop e agora você vê que o logotipo do Angular ficou vermelho, o que significa que o modo em profundidade do aplicativo está em execução.

Abra as ferramentas de desenvolvimento clicando no comando. Aqui você pode ver a guia Angular. Esta é na verdade nossa extensão e, se navegarmos até lá, poderemos ver a árvore de componentes.

1. Componentes

Aqui vemos a árvore de componentes.

• Você pode ver aqui que temos o campo de formulário inteligente “componente do botão da barra de ferramentas do mapa” e assim por diante.
• Você pode clicar nele para ver as diferentes propriedades dele.
• Você pode navegar pelas setas para baixo e para cima e pode pesquisar determinados componentes.
• Você pode pressionar Enter e ver os componentes que correspondem a este padrão.
• Você também pode interagir com essas propriedades. Você pode alterar os valores e ver imediatamente o feedback em sua IU, por exemplo, desabilitar o botão e ver as alterações.
• Você pode basicamente ler qualquer valor de um componente ou chamar qualquer método desse componente também.

Você pode ver que é mod select aqui, e você pode ver o código-fonte. Você pode configurar pontos de interrupção e depurar este componente.

Então é isso sobre a guia deste componente.

2. Profiler

Vamos explorar o que está dentro do criador de perfil.

O [rofiler tem tudo a ver com desempenho, ou seja, depuração de detecção de alterações, porque os aplicativos angulares estão relacionados a detecções de alterações e é assim que podemos depurar.

• Em primeiro lugar, clique no botão para iniciar a gravação. Agora, cada execução de detecção de alteração está sendo registrada pelo Angular DevTools. Você só precisa interagir com alguns elementos em sua página para acionar a detecção de alterações.

• Você pode ver a barra vertical. Esta barra indica a execução do círculo de detecção de alterações. Se você interagir o suficiente, pode interromper a gravação.

• Você pode ver que outra barra apareceu. Vamos clicar nele
  e ver o que mostra. Se você clicar em qualquer um deles, verá o tempo total gasto para esta execução de detecção de alterações.

• Sabemos que existem três coisas que podem acionar a detecção de alterações no Angular. Esses são eventos como foco, clique e mouse. Se esses eventos tiverem algum manipulador, uma chamada HTTP pode acionar a execução de detecção de mudança.
• Se você tiver muitas execuções de detecção de alterações e estiver procurando por uma, poderá usar o filtro.

Conclusão

As DevTools, que serão adotadas por quem usa Angular no dia a dia, vão melhorar dia a dia e serão ainda mais úteis para nós.

Você pode verificar o artigo oficial de Minko Gechev .

Obrigado por ler!