Use o painel Elementos para inspecionar e editar elementos do DOM.
Visão geral
O painel Elements 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 Elements também tem as seguintes guias com ferramentas relevantes:
Estilos:
- Conferir e depurar regras CSS aplicadas a um elemento de todas as folhas de estilo.
- Encontre qualquer CSS inválido, substituído, inativo ou outro que não funcione como esperado.
- Edite elementos adicionando uma declaração, aplicando uma classe e interagindo com o modelo de caixa.
- Acesse as opções de edição do contêiner com selos encontrados na árvore DOM.
Computado: lista as propriedades resolvidas aplicadas a um elemento conforme são renderizadas pelo Chrome.
Layout: contém opções para modificar as sobreposições de grade e flexbox.
Listeners de evento: lista todos os listeners de evento e os atributos deles. Permite encontrar a origem dos listeners de eventos e filtrar listeners passivos ou bloqueados.
Pontos de interrupção do DOM: lista os pontos de interrupção de mudança do DOM adicionados no painel "Elementos" e permite ativar, desativar, remover ou revelar esses pontos.
Propriedades: selecione um nó DOM para inspecionar e classificar as propriedades próprias e herdadas do objeto.
Acessibilidade: lista os elementos que têm marcadores 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 "Elements" é aberto. Também é possível inspecionar um nó em qualquer lugar da página para abrir automaticamente o painel Elementos.
Para abrir o painel Elementos manualmente:
- 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 mostra o painel Elements na gaveta na parte de baixo da janela.