Use o painel Elementos para inspecionar e editar elementos DOM.
Visão geral
O painel Elementos oferece uma interface robusta para inspecionar e manipular o DOM. Você pode usar a árvore DOM, que se assemelha a um documento HTML, para selecionar nós DOM específicos e modificá-los com outras ferramentas.
O painel Elementos também tem as seguintes guias que contêm ferramentas relevantes:
Estilos:
- Visualizar e depurar regras CSS aplicadas a um elemento em todas as folhas de estilo.
- Encontre CSS inválido, substituído, inativo ou outro que não funciona como esperado.
- Para editar elementos, adicione uma declaração, aplique uma classe e interaja com o modelo Box (link em inglês).
- Acesse as opções de edição do contêiner com selos encontrados na árvore DOM.
Calculada: lista as propriedades resolvidas aplicadas a um elemento conforme elas são renderizadas pelo Chrome.
Layout: contém opções para modificar as sobreposições de grade e flexbox.
Listeners de eventos: lista todos os listeners de eventos e os atributos deles. Permite encontrar a origem dos listeners de eventos e filtrar listeners passivos ou de bloqueio.
Pontos de interrupção DOM: lista os pontos de interrupção de mudança DOM adicionados a partir do painel Elementos e permite que você os ative, desative, remova ou revele.
Propriedades: selecione um nó DOM para inspecionar e classificar as propriedades próprias e herdadas do objeto.
Acessibilidade: lista elementos que têm rótulos ARIA e as propriedades deles. Permite alternar e inspecionar uma árvore de acessibilidade (experimental).
Abrir o painel Elementos
Por padrão, quando você abre o DevTools, o painel Elementos é aberto. Também é possível inspecionar um nó em qualquer lugar da página para abrir automaticamente o painel Elementos.
Para abrir manualmente o painel Elementos, siga estas etapas:
- Abra o DevTools.
- Abra o menu de comando pressionando:
- macOS: Command+Shift+P
- Windows, Linux e ChromeOS: Control + Shift + P
- Comece a digitar
Elements, selecione Mostrar elementos e pressione Enter. O DevTools exibe o painel Elementos na Gaveta na parte de baixo da janela.