Como usar inspecionar elemento

Links de dispositivos

• Android
• Chromebook
• Mac
• janelas
• Dispositivo ausente?

A maioria das pessoas não sabe que há um tesouro de ferramentas de desenvolvedor à sua disposição e que está escondido em seu navegador favorito.

Cada navegador da Web oferece ferramentas de desenvolvedor para verificar a codificação de um site. No entanto, é uma entidade estrangeira para o usuário médio da Internet. Afinal, quem quer olhar a codificação de um site, certo?

Acontece que há muitas coisas que você pode aprender observando a codificação de um site. Continue lendo para descobrir o que o recurso inspecionar elemento tem a oferecer e como usá-lo.

A maioria dos navegadores possui ferramentas para inspecionar elementos de um site, mas todos geralmente funcionam da mesma maneira.

Usando inspecionar elemento no Google Chrome

1. Abra o site que você gostaria de inspecionar.
   
2. Clique com o botão direito do mouse em qualquer lugar da página e selecione Inspecionar .
   
   OU
3. Clique nos três pontos verticais no canto direito da barra de ferramentas.
   
4. Vá para Mais ferramentas .
   
5. Selecione Ferramentas do desenvolvedor .
   
   OU
6. Pressione a tecla de atalho do teclado F12 em um PC (ou CMD + Options + I em um Mac).
   

Usando inspecionar elemento no Microsoft Edge

1. Abra um site.
   
2. Clique nos três pontos verticais no canto superior direito da barra de ferramentas do navegador.
   
3. Role para baixo e clique em Mais ferramentas .
   
4. Clique em Ferramentas do desenvolvedor .
   
   OU
5. Clique com o botão direito do mouse em qualquer lugar do site e clique em Inspecionar .
   
   OU
6. Pressione Ctrl + Shift + I .
   

Qualquer um desses três métodos fornecerá o mesmo resultado.

Se você fez isso corretamente, um novo painel será aberto na parte inferior do seu navegador. Estas são as ferramentas do desenvolvedor e incluem a guia Elementos. Esta é a ferramenta que você precisa para inspecionar o elemento.

O painel será aberto na parte inferior da tela por padrão, mas você sempre pode alterar a forma como ele aparece. Siga estas etapas simples para reposicionar o painel Ferramentas do desenvolvedor:

1. Clique nos três pontos horizontais no canto superior do painel Developer Tools.
   
2. Selecione um lado do encaixe (esquerdo, inferior ou direito) ou desencaixe em uma janela separada.
   

Passar o cursor próximo à borda do quadro do painel Ferramentas do desenvolvedor e arrastá-lo estreitará ou ampliará o espaço de trabalho. Por exemplo, se você optar por encaixar o painel no lado direito da janela do navegador, tente passar o mouse sobre a borda esquerda. Você pode arrastar o painel para redimensioná-lo quando vir o cursor de seta.

Usando Inspecionar Elemento (específico do SO)

Embora muitas das etapas envolvidas possam ter sido abordadas apenas mostrando como usar o Inspect Element no navegador, mostraremos como na maioria dos sistemas operacionais.

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ê:

1. Abra um site.
   
2. Clique nos três pontos verticais no canto superior direito da barra de ferramentas.
   
3. Selecione Mais ferramentas .
   
4. Clique em Ferramentas do desenvolvedor .
   

Você também pode usar o método de clique com o botão direito do mouse ou a tecla de função F12 para acessar as Ferramentas do desenvolvedor mais rapidamente.

Como usar o elemento inspecionar em um dispositivo Android

A execução do Inspect Element em um dispositivo Android é um pouco diferente. Confira como acessar o painel Inspecionar Elemento no Android:

1. Pressione a tecla de função F12 .
   
2. Escolha Alternar barra de dispositivos .
   
3. 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 no conforto de sua área de trabalho.

Esse 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.

Também funciona da mesma forma para dispositivos iPhone. Você só precisa selecionar o caminho certo 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 do 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 Inspect Element no MS Edge:

1. Abra o site que você gostaria de inspecionar.
   
2. Toque nos três pontos verticais no canto da janela do navegador.
   
3. Role para baixo e selecione Mais ferramentas .
   
4. Clique em Ferramentas do desenvolvedor .
   

Você também pode usar a tecla de função F12 para acessar Inspecionar elemento mais rapidamente. Além disso, clicar com o botão direito do mouse na página da Web e selecionar Inspecionar também funciona.

Como usar o Inspect Element em um Mac

Se você estiver usando um Mac, seu navegador preferido provavelmente é o Safari. A abertura do Inspect Elements no Safari é um pouco diferente do Chrome e do Firefox. Mas é tão simples com estas etapas:

1. Abra o navegador Safari.
   
2. Clique em Safari na guia do cabeçalho e selecione Preferências no menu suspenso.
   
3. Clique no ícone de engrenagem Avançado localizado na parte superior da tela.
   
4. Marque a caixa que diz Mostrar menu Revelação na barra de menus .
   

Passar por 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 do mouse 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 inspecionar elemento no iOS

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 o Web Inspector para seu dispositivo iOS:

1. Vá para Configurações .
   
2. Agora, selecione Safari .
   
3. Role até a parte inferior e toque no Menu Avançado .
   
4. Agora, toque no botão de alternância para ativar o Web Inspector .
   

Além disso, certifique-se de que o menu Revelação esteja ativado no seu Mac seguindo as etapas da seção acima.

Depois de habilitar dispositivos móveis iOS e Macs, 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 Web Inspector para a mesma página na tela do seu Mac.

Lembre-se, porém, de que essas instruções funcionam apenas para o Safari em um Mac, não para o Safari no Windows.

Como usar inspecionar elemento quando está bloqueado

Ocasionalmente, você descobrirá que não pode inspecionar uma página da Web e 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 – Desative o Javascript

1. Vá para Configurações .
   
2. Pesquisar JavaScript .
   
3. Desligue o JavaScript .
   

Método 2 – Acessar as Ferramentas do Desenvolvedor do Longo Caminho

Em vez de clicar com o botão direito do mouse para inspecionar, faça o seguinte:

1. Vá para Configurações no seu navegador.
   
2. Selecione Mais ferramentas .
   
3. Role para baixo e clique em Ferramentas do desenvolvedor .
   

Método 3 - Usando a tecla de função

Você também pode tentar usar a tecla de função F12 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 view-source: [enter full url] .

Como usar o elemento inspecionar em um Chromebook escolar

Se seu Chromebook foi emitido por uma escola, o uso do recurso Inspecionar elemento envolve algumas etapas simples:

1. Clique com o botão direito do mouse ou toque com dois dedos na página da Web e selecione Inspecionar .
   
2. Pressione Ctrl + Shift + I .
   
3. Experimente e use o método view-source:[url], como view-source:https://www.wikipedia.com .
   
   

No entanto, algumas escolas e organizações bloqueiam esse recurso, portanto, se não estiver funcionando para você, talvez seja necessário entrar em contato com sua organização ou administrador escolar.

Como usar o elemento inspecionar para encontrar respostas

Você pode usar Inspecionar Elemento para encontrar respostas para uma variedade de coisas como:

• Visualização do design do site em dispositivos móveis.
• Descubra 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 toda a codificação JavaScript, CSS e HTML incorporada a ele. É 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 torna inestimável para profissionais de marketing, designers e desenvolvedores visualizar quaisquer alterações de design antes de finalizá-las. No entanto, fazer alterações na codificação com o Inspect Element não dura para sempre. Quando você recarregar a página, ela voltará ao seu estado padrão.

Perguntas frequentes adicionais

Se você não é um especialista em inspecionar elemento depois de ler acima, há mais respostas aqui.

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 as revelar instantaneamente após o envio. Neste caso, as respostas estão presentes na codificação.

Caso contrário, você está simplesmente visualizando a codificação do questionário ou teste ao usar o recurso Inspecionar elemento, bem como quaisquer respostas que enviar.

Inspecionar elemento é ilegal?

Não, a ferramenta Inspecionar elemento não é ilegal; ele é projetado para desenvolvedores da web. A visualização do 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 tentativas de exploits, etc.

É possível desativar o elemento de inspeção no navegador?

A resposta curta é não.

Você não pode desativar o Inspect Element em um navegador, mas pode definir parâmetros que impeçam os usuários de realizar determinadas ações, como clicar com o botão direito do mouse em uma página da Web. Existem vários tutoriais on-line para definir os scripts adequados para desativar determinados 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 que você não seja um desenvolvedor. Ele tem toneladas de aplicativos de design e marketing que podem tornar o funcionamento do seu site mais suave. E talvez dar a você uma vantagem sobre um concorrente.

Para que você usa Inspecionar elemento? Conte-nos sobre isso na seção de comentários abaixo.