Ative várias sobreposições e acelere a navegação em árvore do DOM com esta referência abrangente de selos no painel Elementos.
Mostrar ou ocultar selos
Para mostrar ou ocultar selos:
- Abra o DevTools.
- Clique com o botão direito do mouse em um elemento na árvore do DOM e selecione Configurações do selo....
- Marque ou desmarque as caixas de seleção ao lado dos selos escolhidos.
O painel Elementos mostra os selos selecionados ao lado dos elementos adequados na árvore DOM. As próximas seções explicam todos os selos.
Grade
Um elemento HTML será um contêiner de grade se a propriedade CSS display
estiver definida como grid
ou inline-grid
. Esses elementos têm um ícone grid
ao lado que alterna as sobreposições correspondentes.
Alterne a sobreposição nesta visualização:
- Inspecione o elemento na visualização.
- Na árvore do DOM, clique no selo
grid
ao lado do elemento e observe a sobreposição.
A sobreposição mostra colunas, linhas, números e lacunas.
Para saber como depurar o layout da grade, consulte Inspecionar grade CSS.
Subgrade
Uma subgrade é uma grade aninhada que usa as mesmas faixas da grade mãe. Um elemento será um contêiner de subgrade se uma ou ambas as propriedades grid-template-columns
e grid-template-rows
estiverem definidas como subgrid
. Esses elementos têm um ícone subgrid
ao lado que alterna as sobreposições correspondentes.
Alterne a sobreposição nesta visualização:
- Inspecione o elemento na visualização.
- Na árvore do DOM, clique no selo
subgrid
ao lado do elemento e observe a sobreposição.
A sobreposição mostra colunas, linhas, números e lacunas de uma subgrade.
Flex
Um elemento HTML será um contêiner flexível se a propriedade CSS display
estiver definida como flex
ou inline-flex
. Esses elementos têm um ícone flex
ao lado que alterna as sobreposições correspondentes.
Alterne a sobreposição nesta visualização:
- Inspecione o elemento na visualização.
- Na árvore do DOM, clique no selo
flex
ao lado do elemento e observe a sobreposição.
A sobreposição mostra as posições dos elementos filhos.
Para saber como depurar layouts flexíveis, consulte Inspecionar e depurar flexbox CSS.
Anúncio
O DevTools pode detectar e marcar alguns frames de anúncios. Esses frames têm ad
ícones ao lado.
Descubra um anúncio na seguinte visualização:
- Inspecione o elemento na visualização.
- Na árvore do DOM, encontre um elemento com o selo
ad
ao lado.
O selo ad
não é clicável, mas é possível usar a guia Renderização para destacar frames de anúncios em vermelho.
Ajustar a rolagem
Um elemento HTML será um contêiner de rolagem se a propriedade CSS overflow
estiver definida como scroll
ou auto
quando houver conteúdo suficiente para causar estouro. Os contêineres de rolagem podem ter propriedades CSS que configuram pontos de ajuste. Esses elementos têm um ícone scroll-snap
ao lado que alterna as sobreposições correspondentes.
Alterne a sobreposição nesta visualização:
- Inspecione o elemento na visualização.
- Na árvore do DOM, clique no selo
scroll-snap
ao lado do elemento. - Tente rolar o elemento para a direita e observe a sobreposição.
A sobreposição mostra as posições dos elementos e os pontos de ajuste.
Contêiner
Um elemento HTML será um contêiner se tiver a propriedade CSS container-type
. Esses elementos têm um ícone container
ao lado que alterna as sobreposições correspondentes.
Alterne a sobreposição nesta visualização:
- Inspecione o elemento na visualização.
- Na árvore do DOM, clique no selo
container
ao lado do elemento. - Tente redimensionar o elemento arrastando o canto inferior direito e observe a mudança de layout e a sobreposição.
A sobreposição mostra as posições dos elementos filhos.
Para saber como depurar consultas de contêiner, acesse Inspecionar e depurar consultas de contêineres CSS.
Slot
O elemento HTML <slot>
é um marcador de posição que você pode preencher com seu próprio conteúdo. Com o elemento <template>
, <slot>
permite criar árvores do DOM separadas e apresentá-las juntas. Os elementos de conteúdo do slot têm slot
selos ao lado que servem como links para os espaços correspondentes.
Descubra o selo slot
nesta visualização:
- Inspecione o elemento na visualização.
- Na árvore do DOM, clique no selo
slot
ao lado do elemento para localizar o slot correspondente. - Volte ao conteúdo do slot clicando no selo
reveal
.
Camada superior
Este selo ajuda a entender e visualizar o conceito de camada de cima. A camada superior renderiza o conteúdo sobre todas as outras camadas, independentemente da z-index
. Quando você abre um elemento <dialog>
usando o método .showModal()
, o navegador o coloca na camada superior.
Para ajudar a visualizar os elementos da camada de cima, o painel Elementos adiciona um contêiner #top-layer
à árvore DOM após a tag de fechamento </html>
.
Os elementos da camada superior têm ícones de top-layer (N)
ao lado, em que N
é o número de índice do elemento. Os selos são links para os elementos correspondentes no contêiner #top-layer
.
Descubra o selo top-layer (N)
nesta visualização:
- Na visualização, clique em Abrir caixa de diálogo.
- Inspecione a caixa de diálogo.
- Na árvore do DOM, clique no selo
top-layer (1)
ao lado do elemento<dialog>
. O painel Elementos leva você ao elemento correspondente no contêiner#top-layer
depois da tag de fechamento</html>
. - Volte para o elemento
<dialog>
clicando no seloreveal
ao lado dele ou do::backdrop
.
Mídia
O selo media
fica desativado por padrão. Quando ativado, ele aparece ao lado dos elementos <audio>
e <video>
. Clique neste selo para abrir o painel Mídia e depurar a mídia.
Para saber mais, consulte Depurar players de mídia com o painel de mídia.