A maioria das pessoas não sabe que existe um tesouro de ferramentas de desenvolvedor à sua disposição e que está escondido em seu navegador favorito.
Cada navegador oferece ferramentas de desenvolvedor para verificar a codificação de um site, no entanto, é uma entidade estranha para o usuário médio da Internet. Afinal, quem quer dar uma olhada na codificação de um site, certo?
Acontece que há muitas coisas que você pode aprender olhando a codificação de um site. Continue lendo para descobrir o que o recurso de inspecionar elemento tem a oferecer e como usá-lo.
Como usar o elemento de inspeção em um navegador específico
A maioria dos navegadores possui ferramentas para inspecionar elementos de um site, mas todos eles geralmente funcionam da mesma maneira.
Usando Inspecionar Elemento no Google Chrome
- Abra o site que deseja inspecionar.
- Clique com o botão direito em qualquer lugar da página e selecione Inspecionar.
OU
- Clique nos três pontos verticais no canto direito da barra de ferramentas.
- Vamos para Mais ferramentas.
- Selecione Ferramentas de desenvolvimento.
OU
- aperte o F12 tecla de atalho do teclado no PC ou CMD + Opções + I em um Mac.
Usando Inspecionar Elemento no Microsoft Edge
- Abra um site.
- Clique nos três pontos verticais no canto superior direito da barra de ferramentas do navegador.
- Role para baixo e clique em Mais ferramentas.
- Clique em Ferramentas de desenvolvimento.
OU
- Clique com o botão direito em qualquer lugar do site.
- Clique em Inspecionar.
OU
- pressione Ctrl + Shift + I.
Qualquer um desses três métodos fornecerá o mesmo resultado.
Se você fez isso corretamente, verá um novo painel aberto na parte inferior do seu navegador. Estas são as Ferramentas de Desenvolvedor e incluem a guia Elementos. Esta é a ferramenta de que você precisa para inspecionar o elemento.
O painel será aberto na parte inferior da tela como padrão, mas você sempre pode alterar a forma como ele aparece. Siga estas etapas simples para reposicionar o painel Ferramentas do desenvolvedor:
- Clique nos três pontos verticais no canto superior do painel Ferramentas do Desenvolvedor.
- Selecione um lado do encaixe (esquerdo, inferior ou direito) ou desencaixe para uma janela separada.
Passar o cursor próximo à borda do quadro do painel Ferramentas do Desenvolvedor e arrastar irá estreitar ou ampliar o espaço de trabalho. Por exemplo, se você escolher encaixar o painel no lado direito da janela do navegador, tente passar o mouse na borda esquerda. Você pode arrastar o painel para redimensioná-lo ao ver o cursor em forma de seta.
Usando inspecionar elemento (específico do sistema operacional)
Embora muitas das etapas envolvidas possam ter sido cobertas apenas por mostrar a você como usar o Elemento de inspeção no navegador, onde ele existe em primeiro lugar, mas mostraremos como na maioria dos sistemas operacionais de qualquer maneira.
Como usar inspecionar elemento em um Chromebook
O navegador padrão em um Chromebook é o Google, então siga as instruções do navegador Chrome para acessar Inspecionar elemento. Aqui está um pequeno curso de atualização para você:
- Abra um site.
- Clique nas três linhas verticais no canto superior direito da barra de ferramentas.
- Selecione Mais ferramentas.
- Clique em Ferramentas de desenvolvimento.
Você também pode usar o método do botão direito ou F12 tecla de função para acessar as Ferramentas do desenvolvedor mais rapidamente.
Como usar o elemento de inspeção em um dispositivo Android
Executar o Inspect Element em um dispositivo Android é um pouco diferente. Veja como chegar ao painel Inspecionar Elemento no Android:
- aperte o F12 tecla de função.
- Escolher Alternar barra de dispositivo.
- Selecione o dispositivo Android no menu suspenso.
Ao selecionar um dispositivo Android específico, você notará que uma versão móvel do site é carregada. A partir daqui, você está livre para usar o recurso Inspecionar elemento em seu dispositivo Android a partir do conforto de sua área de trabalho.
Este método funciona para os navegadores Chrome e Firefox porque eles têm um recurso em suas Ferramentas de desenvolvedor chamado Simulação de dispositivo.
Ele também funciona da mesma maneira para dispositivos iPhone. Você só precisa selecionar o correto no menu suspenso.
Como usar inspecionar elemento no Windows
A ferramenta Inspecionar elemento não é necessariamente específica do sistema operacional, mas é específica do navegador. Isso significa que as Ferramentas de Desenvolvedor são um recurso do navegador que você usa e não necessariamente do Windows. No entanto, você pode acessar o painel Inspecionar elemento, independentemente do navegador de sua preferência.
Se você estiver usando o sistema operacional Windows, provavelmente também usará o navegador Microsoft Edge. Confira como acessar o Inspecionar Elemento no MS Edge:
- Abra o site que deseja inspecionar.
- Toque nos três pontos verticais no canto da janela do navegador.
- Role para baixo e selecione Mais ferramentas.
- Clique em Ferramentas de desenvolvimento.
Você também pode usar o F12 tecla de função se você deseja acessar Inspecionar elemento mais rápido. Além disso, clicar com o botão direito do mouse na página da web e selecionar Inspecionar também funciona.
Como usar inspecionar elemento em um Mac
Se você estiver usando um Mac, o navegador de sua escolha provavelmente é o Safari. Abrir o Inspect Elements no Safari é um pouco diferente do que no Chrome e Firefox. Mas é tão simples com estas etapas:
- Abra o navegador Safari.
- Clique em Safári na guia do cabeçalho.
- Selecione Preferências no menu suspenso.
- Clique no Avançado ícone de engrenagem localizado na parte superior da tela.
- Marque a caixa que diz Mostrar menu de desenvolvimento na barra de menu.
Seguir essas etapas ativa o recurso Inspecionar elemento em seu navegador. Se você não habilitar Inspecionar elemento primeiro, não verá a opção ao abrir um site.
Depois de concluir esta etapa, basta clicar com o botão direito em qualquer página da web aberta e selecionar Inspecionar. Você também pode usar o comando de teclas rápidas: CMD + Opção + I (inspecionar).
Como usar o Inspecionar elemento em um iPhone
Você deseja usar o recurso Inspecionar Elementos para ver como uma versão móvel de uma página da web aparece em um iPhone? Você pode fazer isso e muito mais com apenas algumas etapas simples. Mas antes de olhar para um elemento, você precisa habilitar Inspetor da Web para o seu dispositivo iOS:
- Vamos para Configurações.
- Agora, selecione Safári.
- Role para baixo e toque no Menu Avançado.
- Agora, toque no botão de alternância para ligar Inspetor da Web.
Além disso, você precisa se certificar de que o menu Develop está habilitado em seu Mac:
- Abra o Safari.
- Selecione Safári nos cabeçalhos superiores.
- Em seguida, clique em Preferências.
- Em seguida, clique em Avançado.
- Marque a caixa que diz Mostrar menu de desenvolvimento na barra de menu.
Depois de habilitar o dispositivo móvel iOS e o Mac, você verá o menu Desenvolver na barra superior do seu Mac. Clique nele para ver o iPhone conectado e a página da web ativa no dispositivo. Selecionar a página da web também abre uma janela do Inspetor da Web para a mesma página na tela do Mac.
Lembre-se, porém, de que essas instruções só funcionam para o Safari em Mac, não para o Safari no Windows.
Como usar o elemento Inspecionar no Formulários Google
Você também pode usar o Inspecionar elemento no Formulários Google. No entanto, se você está procurando respostas para um teste, você está sem sorte. Você não encontrará as respostas incorporadas na codificação. Você só pode ver as respostas se for o criador ou editor do formulário. De qualquer forma, se você for um aluno respondendo a um teste no Formulários Google, verá apenas suas próprias respostas.
- Você pode clicar com o botão direito no formulário e selecionar Inspecionar para ver todo o código do formulário.
Como usar o elemento de inspeção quando estiver bloqueado
Ocasionalmente, você descobrirá que não pode inspecionar uma página da web e que a seleção Inspecionar ficará esmaecida se você tentar clicar com o botão direito nela. Você pode pensar que está bloqueado, mas existem várias maneiras de contornar isso:
Método 1 - Desligue o Javascript
- Entrar Configurações.
- Procurar "JavaScript”.
- Desligar JavaScript.
Método 2 - Acesse as ferramentas de desenvolvedor ao longo do caminho
Em vez de clicar com o botão direito do mouse para inspecionar, faça o seguinte:
- Vamos para Configurações no seu navegador.
- Selecione Mais ferramentas.
- Role para baixo e clique em Ferramentas de desenvolvimento.
Método 3 - Usando a tecla de função
Você também pode tentar usar o F12 tecla de função em páginas da web que bloqueiam o clique com o botão direito do mouse para inspecionar.
Você pode ter que tentar todos esses métodos antes de encontrar um que funcione para você. Como último recurso, você também pode tentar visualizar o código-fonte digitando ver fonte: [insira o url completo]. 
Como usar o elemento de inspeção em discórdia
Verificar sua codificação no Discord é um processo fácil. Basta usar o Ctrl + Shift + I comando ou F12 chave em uma página do Discord.
Como usar inspecionar elemento em um Chromebook escolar
Se o seu Chromebook foi emitido por uma escola, o uso do recurso Inspecionar Elemento envolve algumas etapas simples:
- Clique com o botão direito ou toque com dois dedos na página da web e selecione Inspecionar.
- pressione Ctrl + Shift + I.
- Experimente e use o método view-source: [url], como “view-source: //www.wikipedia.com", sem as aspas.
No entanto, algumas escolas e organizações bloqueiam esse recurso. Portanto, se não estiver funcionando para você, pode ser necessário entrar em contato com sua organização ou com o administrador da escola.
Como usar o elemento de inspeção para encontrar respostas
Você pode usar o Inspecionar elemento para encontrar respostas para uma variedade de coisas como:
- Visualização do design do site em dispositivos móveis.
- Descubra as palavras-chave que os concorrentes estão usando.
- Testes de velocidade.
- Alterando o texto em uma página da web.
- Encontre exemplos rápidos para mostrar aos desenvolvedores o que você precisa.
Ao iniciar o painel Inspecionar elemento, você verá toda a codificação do site. Isso inclui todo o código JavaScript, CSS e HTML embutido nele. É como ver o código-fonte de uma página da web, exceto que você pode fazer alterações no código. Além disso, você pode ver todas as alterações implementadas em tempo real.
Essa ferramenta é inestimável para os comerciantes, designers e desenvolvedores verem quaisquer alterações de design antes de finalizá-las. No entanto, fazer alterações na codificação com o Elemento de inspeção não dura para sempre. Quando você recarregar a página, ela voltará ao estado padrão.
FAQ adicional
Como faço para usar o comando Inspecionar elemento para encontrar respostas?
A única maneira de encontrar respostas usando o recurso Inspecionar elemento é se o site o revelar instantaneamente após o envio. Nesse caso, as respostas estão presentes na codificação.
Caso contrário, você estará simplesmente visualizando a codificação do questionário ou teste ao usar o recurso Inspecionar elemento, bem como todas as respostas que enviar.
Inspecionar elemento é ilegal?
Não, a ferramenta Inspecionar Elemento não é ilegal, ela foi projetada para desenvolvedores da web. Visualizar o código-fonte de um site não é ilegal, só se torna um problema se você usar as informações coletadas para fins nefastos, como tentativa de exploits, etc.
É possível desativar o elemento de inspeção no navegador?
A resposta curta é não.
Você não pode desativar o Inspecionar elemento em um navegador. Mas você pode definir parâmetros que impedem os usuários de realizar certas ações, como clicar com o botão direito em uma página da web. Existem vários tutoriais online para definir os scripts certos para desativar certos eventos. No entanto, você não pode realmente desativar o recurso Inspecionar elemento em sua totalidade.
Conheça as entranhas de uma página da web
Verificar o recurso Inspecionar elemento de uma página da web é provavelmente uma ferramenta de desenvolvedor que você nunca soube que precisava - mesmo se você não for um desenvolvedor. Tem toneladas de aplicativos de design e marketing que podem fazer seu site funcionar com mais facilidade. E talvez dê a você uma vantagem sobre um concorrente.
Para que você usa o Inspecionar elemento? Conte-nos sobre isso na seção de comentários abaixo.
