Como inspecionar uma pagina?

Perguntado por: . Última atualização: 28 de junho de 2023
4.9 / 5 6 votos

Clique com o botão direito do mouse e qualquer parte do site e selecione Inspecionar. Você também pode usar as teclas de atalho Ctrl+Shift+I.

Use as Ferramentas para desenvolvedores do Google Chrome para verificar tags

  1. Clique com o botão direito do mouse em uma página e selecione "Inspecionar elemento". O código HTML do elemento clicado será exibido.
  2. Selecione Visualização > Desenvolvedor > Ferramentas para desenvolvedores.
  3. Use o atalho "Alt + Command + I".

Abra o navegador Google Chrome e insira a URL do site que quer alterar. Vamos usar o www.facebook.com.br como exemplo. Posicione o mouse no lugar onde você quer alterar, clique com o botão direito e clique na opção Inspecionar.

Inspecionar – Isto é chamado de Elementos em alguns navegadores. É a tela principal da ferramenta Inspecionar Elemento e mostra o código da página, juntamente com o CSS específico do elemento.

Caso você conheça a classe ou o estilo de CSS específico que está procurando e queira ver cada elemento usado ali, também pode usar a função arc. Com o inspetor aberto, pressione Ctrl + Shift + F no teclado (Cmd + Shift + F no Mac). Isso abre uma caixa de pesquisa, na qual você pode pesquisar o código da página.

Para acessar as ferramentas de desenvolvimento dos browsers basta apertar a tecla F12 (Pode variar de acordo com o browser e sua versão).

F12: Imprime o ficheiro na janela ativa. F3: Cancela a ação de desfazer anterior.

Ativando a ferramenta Inspecionar
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. ). Ou, quando DevTools tiver foco, pressione Ctrl+Shift+C (Windows, Linux) ou Command+Shift+C (macOS).

A ferramenta de inspeção do Chrome possibilita ver e manipular o código-fonte e o layout de páginas da web específicas, permitindo alterar em tempo real propriedades como estilos CSS, tags HTML e JavaScript para prever como uma página seria se determinadas modificações fossem aplicadas.

Execute a função “exibir código fonte” no seu navegador
Google Chrome: acesse o Menu na barra de ferramentas, selecione Mais ferramentas e, depois, Exibir código fonte ou, simplesmente, utilize os comandos Ctrl + U (Windows) e Option + Command + U (Mac);

Inspecionando elementos em Android
Assim como o iOS, o Andoid também tem uma ferramenta própria, do Android Studio. É o Layout Inpector. Para usá-la, com o Android Studio e o emulator aberto, clique em “Tools” > “Android” > “Layout Inpector”, escolha o emulator que quer inspecionar e aí é só clicar nos elementos.