Debugar sua aplicação
A aba Components permite explorar a estrutura da sua aplicação. Você pode visualizar as instâncias de components e directives no DOM e inspecionar ou modificar seu estado.
Explorar a estrutura da aplicação
A árvore de components exibe uma relação hierárquica dos components e directives dentro da sua aplicação.
Clique nos components ou directives individuais no explorador de components para selecioná-los e visualizar suas propriedades. O Angular DevTools exibe propriedades e metadados no lado direito da árvore de components.
Para procurar um component ou directive por nome, use a caixa de busca acima da árvore de components.
Navegar para o host node
Para ir ao elemento host de um component ou directive específico, clique duas vezes nele no explorador de components. O Angular DevTools abrirá a aba Elements no Chrome ou a aba Inspector no Firefox, e selecionará o nó DOM associado.
Navegar para o código-fonte
Para components, o Angular DevTools permite navegar para a definição do component na aba Sources (Chrome) e aba Debugger (Firefox). Após selecionar um component específico, clique no ícone no canto superior direito da visualização de propriedades:
Atualizar valor de propriedade
Assim como as DevTools dos navegadores, a visualização de propriedades permite editar o valor de um input, output ou outras propriedades.
Clique com o botão direito no valor da propriedade e, se a funcionalidade de edição estiver disponível para este tipo de valor, uma entrada de texto aparecerá.
Digite o novo valor e pressione Enter para aplicar este valor à propriedade.
Acessar component ou directive selecionado no console
Como um atalho no console, o Angular DevTools fornece acesso a instâncias de components ou directives recentemente selecionados.
Digite $ng0 para obter uma referência à instância do component ou directive atualmente selecionado, e digite $ng1 para a instância selecionada anteriormente, $ng2 para a instância selecionada antes dela, e assim por diante.
Selecionar um directive ou component
Semelhante às DevTools dos navegadores, você pode inspecionar a página para selecionar um component ou directive específico. Clique no ícone Inspect element no canto superior esquerdo dentro do Angular DevTools e passe o mouse sobre um elemento DOM na página. A extensão reconhece os directives e/ou components associados e permite selecionar o elemento correspondente na árvore de Components.
Inspecione seus injectors
NOTA: A Árvore de Injector está disponível para aplicações Angular construídas com a versão 17 ou superior.
Visualizar a hierarquia de injectors da sua aplicação
A aba Injector Tree permite explorar a estrutura dos Injectors configurados na sua aplicação. Aqui você verá duas árvores representando a hierarquia de injectors da sua aplicação. Uma árvore é sua hierarquia de environment, a outra é sua hierarquia de element.
Visualizar caminhos de resolução
Quando um injector específico é selecionado, o caminho que o algoritmo de injeção de dependência do Angular percorre daquele injector até a raiz é destacado. Para element injectors, isso inclui destacar os environment injectors para os quais o algoritmo de injeção de dependência salta quando uma dependência não pode ser resolvida na hierarquia de element.
Veja regras de resolução para mais detalhes sobre como o Angular resolve caminhos de resolução.
Visualizar providers do injector
Clicar em um injector que possui providers configurados exibirá esses providers em uma lista à direita da visualização da árvore de injector. Aqui você pode visualizar o token fornecido e seu tipo.
