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

Inspecionar Elementos no 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

Inspecionar Elementos no 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

Inspecionar Elementos no 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.

Ativando Web Inspector

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.



1 Comments

  1. Hà An -

    Inspecionar elementos é muito divertido, principalmente para quem gosta de brincar com design de sites

Leave a Comment

Corrigir erro do Facebook ao executar consulta

Corrigir erro do Facebook ao executar consulta

Resolva o erro ao executar consulta no Facebook com estas soluções eficazes e aprenda como otimizar sua experiência com a rede social.

Qual é o significado de DTB?

Qual é o significado de DTB?

Descubra o significado de DTB, uma gíria popular nas mensagens de texto. Aprenda a interpretar esse anagrama e seu uso em contextos diferentes.

Não consegue fazer login no YouTube? Use estas dicas para corrigir o problema

Não consegue fazer login no YouTube? Use estas dicas para corrigir o problema

Se você não consegue fazer login no YouTube, verifique se o seu navegador é o culpado por esse problema. Para consertar, limpe o cache e desative suas extensões.

Como Excluir Tweets Antigos em Massa

Como Excluir Tweets Antigos em Massa

Aprenda a excluir tweets antigos em massa de forma eficaz para manter sua imagem no Twitter. Descubra ferramentas úteis e dicas práticas!

Twitch.tv: Como desativar o modo de baixa latência

Twitch.tv: Como desativar o modo de baixa latência

Descubra como desativar o modo de baixa latência no Twitch e melhorar a experiência dos seus espectadores.

LinkedIn: Como bloquear / desbloquear pessoas

LinkedIn: Como bloquear / desbloquear pessoas

Aprenda a bloquear e desbloquear pessoas no LinkedIn de forma simples e prática, garantindo uma experiência profissional positiva.

Como alterar o fuso horário do Gmail

Como alterar o fuso horário do Gmail

Aprenda a alterar o fuso horário do Gmail de forma eficaz. Siga nosso guia prático para ajustes manuais.

Google Docs: Como criar um sumário

Google Docs: Como criar um sumário

Aprenda a criar um índice automatizado no Google Docs, facilitando a navegação em documentos extensos.

Corrigir que o LinkedIn não carrega imagens

Corrigir que o LinkedIn não carrega imagens

Descubra soluções para o problema do LinkedIn não carregar imagens. Aprenda como corrigir com este guia completo e otimizado.

Como inspecionar elementos no Mac, Windows, iPhone e iPad

Como inspecionar elementos no Mac, Windows, iPhone e iPad

Aprenda como inspecionar elementos no Mac, Windows e iOS com este guia completo, beneficiando-se de truques práticos para edição rápida.