Referência de selos

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:

1. Abra o DevTools.
2. Clique com o botão direito do mouse em um elemento na árvore do DOM e selecione Configurações do selo....
3. 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:

1. Inspecione o elemento na visualização.
2. 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:

1. Inspecione o elemento na visualização.
2. 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:

1. Inspecione o elemento na visualização.
2. 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:

1. Inspecione o elemento na visualização.
2. 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:

1. Inspecione o elemento na visualização.
2. Na árvore do DOM, clique no selo scroll-snap ao lado do elemento.
3. 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:

1. Inspecione o elemento na visualização.
2. Na árvore do DOM, clique no selo container ao lado do elemento.
3. 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:

1. Inspecione o elemento na visualização.
2. Na árvore do DOM, clique no selo slot ao lado do elemento para localizar o slot correspondente.
3. 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:

1. Na visualização, clique em Abrir caixa de diálogo.
2. Inspecione a caixa de diálogo.
3. 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>.
4. Volte para o elemento <dialog> clicando no selo reveal 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.