Analisar páginas usando a ferramenta Inspecionar

Use a ferramenta Inspecionar para ver informações sobre um item em uma página da Web renderizada.

• Quando a ferramenta Inspecionar está ativa, você passa o mouse sobre os itens na página da Web e o DevTools adiciona informações de sobreposição de informações e realce de grade na página da Web.

• Quando você clica em um item na página da Web, a árvore DOM na ferramenta Elementos é atualizada automaticamente para mostrar o elemento DOM que corresponde ao item clicado na página da Web renderizada e seu estilo CSS na guia Estilos .

Ativar a ferramenta Inspecionar

Para experimentar a ferramenta Inspecionar :

1. Abra a página Inspecionar demonstração em uma nova janela ou guia.

2. Clique com o botão direito do mouse em qualquer lugar da página da Web de demonstração e selecione Inspecionar para abrir o DevTools.

3. No canto superior esquerdo do DevTools, clique no botão Inspecionar ferramenta (). Ou, quando o DevTools estiver em foco, pressione Ctrl+Shift+C (Windows, Linux) ou Command+Shift+C (macOS).

   

   O ícone do botão fica azul (), indicando que a ferramenta Inspecionar está ativa.

4. Na página da Web renderizada, passe o mouse sobre os itens e observe a sobreposição de informações e o realce da grade.

5. Clique em um item na página da Web renderizada.

   A árvore DOM na ferramenta Elementos é atualizada automaticamente para mostrar o elemento DOM que corresponde ao item clicado na página da Web renderizada e seu estilo CSS na guia Estilos . Clicar na página da Web também desativa o modo Inspecionar na página da Web.

Obter informações do elemento em Inspecionar sobreposição

Quando a ferramenta Inspecionar está ativa, passar o mouse sobre qualquer elemento na página da Web renderizada exibe a sobreposição Inspecionar . A sobreposição Inspecionar exibe informações gerais e de acessibilidade sobre esse elemento.

Quando você passa o mouse sobre um elemento de página na página renderizada, a árvore DOM se expande automaticamente para realçar o elemento sobre o qual você está focalizando.

A sobreposição Inspecionar mostra as seguintes informações sobre o elemento:

• O nome do elemento.
• As dimensões do elemento, em pixels.
• A cor do elemento, como um valor hexadecimal e uma amostra de cor.
• As configurações de fonte do elemento.
• A margem e o preenchimento do elemento, em pixels.

As informações mostradas dependem do tipo de elemento e dos estilos aplicados a ele. Se o elemento for posicionado usando grade CSS ou CSS flexbox, um ícone diferente aparecerá ao lado do nome do elemento na sobreposição Inspecionar:

A seção Acessibilidade da sobreposição Inspecionar exibe informações sobre:

• Contraste da cor do texto.
• O nome e a função do elemento reportado à tecnologia adaptativa.
• Se o elemento é focalizável no teclado.

Por exemplo, na página Inspecionar Demonstração , para o Bad Contrast botão, a sobreposição Inspecionar tem um ícone de aviso ao lado do valor de contraste de 1,77. A sobreposição Inspecionar também mostra que o botão não é focalizável via teclado. O botão não pode ser acessado via teclado, pois o botão é implementado como um <div> elemento com uma classe de button, em vez de ser implementado como um <button> elemento.

Inspeção de elementos não acessíveis

Os elementos que têm a propriedade CSS não pointer-events: none estão disponíveis para a ferramenta Inspecionar . Na página Inspecionar demonstração , passe o mouse sobre o Overlay Button e você verá que o elemento pai (div.wrapper) é mostrado em vez do Overlay Button.

Para inspecionar elementos que têm a propriedade CSS de pointer-events: none, pressione Shift enquanto passa o mouse sobre o elemento. Há também uma sobreposição de cor nas regiões de layout da página, indicando que você está em um modo de seleção avançado.

Selecionando o elemento e encerrando o modo Inspecionar

Quando você clica em um elemento na página renderizada:

• A ferramenta Inspecionar está desativada.
• O nó DOM correspondente é realçado.
• A ferramenta Estilos mostra o CSS aplicado ao elemento.

Persistência da dica de ferramenta Inspecionar e sobreposição de cor de grade

Ao usar a ferramenta Inspecionar e mover-se pela página da Web renderizada, você pode manter a sobreposição Inspecionar atual exibida. Pressione e segure Ctrl+Alt (Windows, Linux) ou Ctrl+Option (macOS) enquanto você se move na página da Web renderizada. A dica de ferramenta e a sobreposição de cor de grade existentes para a ferramenta Inspecionar permanecem exibidas enquanto você passa o mouse sobre diferentes partes da página da Web renderizada.

Ocultação temporária da dica de ferramenta Inspecionar elemento

Para ocultar a sobreposição da ferramenta Inspecionar enquanto você move o ponteiro do mouse sobre a página da Web renderizada, pressione e segure a tecla Ctrl.

Confira também

• Use a ferramenta Inspecionar para detectar problemas de acessibilidade passando o mouse sobre a página da Web