Referência de selos

Sofia Emelianova

Use esta referência abrangente de selos no painel Elementos para alternar entre várias sobreposições e acelerar a navegação na árvore do DOM.

Mostrar ou ocultar selos

Para mostrar ou ocultar selos, faça o seguinte:

1. Abra o DevTools.
2. Clique com o botão direito do mouse em um elemento da á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 apropriados na árvore do DOM. As próximas seções explicam cada um dos 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 selos grid ao lado que alternam as sobreposições correspondentes.

Ative a sobreposição na seguinte 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 aprender a depurar o layout de grade, consulte Inspecionar a 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 selos subgrid ao lado que alternam as sobreposições correspondentes.

Ative a sobreposição na seguinte 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, seus 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 selos flex ao lado que alternam as sobreposições correspondentes.

Ative a sobreposição na seguinte 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 aprender a depurar layouts Flex, consulte Inspecionar e depurar o flexbox CSS.

Anúncio

O DevTools pode detectar alguns frames de anúncios e incluir tags neles. Esses frames têm ad selos 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 você pode usar a guia Renderização para destacar frames de anúncio em vermelho.

Ajuste de 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 selos scroll-snap ao lado que alternam as sobreposições correspondentes.

Ative a sobreposição na seguinte 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 selos container ao lado que alternam as sobreposições correspondentes.

Observação:as consultas de contêineres CSS são um recurso experimental. Para ativar o suporte no DevTools, em chrome://flags, defina o experimento Enable CSS Container Queries como Enabled. Caso contrário, a próxima visualização não vai funcionar.

Ative a sobreposição na seguinte 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 e a sobreposição do layout.

A sobreposição mostra as posições dos elementos filhos.

Para saber como depurar consultas de contêiner, veja Inspecionar e depurar consultas de contêiner 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>, o <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 slots correspondentes.

Confira o selo slot na prévia a seguir:

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.
   Importante:o selo slot tem um selo reveal que faz você voltar.
3. Volte ao conteúdo do slot clicando no selo reveal.

Camada superior

Esse selo ajuda você a entender e visualizar o conceito da camada superior. A camada superior renderiza conteúdo sobre todas as outras camadas, independente de z-index. Quando você abre um elemento <dialog> usando o método .showModal(), o navegador o coloca na camada superior.

Para ajudar você a visualizar os elementos da camada superior, o painel Elementos adiciona um contêiner #top-layer à árvore do DOM após a tag de fechamento </html>.

Os elementos da camada superior têm top-layer (N) selos ao lado, em que N é o número do índice do elemento. Os selos são links para os elementos correspondentes no contêiner #top-layer.

Confira o selo top-layer (N) na prévia a seguir:

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 </html> de fechamento.
   Importante:o selo top-layer (N) tem um selo reveal que faz você voltar.
4. Volte para o elemento <dialog> clicando no selo reveal ao lado dele ou da ::backdrop.

Mídia

O selo media fica desativado por padrão. Quando ativada, ela aparece ao lado dos elementos <audio> e <video>. Clique nele para abrir o painel Media e depurar a mídia.

Para saber mais, consulte Depurar players de mídia com o painel "Mídia".