Compartilhar via


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 estiver ativa, você passa o mouse sobre itens na página da Web e o DevTools adiciona uma sobreposição de informações e um 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 .

Ativando 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 na página da Web de demonstração e selecione Inspecionar para abrir DevTools.

  3. No canto superior esquerdo de DevTools, clique no botão Inspecionar ferramenta (Ícone da ferramenta Inspecionar). Ou, quando DevTools tiver foco, pressione Ctrl+Shift+C (Windows, Linux) ou Command+Shift+C (macOS).

    O botão Inspecionar ferramenta no canto superior esquerdo de DevTools

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

  4. Na página da Web renderizada, passe o mouse sobre itens e watch 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 Elements é 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.

Obtendo informações de elemento da sobreposição Inspecionar

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.

A sobreposição da ferramenta Inspecionar em uma página renderizada, mostrando informações sobre um elemento de título h1

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á pairando.

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 cores.
  • As configurações de fonte do elemento.
  • A margem e o preenchimento do elemento, em pixels.

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

Um elemento que usa a flexbox do CSS tem um ícone extra ao lado de seu nome na sobreposição Inspecionar

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

  • Contraste de cor de texto.
  • O nome e a função do elemento que é relatado à tecnologia assistiva.
  • 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 por meio do teclado. O botão não pode ser navegado por meio do teclado, pois o botão é implementado como um <div> elemento com uma classe de button, em vez de ser implementado como um <button> elemento.

Elementos que não têm contraste suficiente têm um ícone de aviso

Inspecionar elementos não acessíveis

Elementos que têm a propriedade CSS de pointer-events: none não 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.

Um elemento que tem uma propriedade CSS de 'eventos de ponteiro: nenhum' não pode ser selecionado

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 cores em regiões de layout de página, indicando que você está em um modo de seleção avançado.

Pressionar a tecla Shift ao selecionar elementos na página permite que você selecione elementos que tenham uma propriedade de estilo CSS de 'ponteiros-eventos: nenhum'

Selecionando o elemento e encerrando o modo Inspecionar

Ao clicar em um elemento na página renderizada:

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

Quando você clica em um elemento na página renderizada, a ferramenta Styles mostra os estilos que são aplicados ao elemento

Persistindo a dica de ferramenta de inspeção e a sobreposição de cores da grade da ferramenta

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

Ocultar temporariamente a 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 Ctrl.

Confira também