Use o painel Elementos para inspecionar e editar elementos do DOM.
Visão geral
O painel Elementos oferece uma interface robusta para inspecionar e manipular o DOM. Você pode usar a árvore do DOM, que se parece com 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 com ferramentas relevantes:
Estilos:
- Ver e depurar regras de CSS aplicadas a um elemento de todas as folhas de estilo.
- Encontre CSSs inválidos, substituídos, inativos ou outros que não funcionam 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 de contêiner com os badges encontrados na árvore do DOM.
Calculado: lista as propriedades resolvidas aplicadas a um elemento conforme ele é renderizado pelo Chrome.
Layout: contém opções para modificar 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 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ó do DOM para inspecionar e classificar as propriedades próprias e herdadas do objeto.
Acessibilidade: lista elementos com rótulos ARIA e as propriedades deles. Permite ativar/desativar e inspecionar uma árvore de acessibilidade (experimental).
Abra o painel "Elementos".
Por padrão, quando você abre o DevTools, o painel "Elementos" é aberto. Você também pode 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 comandos pressionando:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Comece a digitar
Elements, selecione Mostrar elementos e pressione Enter. O DevTools mostra o painel Elementos na Gaveta, na parte de baixo da janela do DevTools.