Referência de selos

Sofia Emelianova
Sofia Emelianova
GitHub

Ative várias sobreposições e acelere a navegação na árvore do DOM com esta referência abrangente de ícones no painel Elementos.

Mostrar ou ocultar ícones

Para mostrar ou ocultar determinados ícones:

  1. Abra o DevTools.
  2. Clique com o botão direito do mouse em um elemento na árvore do DOM e marque um ou vários ícones no submenu Configurações de ícones.

O menu "Configurações de selos".

O painel Elementos mostra os ícones selecionados ao lado dos elementos apropriados na árvore do DOM. As próximas seções explicam cada ícone.

Ver código-fonte

O ícone view-source está ao lado da tag <html> na raiz da página HTML. Clique nele para ver o código-fonte da página no painel Origens.

O selo &quot;Ver origem&quot;.

Esse ícone oferece um fluxo de trabalho alternativo à opção Ver código-fonte da página no menu de contexto da página do Chrome (clique com o botão direito do mouse):

  1. No Chrome, clique com o botão direito do mouse > Inspecionar uma página.
  2. No painel Elementos, clique no ícone view-source ao lado da tag <html>.
  3. Inspecione o código-fonte da página no painel Origens.

Grade

Um elemento HTML é um contêiner de grade se a propriedade CSS display estiver definida como grid ou inline-grid. Esses elementos têm ícones grid ao lado deles que ativam 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.

Sobreposição de grade.

A sobreposição mostra colunas, linhas, números e lacunas.

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 é 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 ícones subgrid ao lado deles que ativam 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.

Sobreposição de subgrade.

A sobreposição mostra colunas, linhas, números e lacunas de uma subgrade.

Flex

Um elemento HTML é um contêiner flexível se a propriedade CSS display estiver definida como flex ou inline-flex. Esses elementos têm ícones flex ao lado deles que ativam 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 flex ao lado do elemento e observe a sobreposição.

Sobreposição flexível.

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

Para saber como depurar layouts flexíveis, consulte Inspecionar e depurar o flexbox CSS.

O DevTools pode detectar alguns frames de anúncios e marcá-los. Esses frames têm ícones ad ao lado deles.

Descubra um anúncio na visualização a seguir:

  1. Inspecione o elemento na visualização.
  2. Na árvore do DOM, encontre um elemento com o ícone ad ao lado dele.

Selo de anúncio.

O ícone ad não pode ser clicado, mas você pode usar a guia Renderização para destacar os frames de anúncios em vermelho.

Rolar

Um elemento HTML é um contêiner de rolagem se a propriedade CSS overflow estiver definida como scroll ou auto quando houver conteúdo suficiente para causar overflow. Esses elementos têm ícones scroll ao lado deles.

Badge de rolagem em um nó da árvore do DOM.

Scroll-snap

Os contêineres de rolagem podem ter propriedades CSS que configuram pontos de ajuste. Esses elementos têm ícones scroll-snap ao lado deles que ativam 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 scroll-snap ao lado do elemento.
  3. Tente rolar o elemento para a direita e observe a sobreposição.

Sobreposição de ajuste de rolagem.

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 ícones container ao lado deles que ativam 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 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.

Sobreposição de contêiner.

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

Para saber como depurar consultas de contêiner, consulte 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. Junto com o elemento <template>, <slot> permite criar árvores DOM separadas e apresentá-las juntas. Os elementos de conteúdo de slot têm slot ao lado deles que servem como links para os slots correspondentes.

Descubra o slot na visualização a seguir:

  1. Inspecione o elemento na visualização.
  2. Na árvore do DOM, clique no slot ink_selection ao lado do elemento para localizar o slot correspondente. Encaixe e revele os selos.
  3. Volte ao conteúdo do slot clicando no ícone reveal.

Camada superior

Esse ícone ajuda você a entender o conceito da camada superior e a visualizá-la. A camada superior renderiza o conteúdo acima de todas as outras camadas, independentemente de z-index. Quando você abre um <dialog> elemento usando o .showModal() método, 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) ao lado deles, em que N é o número do índice do elemento. Os ícones são links para os elementos correspondentes no contêiner #top-layer.

Descubra o top-layer (N) na visualização 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 top-layer (1) ao lado do <dialog> elemento. O painel Elementos leva você ao elemento correspondente no contêiner #top-layer após a tag de fechamento </html>. O contêiner e o selo da camada superior.
  4. reveal ao lado do elemento ou do ::backdrop.

Mídia

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

O selo de mídia ativado nas configurações de selo e exibido ao lado do elemento de vídeo.

Para mais informações, consulte Depurar players de mídia com o painel Mídia.

Pop-up

Um pop-up é qualquer elemento com um atributo popover e é útil para uma ampla variedade de padrões interativos, incluindo dicas de ferramentas, alertas, avisos e muito mais. Esses elementos têm ícones popover ao lado deles.

Esse ícone ativa um top-layer ícone ao lado dele que vincula aos elementos correspondentes no contêiner #top-layer.

Descubra o ícone popover na visualização a seguir:

  1. Na visualização, clique em ATIVAR POP-UP.
  2. Inspecione o pop-up que aparece.

  3. Na árvore do DOM, clique no popover ícone ao lado do elemento <div popover>. O painel Elementos mostra o ícone top-layer.

    O ícone popover ao lado do elemento com um atributo popover.

  4. Siga as etapas na seção Camada superior.

Para saber mais, consulte também https://web.dev/learn/css/popover-and-dialog.

Estilo inicial

A@starting-style regra define os estilos iniciais em um elemento antes que ele seja renderizado na página. Isso é necessário para elementos que são animados de display: none, já que eles precisam de um estado para serem animados. Esses elementos têm ícones starting-style ao lado deles.

Esse ícone alterna os estilos na regra @starting-style, para que você possa ver a animação em ação.

Descubra o ícone starting-style na visualização a seguir:

  1. Na visualização, clique em ABRIR POP-UP.
  2. Inspecione o pop-up que aparece.

  3. Na árvore do DOM, ative o ícone starting-style ao lado do elemento <div popover>.

    O selo de estilo inicial ao lado do elemento com a regra @starting-style.

  4. Observe a animação em ação e os estilos que estão sendo aplicados na guia Elementos > Estilos.

Para saber mais, consulte também Animação de pop-ups.