Como inspecionar elementos no Mac, Windows, iPhone e iPad

Os desenvolvedores e designers de interface do usuário usam o recurso Inspecionar Elemento para modificar sites online sem alterar o código-fonte. Mas como inspecionar elementos sem fazer um curso de desenvolvimento web?

Inspecionar Elemento é uma ferramenta de desenvolvedor útil que sai da caixa com navegadores populares. Você só precisa saber como implantar a ferramenta em poucos cliques enquanto navega em sites.

Você pode fazer muitos truques de mágica, como alterar o layout do site, fazer capturas de tela sem texto, alterar fontes, modificar números e muito mais. Abaixo, encontramos um guia passo a passo conciso para aprender como inspecionar elementos sem esforço.

O que é Inspecionar Elemento?

O Inspecionar Elemento é uma ferramenta de desenvolvimento da Web disponível na maioria dos navegadores. Você pode usá-lo para editar o código-fonte do front-end de qualquer site que estiver visitando.

As alterações que você faz acontecem dentro de um sandbox no seu navegador, o que significa que não são alteradas no site real. Além disso, as modificações desaparecem ao recarregar a página.

Usos criativos do Inspecionar Elemento:

• Você precisa tirar uma captura de tela de um site e os textos na imagem estão incomodando? Use a ferramenta Inspecionar Elemento para excluí-los.
• Quer pregar uma peça nos amigos mostrando seu nome em publicações respeitáveis? O Inspecionar Elemento é ideal para isso.
• Teste códigos de depuração em sites em tempo real. Se funcionarem, você pode considerar aplicá-los no código-fonte do back-end.
• Revele palavras-chave, metatags e títulos de SEO de concorrentes como um profissional com essa poderosa ferramenta.

Como Inspecionar Elementos no Windows

Usar a ferramenta Inspecionar Elemento no Windows é um processo simples. Abaixo, apresentamos um guia passo a passo para inspecionar elementos em diferentes navegadores:

Ferramenta de Inspecão do Google Chrome

1. Abra o Google Chrome.
2. Clique com o botão direito do mouse em qualquer lugar do site.
3. Selecione Inspecionar no menu que aparece.
4. Visualize os códigos HTML e CSS em um painel lateral.

Atalhos de Teclado no Chrome

• Ctrl + Shift + C
• Tecla de função F12

Ferramenta de Inspecão do Mozilla Firefox

1. Abra o Mozilla Firefox.
2. O procedimento de inspeção é semelhante ao do Chrome, mas a janela do Inspetor aparecerá na parte inferior.

Ferramenta de Inspecão do Microsoft Edge

1. Acesse o Microsoft Edge.
2. Clique com o botão direito do mouse para acessar Inspecionar.
3. Os códigos HTML e CSS aparecerão à direita.

Como Inspecionar Elementos no Mac

Se você usa o Google Chrome, Mozilla Firefox ou Microsoft Edge no Mac, siga as etapas do Windows. No entanto, para inspecionar no Safari, é necessário ativar as ferramentas de desenvolvimento:

Ativar as Ferramentas de Desenvolvedor no Safari

1. Abra o Safari.
2. Vá em Safari na barra de menu e clique em Preferências.
3. Selecione a aba Avançado e ative a opção Mostrar menu de desenvolvimento.

Usando o Inspecionar Elemento no Safari

1. Clique com o botão direito em qualquer elemento do site e selecione Inspecionar Elemento.
2. Acesse os códigos HTML e CSS na seção de depuração.

Atalhos de Teclado no Mac

• Command + Shift + C
• Clique com dois dedos no trackpad.

Como Inspecionar Elementos em Chromebooks

O Chromebook utiliza o Google Chrome, portanto, clique com o botão direito para encontrar a opção Inspecionar Elemento.

Como Inspecionar Elementos no iPad/iPhone

Infelizmente, não é possível usar a ferramenta Inspecionar Elemento em iPhones ou iPads sem um Mac. Abaixo estão as etapas que você pode tentar com um Mac conectado:

1. Abra as configurações do dispositivo.
2. Selecione Safari e vá até Avançado.
3. Ative a opção Web Inspector.
4. Conecte o iPhone/iPad ao Mac via USB.
5. Abra o Safari no Mac e selecione Desenvolver para visível a lista de sites abertos no iOS.

Conclusão

Você agora possui um entendimento abrangente de como usar a ferramenta Inspecionar Elemento para modificar temporariamente páginas da web em diversos dispositivos. Esteja você editando uma página por diversão ou por necessidades profissionais, siga esses métodos fáceis e eficientes.

Se você encontrou valor nas informações acima, deixe seus comentários. Compartilhe também qualquer método desafiador que encontrou ou dicas sobre a ferramenta Inspecionar Elemento.

Precisa de uma referência impressa? Aprenda como salvar rapidamente uma página da web como PDF.