Use o Modo de inspeção para focar e analisar elementos específicos na sua página da Web.
Visão geral
Ativar o modo de inspeção (seletor de seletor) do DevTools permite que você passe o cursor sobre elementos na página e confira informações de estilo e acessibilidade. Clicar em um elemento enquanto o modo de inspeção está ativo destaca o elemento DOM correspondente na árvore DOM do painel Elementos e lista os estilos relevantes na guia Estilo.
Ativar o modo de inspeção
Para ativar o Modo de inspeção:
- Abra o DevTools.
- Clique no botão Modo de inspeção na barra de ações.
O seletor de seleção fica ativo quando o ícone do Modo de inspeção está azul.
Também é possível usar um atalho no Chrome para abrir o painel Elements no modo de inspeção. Pressione uma das seguintes opções:
- macOS: Cmd+Option+C
- Windows, Linux e ChromeOS: Ctrl+Shift+C
Usar o modo de inspeção para conferir informações de estilo e acessibilidade
Quando o modo de inspeção está ativo, passe o cursor sobre os elementos na página para destacar o elemento e mostrar uma dica de ferramenta. O painel Elements vai expandir automaticamente a árvore DOM para destacar o elemento sobre o qual você está passando o cursor.
Dependendo do elemento, a dica de ferramenta Modo de inspeção mostra as seguintes propriedades de estilo:
- Os seletores do elemento.
- As dimensões do elemento, em pixels.
- A cor de plano de fundo do elemento.
- A cor do texto do elemento.
- As propriedades de fonte do elemento.
- O padding do elemento, em pixels.
- A margem do elemento, em pixels.
Além disso, os elementos que usam grade CSS ou flexbox CSS vão ter um ícone diferente ao lado do nome do elemento.
A seção de acessibilidade da dica de ferramenta mostra as seguintes informações:
- O nome e a função do elemento informado à tecnologia adaptativa.
- Indica se o elemento pode ser focado pelo teclado.
Passar o cursor sobre os cabeçalhos de texto em particular mostra uma taxa de contraste, que mede a diferença de brilho entre as cores de primeiro plano (cor do texto) e de segundo plano.
Uma boa taxa de contraste é vital para que o texto seja legível. Saiba como corrigir textos de baixo contraste.
Persistir e ocultar a dica do modo de inspeção
Para manter a dica de ferramenta do Modo de inspeção enquanto move o ponteiro do mouse para outro lugar, pressione e mantenha pressionado:
- macOS: Ctrl+Option
- Windows, Linux e ChromeOS: Ctrl+Alt
Para ocultar temporariamente a dica de ferramenta de inspeção enquanto você move o ponteiro do mouse, pressione e mantenha pressionada a tecla Ctrl.
Inspecionar elementos não acessíveis
Os elementos com a propriedade CSS pointer-events: none; não podem ser segmentados inicialmente pelo Modo de inspeção.
Para inspecionar elementos não acessíveis, pressione Shift enquanto passa o cursor sobre o elemento.
