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 na árvore 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 intervalos.

Para saber como 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 visualização a seguir:

1. Inspecione o elemento na visualização.
2. Na árvore do DOM, clique no ícone 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ível

Um elemento HTML é um contêiner flex se a propriedade CSS display dele 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 saber como depurar layouts flex, consulte Inspecionar e depurar o flexbox do CSS.

Anúncio

O DevTools pode detectar alguns frames de anúncio e marcá-los. Esses frames têm os selos ad 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 ícone ad ao lado.

O selo ad não é clicável, mas você pode usar a guia Rendering para destacar os frames de anúncios 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 visualização a seguir:

1. Inspecione o elemento na visualização.
2. Na árvore do DOM, clique no selo scroll-snap ao lado do elemento.
3. Role 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 é 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 de slot têm os selos ink_selectionslot ao lado deles, que servem como links para os slots correspondentes.

Descubra o selo ink_selectionslot na seguinte visualização:

1. Inspecione o elemento na visualização.
2. Na árvore DOM, clique no ícone ink_selectionslot ao lado do elemento para localizar o slot correspondente.
   Importante: o selo ink_selectionslot tem um par ink_selectionreveal que leva você de volta.
3. Volte ao conteúdo do slot clicando no selo ink_selectionreveal.

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 Elements adiciona um contêiner #top-layer à árvore do DOM após a tag </html> de fechamento.

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

Descubra o selo ink_selectiontop-layer (N) na seguinte visualização:

1. Na visualização, clique em Abrir caixa de diálogo.
2. Inspecione a caixa de diálogo.
3. Na árvore DOM, clique no selo ink_selectiontop-layer (1) ao lado do elemento <dialog>. O painel Elementos leva você ao elemento correspondente no contêiner #top-layer, após a tag de fechamento </html>.
   Importante:o selo ink_selectiontop-layer (N) tem um selo ink_selectionreveal que faz você voltar.
4. Volte ao elemento <dialog> clicando no selo ink_selectionreveal ao lado dele ou de ::backdrop.

Mídia

O selo media fica desativado por padrão. Quando ativado, ele aparece ao lado dos elementos <audio> e <video>. Clique no selo para abrir o painel Mídia e depurar a mídia.

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