Introdução ao Inspecionar Elemento

Há uma ferramenta poderosa escondida no seu navegador: O Inspecionar Elemento.

---

• Porque usar o Inspecionar Elemento?
• Primeiros passos no Inspecionar Elemento

---

Clique com o botão direito do mouse em qualquer website, clique em Inspecionar e você conseguirá ver o website como ele veio ao mundo: o código-fonte, as imagens e o CSS que formam seu design, as fontes e ícones usados, o código Javascript que permite realizar efeitos dinâmicos e muito mais . Você pode ver quanto tempo o site leva para carregar, quanto de largura de banda é usada para baixar os arquivos e a cor exata (hexadecimal) usada nos elementos do website.

Você pode usá-lo também para alterar o que quiser na página do website (somente no seu ambiente).

Inspecionar Elemento é uma maneira perfeita de descobrir o que se encontra por trás de um website, entender porque aquela página está quebrando, simular a mudança de uma cor ou fonte. É uma arma que o seu navegador possui e talvez você não saiba como usar.

Confira alguns atalhos básicos:

Vamos aprender como usar o Inspecionar Elemento do Google Chrome para te ajudar, mesmo que você seja um profissional de marketing que nunca escreveu uma linha de código. Se você estiver lendo isso em seu smartphone, é hora de mudar para o seu laptop, abrir o Google Chrome e se preparar para “fuxicar” alguns códigos.

A maioria dos navegadores – incluindo o Mozilla Firefox e o Safari da Apple – possui uma ferramenta de Inspecionar Elemento, enquanto o Internet Explorer (incluindo o Edge Browser) da Microsoft e o Chrome da Google incluem um conjunto de ferramentas para desenvolvedores. Este tutorial se concentra no Inspecionar Elemento do Google Chrome, mas a maioria dos recursos funcionam da mesma maneira em outros navegadores.

Porque usar o Inspecionar Elemento?

Se você nunca deu uma olhada no código de um site só por curiosidade, pode se perguntar por que deveria aprender a usar o Inspecionar Elemento.

• Designers: Gostaria de visualizar como ficaria a aparência de um site em dispositivos móveis? Ou deseja testar diferentes tons de verde em um botão de compra? Você pode fazer ambos em segundos com o Inspecionar Elemento.
• Marketeiros: Curioso para saber como o seu ou o site da sua empresa ficaria com um texto, cor ou imagem diferente sem ter que pedir a um desenvolvedor para fazer isso, ou quer saber se o carregamento do seu site está muito lento para o PageSpeed Insights? Use o Inspecionar elemento para mostrar ambos.
• Jornalistas: Usando o Inspecionar Elemento, você pode alterar qualquer texto em um site em apenas um segundo. Assim, você pode conferir como seu título ou texto ficaria antes mesmo de ser publicado.
• Analista de Suporte: Precisa de uma maneira prática de informar aos desenvolvedores o que precisa ser corrigido em um site? Inspecionando o elemento de uma página você consegue mostrar um exemplo do que está falando.

Para esses e outros casos, o Inspecionar Elemento é uma ferramenta útil para guardar no seu arsenal. Ele faz parte do Developer Tools (Ferramentas para o Desenvolvedor), que inclui vários recursos extras: um Console para executar código, a opção Exibir código-fonte da página para ver apenas o código bruto por trás de um site, a guia Sources com uma lista de todos os arquivos carregados em um site e muito mais. Você pode explorar tudo isso por conta própria, mas, por enquanto, vamos ver como usar a guia “Elements” principal ferramenta para alterar códigos de uma página por conta própria.

Primeiros passos no Inspecionar Elemento

Existem algumas maneiras de acessar o Google Chrome Inspect Element. Basta abrir um site que você deseja tentar editar (para acompanhar este tutorial, pode abrir meu site Goomore.com) e abra o Inspecionar Elemento de uma destas três maneiras:

• Clique com o botão direito do mouse em qualquer lugar do website, bem na parte inferior do menu exibido, você verá Inspecionar. Clique.
• Clique no menu (o ícone com três pontos empilhados) à direita da barra de ferramentas do Google Chrome, clique em Mais ferramentas e selecione Ferramentas do desenvolvedor. Prefere atalhos de teclado? Pressione CMD + Option + I em um Mac ou F12 em um PC para abrir o Inspect Element sem clicar em nada.

Por padrão, as Ferramentas do desenvolvedor são abertas em um painel na parte inferior do navegador e mostram a guia Elements – essa é a ferramenta procuramos.

Você não terá muito espaço para trabalhar com o Inspecionar Elemento na parte inferior da sua tela, então clique nos três pontos verticais (menu) no lado superior direito do painel do Inspecionar Elemento próximo ao “X” (o que você clica para fechar o painel). Agora, você verá uma opção para mover o painel para o lado direito do navegador (vista da direita) ou para abri-lo em uma janela completamente separada (desdobrar).

Para este tutorial, vamos encaixar o painel no lado direito da janela do seu navegador para nos dar mais espaço para trabalhar. Você pode tornar o painel do DevTools (Developer Tools) mais largo ou mais estreito passando o mouse sobre a borda esquerda. Quando o cursor ↔ aparecer, arraste o painel para a esquerda para ampliá-lo ou diminuir à direita.

Agora que estamos no Inspecionar Elemento, há uma série de ferramentas úteis ao nosso alcance que podemos usar para fazer com que qualquer site tenha exatamente a aparência desejada. Para este tutorial, iremos nos concentrar nas guias Elements, Emulation e Search.

Search

A guia Search permite que você busque conteúdos específicos ou elementos HTML dentro de uma página. Fica um pouco escondido: você precisará clicar no menu e em seguida clicar em Search. Em seguida, você poderá pesquisar tudo o que deseja encontrar nos arquivos de uma página.

Elements

Elements é a ferramenta que mais iremos explorar neste tutorial, é o que aparece assim que você abre o Developer Tools na maioria dos navegadores. Você também pode clicar na guia Elements no Developer Tools para voltar a ela, caso você esteja explorando outras opções.

Na guia Explorer, você pode ver todo o HTML, JavaScript e CSS que existe no site. Aqui você pode alterar qualquer código e ver as alterações em tempo real no site que você abriu. Você pode alterar qualquer coisa, desde o texto ao tipo de fonte usada, trocar uma imagem ou salvar suas alterações (basta ir em Visualizar > Desenvolvedor > Exibir código-fonte e salvar a página como um arquivo HTML clicando no botão direito do mouse ou copiar as alterações de código no editor de texto). Depois de recarregar a página, todas as suas alterações serão perdidas para sempre.

Emulation

Quer saber como seu site se comporta em dispositivos móveis sem tirar o telefone do bolso? A guia Emulation permite saber como ficaria um site em qualquer dispositivo, com predefinições para dispositivos populares ou uma opção para definir a resolução da tela e a proporção. Você pode até definir uma velocidade de internet desejada para testar, para ver a rapidez com que um site seria carregado de acordo com a velocidade de conexão.

É um pouco escondido: você precisará abrir o Inspecionar Elemento e clicar no botão com um ícone do telefone para iniciá-lo. Veja:

Então, você terá uma ferramenta perfeita para entender como uma página web se comporta em diferentes dispositivos e tamanhos de tela.

É hora de pôr a mão na massa. Primeiramente, usaremos o Search para encontrar itens em uma página web, usaremos o Elements para editar texto e outras coisas, finalmente, usaremos o Emulation para ver como nosso site ficaria em dispositivos móveis ou em um local específico.

Encontre o que quiser em um website com o Inspecionar Elemento

Quer saber o que acontece nos seus sites favoritos? A ferramenta Search do Inspecionar Elemento é sua melhor opção para isso, além de exibir todo o código-fonte de um site. basta você abrir o Inspecionar Elemento, pressionar CTRL + F ou CMD + F e pesquisar pelo código-fonte, mas a ferramenta Search também permite pesquisar todos os arquivos em uma página, ajudando a encontrar texto em arquivos CSS e JavaScript ou, por exemplo, localizar uma imagem que você precisa para um artigo.

Para começar, abra o goomore.com no Chrome, se ainda não o fez, agora abra o Inspecionar Elemento, clique no menu do painel do Developer Tools (próximo ao “X” de fechamento) e selecione Search. A guia Search aparecerá na metade inferior do Developer Tools.

Lembre-se de como abrir o Inspecionar Elemento? Clique com o botão direito do mouse e clique em Inspecionar Elemento, ou pressione Command + Option + i no seu Mac ou F12 no seu PC.

No campo de pesquisa, você pode digitar – QUALQUER COISA – que quiser encontrar nessa página e ela aparecerá nesse painel. Veremos como podemos usar.

Digite meta name no campo de pesquisa, pressione a tecla Enter e você verá imediatamente cada ocorrência de meta name no código desta página. Agora, você pode ver os metadados desta página, as meta name="keywords", sua segmentação e se ela está ou não configurada para permitir que o Google indexe seu conteúdo. Essa é uma maneira fácil de ver o que seus concorrentes estão segmentando e garantir que você não estrague nada em seu site.

Vamos tentar outra consulta. Exclua o meta name, digite h2 no campo de pesquisa e pressione enter. Você verá todas as ocorrências de h2 nos arquivos JavaScript e CSS do site goomore.com, mas quando você rolar para a parte inferior, poderá ver todos as tags h2 na index da página.

O Search também é uma ferramenta eficaz para designers, pois você também pode pesquisar por cores. Digite #18ba60 no campo de pesquisa e pressione enter. Agora você deve ver todas as vezes que a cor #18ba60 é referenciada nos arquivos CSS e HTML deste site. Em seguida, basta clicar na linha que diz color: # ff4a00; para ir até aquela linha no HTML do site e mudar a cor de acordo com sua preferência (algo que veremos na próxima seção).

Essa é uma maneira útil para os designers garantirem que um site esteja seguindo o guia de identidade visual da marca. Com a ferramenta Search, os designers podem verificar facilmente o CSS de uma página para ver se uma cor está aplicada ao elemento errado, se uma fonte incorreta é usada ou se você ainda está usando sua cor antiga em algum lugar em todo o site.

A ferramenta Search também é a maneira perfeita de se comunicar com os desenvolvedores, já que você pode mostrar exatamente onde encontrou um erro ou o que precisa ser alterado. Diga-lhes apenas o número da linha em que o problema existe e você receberá sua correção muito mais rapidamente.

Você também pode alterar a página com a ferramenta Elements, a parte principal do Chrome DevTools.

Altere qualquer coisa com o Elements

Desenvolvedores front-end usam a ferramenta Inspecionar Elemento todos os dias para modificar a aparência de uma página e experimentar novas ideias – e você também pode. Ao usar o Inspecionar Elemento você pode ajustar a aparência e o conteúdo de uma página fazendo alterações temporárias aos arquivos CSS e HTML do site.

Depois de fechar ou recarregar a página, suas alterações serão desfeitas; você só verá as alterações no seu computador e não estará realmente editando o site. Dessa forma, você pode se sentir livre para experimentar e alterar qualquer coisa – e depois copiar e salvar as mudanças.

Vamos ver o que podemos fazer.

Clique na guia Elements no painel do DevTools. Se desejar mais espaço, clique na tecla Esc para fechar a caixa de pesquisa que você abriu antes. Você deve ver o HTML dessa página – agora você sabe como as coisas funcionam.

No canto superior esquerdo do Developer Tools, você verá um ícone de um mouse dentro de um quadrado. Clique nele e você pode selecionar qualquer elemento na página que você gostaria de alterar. Então vamos fazer algumas mudanças!

Alterando o texto em uma página

Se você sempre quis alterar o texto de um site, talvez para ver como um novo slogan ficaria em sua página inicial ou para remover seu endereço de e-mail de uma captura de tela do Gmail? Agora você pode. Clique no ícone:

Depois clique em qualquer texto na página. No painel do DevTools (Developer Tools), você verá uma linha de texto com um destaque azul semelhante a este:

Clique duas vezes no texto “INSCREVA-SE EM NOSSA NEWSLETTER” destacado em azul no painel do DevTools e ele se transformará em um campo de texto editável.

Digite qualquer coisa que você gostar neste campo de texto, por exemplo (“ME DÊ SEU E-MAIL AGORA”) – deve funcionar melhor agora – e pressione Enter. Voila! Você acabou de alterar o texto de uma página.

Atualize a página e tudo voltará ao normal.

Gostou? Vamos mudar mais algumas coisas nesta página.

O painel do DevTools é recarregado com a página, mas vamos fechá-lo. Clique no “X” no canto superior direito da página.

Legal. Agora vamos abrir novo, mas agora bem no texto que queremos editar. Tudo o que você precisa fazer é clicar com o botão direito do mouse na parte da página que deseja alterar e clicar no link Inspecionar ou Inspecionar Elemento que aparece na parte inferior do menu do botão direito do mouse.

Quando o DevTools for aberto, ele deverá destacar a parte do código onde se encontra essa frase. Muito legal, né! As pequenas coisas contam.

Agora vamos selecionar o título da minha página onde falo sobre SEO e vamos mudar a aparência dele.

Alterando a cor e a fonte dos elementos HTML

À direita desta frase, no painel Ferramentas do desenvolvedor (Developer Tools), você verá um sub-painel com três guias adicionais: Styles, Computed, Event Listeners e outros demais. Esses dois primeiros permitem que você altere a aparência dessa frase. Vamos começar na guia Styles.

Você pode perceber que alguns códigos CSS estão riscados na guia Styles. Isso significa que esses estilos não estão ativos para o elemento que selecionamos, portanto, alterar esses valores não terá efeito. Podemos ignorar isso e seguir adiante.

Vamos tentar mudar alguma coisa? Clique no ícone de seta na parte superior do Inspecionar Elemento novamente e selecione o texto sob o botão “Consultoria de S.E.O” na página. Encontre font-size na guia Styles (basta ir descendo até encontrar).

No momento, ele está definido como 50px, clique duas vezes em 50px e digite 30px. Você irá diminuir o tamanho o texto.

Agora vamos brincar com a cor. Use o ícone do mouse no Inspecionar Elemento para selecionar o botão no final da página desta vez e, na guia Styles, localize esta linha:

E dê um clique duplo em #18ba60 no elemento background. Digite #1ca3db (não esqueça o #) e pressione Enter. Repita o mesmo processo com elemento border.

Você também pode selecionar a cor usando a própria ferramenta de cores do DevTools, basta clicar diretamente na cor ao lado do código hexadecimal da cor.

Após selecionado essa opção, você também copiar outra cor já existente na página, com a opção de cor selecionada basta direcionar o mouse até a cor que deseja copiar.

Acabamos de mudar a cor do nosso botão de verde para azul! Agora vamos tentar algo mais hardcore.

Alterando estados do elemento

Quer ver como um botão ou link ficará quando alguém passa o mouse ou clicar nele? O Inspecionar Elemento do Chrome também pode mostrar. Você pode ver como o elemento ficará quando um visitante ativar o evento :hover (passar o mouse sobre), :focus (selecionar um elemento) e :visited (clicou em algum link).

Certifique-se de ter selecionado aquele mesmo botão. Em seguida, clique com o botão direito do mouse no código na guia Elements e selecione: :hover no menu.

Esse evento muda a cor do botão para verde escuro quando você passa o mouse pelo botão.

Agora mude o valor de background para #FF4A00, e você deve ver instantaneamente a mudança de cor do botão.

Você alterou a cor do :hover, agora desmarque a opção :hover no menu do botão direito e passe o mouse sobre o botão para ver a nova cor.

Alterando imagens

Você também pode facilmente alterar imagens em uma página com o Inspecionar Elemento. Exemplo.

https://criticalhits.com.br/wp-content/uploads/2018/07/saitama-one-punch-man-01.jpg

Agora, abra Inspecionar Elemento selecionando o plano de fundo da página do artigo e verifique se você selecionou a classe CSS blog-single-head with-image. Clique duas vezes no link da URL da imagem de fundo na guia Styles e cole a URL da imagem do Saitama.

E pronto!

Editar um texto, alterar imagens e mudar as cores e estilos podem ajudá-lo a fazer rapidamente as alterações desejadas no seu site. Mas como essas alterações irão se comportar em tamanhos de telas diferente?

É aí que entra a ferramenta Emulation – é onde tudo o que vimos até agora pode ser testado em diferentes dimensões de tela e dispositivos. Veremos como fazer.

Testando um site em qualquer dispositivo

Tudo tem que ser responsivo hoje. Os sites não são mais exibidos apenas em computadores. Dependendo do seu tipo de negócio é mais provável que sejam exibidos em smartphones, tablets, TVs ou outro tipo de tela.

O Emulation é uma ótima ferramenta para ver como suas páginas serão visualizadas pelos usuários em diferentes dispositivos, navegadores e até mesmo locais. Embora isso não substitua os testes reais em diferentes dispositivos e navegadores, já é um ótimo começo.

No DevTools, você notará um pequeno ícone de telefone no canto superior esquerdo:

Clique para ativar o Emulation, a página vai ficar com um estilo responsivo, um menu na parte superior da tela será exibido para poder alternar entre diferentes tamanho de tela e dispositivos.

No modo Responsive, redimensione a aba da janela para ver como o Layout se comporta em diferentes tamanhos de tela. Ou clique no menu na parte superior para selecionar tamanhos de dispositivos padrão, como o iPad Pro ou o iPhone 8 Plus – vá em frente e selecione o iPhone 8 Plus.

A tela da página deve encolher para o tamanho de um iPhone 8 Plus e você pode ampliar um pouco clicando no menu e escolhendo a % do zoom desejado.

Vá em frente e amplie a visão para visualizar mais detalhes da dimensão selecionada, no modo Responsive basta arrastar a aba lateral da janela do Emulation para escalar diferentes dimensões de tela.

Mas agora vamos voltar para a visualização do iPhone 8 Plus, selecionando-a novamente no menu suspenso do Emulation. Ao lado da lista suspensa, está um ícone de um celular:

Como você deve ter adivinhado, isso permite alternar entre a paisagem e a visualização horizontal.

Agora, podemos ver como este artigo ficaria se você estivesse lendo em um iPhone 8 Plus.

Sinta-se à vontade para testar em os outros dispositivos e ver como esta página se comporta enquanto a resolução da tela muda. Todas as outras ferramentas do DevTools que analisamos até agora também irão mudar conforme você alterar o tamanho de tela ou tipo de dispositivo. Por exemplo, acesse a página de SEO novamente.

No modo de exibição Desktop, podemos ver que existe um texto ao lado do logo “Posicione-se melhor nos resultados orgânicos de pesquisa”, enquanto na exibição no iPhone 8 Plus esse texto não é exibido, assim como todo o menu é alterado.

Selecione o texto destacado acima e repare na guia Styles, o elemento CSS display:none; é exibida enquanto o elemento display:inline-block; é riscado quando selecionamos o iPhone 8 Plus. Essa tag CSS tem a capacidade de exibir ou omitir um elemento HTML na tela.

Quando usado com as chamadas media queries, você consegue realizar esse tipo de comportamento.

O em é uma propriedade CSS que permite alterar automaticamente o tamanho do texto. Por exemplo, digamos que temos um usuário com grandes configurações de fontes personalizadas no navegador. Se você definir seu tamanho de fonte de parágrafo para 14px, sua fonte será sempre 14px para esse usuário, não importa o que você faça. No entanto, se você definir o tamanho da fonte do parágrafo para 1em, o navegador do usuário usará essa unidade para dimensionar o texto para as configurações definidas no navegador do usuário. Smartphones e Tablets fazem isso para aumentar ou reduzir textos.

Agora, vamos para a visualização do iPad Apple e selecione o cabeçalho “Consultoria de S.E.O” acima. Desta vez, o tamanho da fonte é 3em. O tamanho da fonte mudou com base na exibição do dispositivo, de volta ao tamanho padrão que ele usaria em um computador, graças à tela maior do tablet. Veja abaixo:

Emular sensores, geolocalização e acelerômetro em dispositivos móveis

Você deve ter notado que seu mouse agora aparece como um pequeno círculo na página. Isso permite uma interação como se estivesse em seu dispositivo móvel. Se você clicar e arrastar para baixo, não irá selecionar o conteúdo como acontece normalmente no desktop – ele arrasta a tela para baixo como se estivesse em um dispositivo touchscreen. Usando essa exibição, você pode ver o tamanho das áreas onde o usuário teria que tocar. Isso significa que você pode ver quais botões, ícones, links ou outros elementos se comportam e se realmente estão acessíveis aos dedos.

Você pode até mesmo fazer seu navegador simular um telefone. Pressione a tecla Esc para abrir o painel do Inspecionar Elemento novamente e sigas as instruções abaixo.

Acessando controles do sensor

Para acessar os controles do sensor do Chrome DevTools:

1. Abra o menu principal do DevTools;
2. Em More Tools, clique em Sensors;

Selecionando a guia Sensors você obterá três novas ferramentas: Geolocation, Orientation, e Touch.

A ferramenta Touch permite ligar ou desligar o seletor em círculo padrão que simula o touchscreen. A ferramenta Orientation permite que você interaja com sites sensíveis a movimentos, como jogos on-line, que permitem que você mova elementos do site movendo o celular. E o Geolocation permite simular um local diferente.

Vamos tentar visualizar meu site da sede do Google em Mountain View, na Califórnia.

Marque opção Custom location na caixa ao lado e insira o valor 37 no campo Latitude e 122 no campo Longitude. Pressione enter.

Nada mudou, certo?

Isso ocorre porque não há conteúdo em meu site que mude com base na localização do usuário. Se você alterar as coordenadas em um site como a amazon.com, que usa sua localização para mostrar conteúdo personalizado, obterá resultados diferentes. Acesse o google.com.br e configure um local diferente, e talvez você veja um novo doodle do Google para um feriado em outro país ou, pelo menos, os resultados de pesquisa estarão em outro idioma.

O Emulation é uma ótima maneira para se colocar no lugar do usuário e considerar o que o usuário pode estar vendo em sua página, além de ser uma maneira de descobrir como funcionam certas funcionalidades em sites de concorrentes.

Simular diferentes redes móveis

Você também pode ver como é navegar em um site em diferentes tipos de redes, veja como seu site será carregado mesmo se os usuários estiverem em uma rede 3G mais lenta.

Para experimentar, clique novamente no Menu do Inspecionar Elemento e selecione Network Conditions. Lá, você pode escolher entre 3G rápido ou lento ou offline para ver como a página funciona sem internet.

Clique em Add… para incluir suas próprias configurações (adicione 56 Kbps para testar a velocidade de conexão discada). Agora, recarregue a página e você verá quanto tempo seu site levaria para carregar em uma conexão lenta e como o site se comporta enquanto está sendo carregado. Isso mostrará por que você deve melhorar seu site para carregar rapidamente em conexões lentas.

Um bom Benchmarking para esses dados é você avaliar a velocidade de conexão média de seus visitantes, se o seu site é bastante visitante em países onde a Internet é precária vale a pena otimizar. Depois compare o desempenho de seu site com concorrentes e grandes players de mercado.

Você também pode alterar seu User agent – desmarque a opção Select automatically ao lado de User agent e selecione Internet Explorer 7 para ver se o site sofre alguma alteração em navegadores mais antigos.

Isso também é útil para garantir que suas páginas funcionem adequadamente em diferentes navegadores, como o Internet Explorer.

Desafio! Mostre o que você aprendeu!

• Altere uma reportagem no g1.globo.com e poste uma captura de tela com sua nova reportagem (alguns fakenews surgiram assim).
• Acesse seu site favorito e use o Inspecionar Elemento e brinque com o código HTML para deixá-lo como quiser.
• Veja como o seu site é renderizado em um dispositivo móvel e mostre ao seu desenvolvedor o que poderia ser melhorado.

Eu uso o Inspecionar Elemento para fazer uma auditoria no código-fonte de sites e otimizar quando um erro de SEO é encontrado, o Developer Tools também possui uma ferramenta de auditoria onde posso extrair os dados para efetuar melhorias.

Bom, é isso! Espero que este Tutorial possa ser útil para seus projetos.