Use o painel Elementos para inspecionar e editar elementos do DOM.
Visão geral
O painel Elementos fornece uma interface robusta para inspecionar e manipular o DOM. Você pode usar a árvore do DOM, que é semelhante a um documento HTML, para selecionar nós específicos do DOM e modificá-los com outras ferramentas.
O painel Elementos também tem estas guias com ferramentas relevantes:
Estilos:
- Visualizar e depurar regras CSS aplicadas a um elemento de todas as folhas de estilo.
- Encontre CSS inválido, substituído, inativo ou outro CSS que não funcione como esperado.
- Edite elementos adicionando uma declaração, aplicando uma classe e interagindo com o modelo Box.
- Acesse as opções de edição de contêiner com os selos encontrados na árvore do 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 respectivos atributos. Permite encontrar a fonte de 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 ativar, desativar, remover ou revelá-los.
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 Elements é 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:
- 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 Show Elements e pressione Enter. O DevTools exibe o painel Elements na Gaveta na parte inferior da janela do DevTools.