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?

O Inspect Element é 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.

Encontre abaixo um guia passo a passo conciso para aprender como inspecionar elementos sem esforço.

O que é inspecionar elemento?

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

As mudanças que você faz acontecem dentro de um sandbox dentro do seu navegador. Portanto, você não está fazendo alterações no site real. Além disso, as alterações superficiais que você faz desaparecem quando você atualiza a página.

Aqui estão algumas maneiras criativas de usá-lo:

• Você precisa tirar uma captura de tela de um site e os textos na imagem estão incomodando você. Use a ferramenta Inspecionar elemento para excluir esses textos.
• Você quer pregar uma peça em seus amigos mostrando seu nome no New York Times ou no Washington Post. Inspecionar elemento é a melhor maneira de fazer isso.
• Teste os códigos de depuração em sites aplicando-os em tempo real usando a ferramenta Inspecionar elemento. Se funcionar, você pode alterar o código-fonte do back-end.
• Como profissional de marketing digital, você pode revelar palavras-chave, títulos de SEO, metatags etc. dos concorrentes, usando essa poderosa ferramenta de desenvolvimento da web.

Como inspecionar elementos no Windows

Usar a ferramenta Inspecionar elemento no Windows é ridiculamente fácil. Encontre abaixo um guia passo a passo para inspecionar elementos usando vários navegadores da Web no Windows:

Ferramenta de inspeção do Google Chrome

Como inspecionar elementos no navegador Windows Chrome

• Ao usar o Google Chrome , clique com o botão direito do mouse em qualquer lugar de um site.
• O menu de contexto do botão direito irá aparecer.
• Na parte inferior, você verá Inspecionar .
• Clique em Inspecionar para visualizar os códigos HTML e CSS em um painel do lado direito .

Como faço para abrir o elemento de inspeção no Chrome sem clicar com o botão direito?

Existem alguns atalhos úteis para abrir a ferramenta Inspecionar elemento no Google Chrome para Windows. Essas teclas de atalho são as seguintes:

• Ctrl + Deslocamento + C
• A tecla de função F12

As teclas de atalho acima também funcionam no navegador Mozilla para Windows.

Ferramenta Mozilla Inspector

Como inspecionar elementos no navegador Mozilla do Windows

No navegador Mozilla, o processo é o mesmo do Google Chrome. No entanto, a janela do Inspetor aparecerá na parte inferior do navegador em vez do lado direito, como no Google Chrome.

Ferramenta de inspeção do Microsoft Edge

Como inspecionar elementos no navegador Windows Edge

Surpreendentemente, o Inspect Element do Microsoft Edge funciona de maneira semelhante ao navegador Google Chrome. A ferramenta Inspecionar está disponível ao clicar com o botão direito do mouse. Além disso, os códigos HTML e CSS aparecem no lado direito, semelhante ao Google Chrome.

Como inspecionar elementos no Mac

Você está usando o Google Chrome, Mozilla Firefox ou Microsoft Edge em computadores Mac da Apple? Em caso afirmativo, você pode implantar a ferramenta Inspecionar elemento seguindo as etapas mencionadas acima na seção do Windows.

Mas, se você estiver usando o navegador padrão do macOS, o Safari, usar a ferramenta Inspecionar elemento é um jogo complicado. Por padrão, o Safari não mostra Inspecionar elemento em um Mac. Aqui está o que você precisa fazer:

Como Abrir Inspecionar Elemento no Mac

Primeiro, você precisa ativar as ferramentas de desenvolvedor no Safari em um Mac. Veja como:

• Execute o navegador Safari .
• Visite um site no qual você deseja inspecionar os elementos da web.
• Selecione Safari na barra de menu superior do navegador Safari.
• Clique em Preferências no menu de contexto que se abre.
• Na tela Preferências , selecione Avançado .
• Marque o menu Mostrar Revelação na parte inferior da tela de Preferências Avançadas .

Você ativou com sucesso as ferramentas de desenvolvedor no Safari para Mac. Agora, siga estas etapas para usar Inspecionar elemento:

• Em qualquer elemento de um site, como um texto ou imagem, clique com o botão direito do mouse em .
• Um menu de contexto aparecerá. Na parte inferior, você verá Inspecionar elemento .
• Clique nele para abrir uma seção de depuração abaixo do site que mostra os códigos HTML e CSS .

What Are the Keys for Inspect Element?

Você pode estar procurando atalhos para inspecionar elemento no Mac. Você pode usar os seguintes:

• Comando + Shift + C
• Pressione a tecla Control e selecione qualquer elemento.
• Clique no trackpad com dois dedos

Como inspecionar elementos em Chromebooks

O Chromebook usa o Google Chrome como navegador padrão. Portanto, após abrir qualquer site, basta clicar com o botão direito do mouse para encontrar a opção Inspecionar elemento no menu de contexto a seguir.

Se você usa um Chromebook no trabalho ou na escola, pode estar se perguntando:

Why Can’t I Inspect on My School Chromebook?

A maioria dos administradores de escolas e empresas desativa recursos avançados no Chromebook que fornecem para trabalho ou estudo. Como as ferramentas do desenvolvedor são recursos avançados, é provável que sua escola ou trabalho Chromebook não mostre a ferramenta Inspecionar elemento.

Como inspecionar elementos no iPad/iPhone

Infelizmente, você não pode usar a ferramenta Inspecionar elemento em um iPhone ou iPad sem um Mac.

iOS e iPadOS têm Web Inspector para o aplicativo Safari. No entanto, ele só funciona se você conectar o dispositivo móvel a um Mac no qual você já ativou as ferramentas de desenvolvedor do Safari. Abaixo estão as etapas que você pode tentar:

• Abra o aplicativo de configurações do iPad/iPhone .
• Clique em Safari no painel de navegação do lado esquerdo.

Abrindo as configurações do Safari no iPad ou iPhone

• Em seguida, role para baixo no lado direito para localizar e selecionar Avançado .

Ativando o Web Inspector no iPad e iPhone

• Ative a alternância para Web Inspector .
• Agora, conecte o dispositivo móvel ao Mac usando USB .
• Autorize o iPhone/iPad no Mac.
• Abra qualquer site em um dispositivo móvel no Safari.
• Agora, execute o Safari no Mac e selecione Desenvolver na barra de menu superior.
• No menu de contexto que se abre, procure o nome do seu dispositivo móvel.
• Passe o cursor sobre o dispositivo móvel para visualizar todos os sites abertos.
• Agora, selecione qualquer site para visualizar o código-fonte HTML e CSS no navegador Safari do Mac.

Conclusão

Você explorou todas as formas possíveis de usar a ferramenta Inspecionar elemento para edição temporária de páginas da web. Você também aprendeu a inspecionar elementos para vários dispositivos como Mac, Windows, Chromebook, iPad e iPhone.

Da próxima vez que precisar modificar uma página da Web por diversão ou por necessidades profissionais, experimente esses métodos. Você definitivamente vai adorar essas etapas fáceis sobre outros métodos complicados explicados em outro lugar.

Não se esqueça de deixar comentários abaixo se as etapas acima o ajudaram, qualquer método que você considere desafiador ou dicas secretas sobre a ferramenta Inspecionar elemento.

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