Referência de selos

Sofia Emelianova

Alterne várias sobreposições e acelere a navegação na árvore DOM com esta referência abrangente de selos no painel Elements.

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 DOM e selecione Configurações do selo....
3. Marque ou desmarque as caixas de seleção ao lado dos selos escolhidos.

O painel Elements mostra os selos selecionados ao lado dos elementos apropriados na árvore DOM. As próximas seções explicam cada selo.

Grade

Um elemento HTML é um contêiner de grade se a propriedade CSS display dele 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 visualização a seguir:

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

Subgrade

Uma subgrade é uma grade aninhada que usa as mesmas faixas da grade pai. 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, 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.

Encontre um anúncio na prévia abaixo:

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.

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. Esses elementos têm os selos scroll ao lado.

Ajuste de rolagem

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 DOM, clique no ícone 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 é 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êiner do 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 DOM, clique no ícone 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, veja Inspecionar e depurar consultas de contêiner CSS.

Slot

O elemento HTML <slot> é um marcador de posição que pode ser preenchido 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, que servem como links para os slots correspondentes.

Confira o selo ink_selectionslot na prévia abaixo:

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 selo 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 o conteúdo sobre todas as outras, independentemente de 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 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 os selos ink_selectiontop-layer (N) ao lado deles, em que N é o número de índice do elemento. Os selos são links para os elementos correspondentes no contêiner #top-layer.

Confira o selo ink_selectiontop-layer (N) na prévia abaixo:

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, depois da tag </html> de fechamento.
   Importante:o selo ink_selectiontop-layer (N) tem um par ink_selectionreveal que leva você de volta.
4. Para voltar ao elemento <dialog>, clique no selo ink_selectionreveal ao lado do elemento ou do ::backdrop dele.

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 mais informações, consulte Depurar players de mídia com o painel "Mídia".