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 front-end de qualquer site que estiver visitando.
As mudanças que você faz acontecem dentro de um sandbox dentro do seu navegador. Então, você não está fazendo nenhuma alteração 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
- ao usar Google Chrome, clique com o botão direito em qualquer lugar em um site.
- O menu de contexto do botão direito irá aparecer.
- Na parte inferior, você verá Inspecionar.
- Clique 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 + Mudança + C
- A tecla de função F12
As teclas de atalho acima também funcionam no navegador Mozilla para Windows.
Ferramenta Mozilla Inspector
No navegador Mozilla, o processo é o mesmo do Google Chrome. No entanto, o inspetor janela aparecerá na parte inferior do navegador em vez do lado direito, como no Google Chrome.
Ferramenta de inspeção do Microsoft 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:
- Correr o navegador Safari.
- Visite um site no qual você deseja inspecionar os elementos da web.
- Selecione Safári na barra de menu superior do navegador Safari.
- Clique Preferências no menu de contexto que se abre.
- No Tela de preferências, selecione Avançado.
- Marque o Mostrar Desenvolver menu na parte inferior do Preferências Avançadas tela.
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.
- 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 mostrando HTML e CSS códigos.
Quais são as chaves para inspecionar o elemento?
Você pode estar procurando atalhos para inspecionar elemento no Mac. Você pode usar os seguintes:
- Comando + Mudança + C
- aperte o Ao controle chave e, em seguida, 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:
Por que não consigo inspecionar no Chromebook da minha escola?
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, 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 iPad/iPhone Configurações aplicativo.
- Clique Safári no painel de navegação do lado esquerdo.
- Em seguida, role para baixo no lado direito para encontrar e selecionar Avançado.
- Ative a alternância para Inspetor da Web.
- 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 em vez de outros métodos complicados explicados em outro lugar.
Não se esqueça de deixar comentários abaixo se as etapas acima ajudaram você, 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? Aprender como salvar rapidamente uma página da web como um PDF agora!