Há inúmeros recursos valiosos de desenvolvimento web, sejam livros, vídeos, cursos on-line e muito mais. Aprender a usar a ferramenta Inspecionar Elemento do navegador é uma capacidade tão poderosa. É uma ferramenta de aprendizagem inestimável – uma ferramenta que está bem debaixo da ponta de seus dedos e sempre acessível.
Com o recurso Inspecionar Elemento, você pode ver o funcionamento interno do site. Embora você só possa ver marcas front-end como HTML, CSS e, às vezes, JavaScript, isso lhe dá uma maneira de ver precisamente como os desenvolvedores construíram um site.
Neste artigo, vamos lhe mostrar como usar a ferramenta Inspecionar Elemento e algumas das tecnologias, características e funcionalidades relacionadas que você vai encontrar. Primeiro, vamos dar-lhe uma introdução formal à própria ferramenta Inspecionar Elemento.
Confira nosso guia em vídeo sobre como editar um site com a ferramenta inspecionar elemento
Introduzindo o recurso Inspecionar Elemento
Nos primeiros tempos da web, só havia uma maneira de ver o código de um site – o recurso View Source.
Esta situação prevaleceu nos dias antes de termos Folhas de Estilo em Cascata (CSS) e JavaScript em abundância. Os desenvolvedores web usavam HTML para todos os elementos do site, incluindo conteúdo, design, e… bem, tudo.
Uma vez que a web começou a evoluir e as tecnologias subjacentes aumentaram em poder, foi necessário desenvolver melhores ferramentas. Firefox’s Firebug foi uma solução precoce para descobrir como um site funcionava e funcionava sob o capô:
Depois de um tempo, essa funcionalidade encontrou seu caminho em quase todos os navegadores. Hoje, sabemos que essa funcionalidade é a ferramenta Inspecionar Elemento:
É uma maneira poderosa de ver a tecnologia e o código subjacente de um site. Como tal, você pode encontrá-la em alguns lugares diferentes – muitas vezes através de um menu da barra de ferramentas, clicando com o botão direito em uma página e selecionando a opção, ou com um atalho de teclado.
Embora o foco principal da ferramenta Inspecionar Elemento esteja no HTML e CSS de uma página, há muito mais que você pode fazer com ela.
Visitando o painel da ferramenta Inspecionar Elemento
A ferramenta Inspecionar Elemento é muito mais do que uma forma de exibir código. Muitas vezes há vários painéis a serem acessados:
- Inspecionar – Isto é chamado de Elementos em alguns navegadores. É a tela principal da ferramenta Inspecionar Elemento e mostra o código da página, juntamente com o CSS específico do elemento. Você também encontrará mais detalhes sobre o “grid system” de um site e outros aspectos.
- Console – Este é um registro de aviso para um site, e é um lugar onde você também pode inserir trechos de código para realizar um teste rápido de uma idéia.
- Rede – Aqui, você verá as solicitações feitas de e para um servidor, tais como todas as solicitações POST e GET.
- Performance – É claro, um site tem que ser performante. Como tal, há uma ferramenta dedicada para ajudá-lo a avaliar algumas métricas essenciais do site. Alguns navegadores fazem melhor do que outros aqui.
- Memória – Este painel permite ver como um site utiliza a memória e, novamente, alguns navegadores oferecem métricas extensivas.
- Aplicativo – Dentro deste painel, você pode ver toda uma gama de informações sobre o cache do site, serviços de fundo e muito mais.
Além disto, há mais painéis que você pode acrescentar:
Existem painéis simples, como o Media, e painéis mais complexos como o JavaScript Profiler e o Performance monitor. Em poucas palavras, o nome da ferramenta Inspecionar Elemento está fazendo um mau serviço a todas as funcionalidades sob o capô. Ela tem um poder imenso e deve ser central para o fluxo de trabalho de qualquer desenvolvedor web.
Por que usar a ferramenta Inspecionar Elemento?
A ferramenta Inspecionar Elemento é quase a única solução “naïled-on” que você precisará ter ao seu lado durante o desenvolvimento. Vamos entrar nos detalhes técnicos sobre o porquê durante o resto do artigo. Primeiro, porém, vale a pena falar sobre sua motivação para usar a ferramenta Inspecionar Elemento.
Há algumas razões pelas quais você gostaria de usar a ferramenta:
- Você pode navegar por outros sites para obter inspiração sobre como trabalhar no seu site.
- Você aprenderá como outros sites ou desenvolvedores conseguem técnicas específicas.
- Ele lhe dá uma licença para experimentar em seu site sem conseqüências.
- Na maioria das ferramentas para Inspecionar Elementos, você tem a oportunidade de depurar os sites.
- É bom saber mais sobre o site em questão.
Em resumo, aprender sobre o desenvolvimento da web envolve olhar bons exemplos de sites e descobrir o que os faz funcionar.
A ferramenta Inspecionar Elemento permite que você verifique exatamente o HTML e o CSS usados em um site, dando-lhe uma grande chance de implementar esses aspectos e técnicas em seu trabalho.
Como encontrar a ferramenta de Inspeção de Elementos do seu navegador?
A boa notícia é que encontrar a ferramenta Inspecionar Elemento é simples. Na maioria dos casos, você clicará com o botão direito em uma página e selecionará Inspecionar ou Inspecionar Elemento.
Por padrão, ela abrirá a ferramenta em uma janela dividida. Muitas vezes, por padrão, a ferramenta é aberta para o lado direito. Mas você pode personalizar isto ao seu gosto e até mesmo colocar a ferramenta na sua janela.
Naturalmente, você também pode acessar Inspecionar Elemento a partir da barra de ferramentas do navegador ou através de um atalho de teclado. A localização exata varia de acordo com o navegador. Por exemplo, no Firefox, você encontrará as Ferramentas do Desenvolvedor da Web no menu Ferramentas > Ferramentas do Navegador. Em contraste, Brave (e outros navegadores baseados em Chrome) têm a opção Ferramentas do Desenvolvedor no menu View > Developer Tools.
Os atalhos do teclado são muitas vezes similares em cross-browser: Comando + Shift + C (Controle + Shift + C para Windows). Este atalho faz com que seja rápido trazer à tona as ferramentas com as quais você precisa trabalhar imediatamente.
Se você nunca abriu a ferramenta Inspecionar Elemento antes, ela é freqüentemente exibida no lado direito do seu menu, como mencionamos anteriormente. Para mudar isso, clique no menu de traffic na barra de ferramenta Inspecionar Elemento. Aqui, você pode mudar o lado em que a “painel/doca” é exibida:
Observe que o Firefox também usa uma visualização “painel triplo” por padrão, o que ajuda a obter o máximo de informações na ferramenta Inspecionar Elemento:
Agora que você tem a ferramenta aberta, é uma boa idéia descobrir o que você pode fazer com ela. Falaremos sobre isso a seguir.
3 situações para a utilização da ferramenta Inspecionar Elemento
Abordamos algumas maneiras de usar a ferramenta Inspecionar Elemento, mas podemos ir mais além para oferecer alguns casos de uso. Vamos discuti-los em resumo.
1. Busca de elementos específicos em uma página da Web
O objetivo principal da ferramenta Inspecionar Elemento está em seu nome – inspecionar elementos do site. Para fazer isso, você irá para a página web desejada e então escolherá seu método de abertura das ferramentas de desenvolvimento.
Uma vez aberto o painel, você clicará na seta que atua como um seletor para o elemento desejado:
A partir daqui, você pode pairar sobre qualquer elemento da página, e você o verá destacado na janela Inspecionar/Elementos:
É um processo simples – uma das razões pelas quais a ferramenta Inspecionar Elemento é tão valiosa e popular entre os desenvolvedores web.
2. Emulação de um dispositivo alvo, tela e navegador
Inspecionar Elemento também funciona como uma espécie de emulador de dispositivos. Em outras palavras, você pode ver como fica um site em um dispositivo específico. As opções são numerosas:
Este emulador será ótimo para julgar se sua estratégia móvel-primeiro ou projeto responsivo é preciso e funcional. É inestimável e também mais econômico do que ter 200 dispositivos flutuando ao redor de sua tabela.
Muitas vezes você terá acesso à emulação de dispositivos a partir de um pequeno ícone em algum lugar no painel do Inspecionar Elemento:
Clicando neste ícone, seu site será exibido como aparece no dispositivo que você selecionou:
Mais tarde, vamos investigar isto com mais detalhes, mas é uma forma sólida de tornar seus projetos consistentes através de dispositivos.
3. Como avaliar o desempenho da página da Web
A ferramenta Inspecionar Elemento também pode ajudá-lo a julgar a velocidade e o desempenho de um site através do painel Performance:
Este recurso funciona “registrando” os tempos de carregamento de elementos e scripts específicos. Os navegadores baseados no Chrome têm um desempenho brilhante ao oferecer estas informações. Você gravará a página conforme ela carrega, e então visualizará os resultados em um formato de linha do tempo.
É uma excelente maneira de verificar se uma página tem um desempenho de nível geral. A partir daí, você vai querer usar uma ferramenta como o Google PageSpeed Insights ou o Lighthouse para trabalhar ainda mais no desempenho do seu site. Os navegadores baseados no Chrome terão um gerador de relatórios do Lighthouse incorporado:
Você também pode ver um resumo dos testes de desempenho dentro de algumas outras guias. Por exemplo, você pode ver uma Call Tree, um resumo geral, e um Registro de Eventos:
É concebível que você não precisaria de nenhuma outra ferramenta para julgar o desempenho ou o funcionamento do seu site. Aprender como ele funciona na prática é algo que discutiremos a seguir.
Truques e dicas para usar a ferramenta Inspecionar Elemento
Já falamos sobre como a ferramenta Inspecionar Elemento é mais poderosa do que parece à primeira vista. Vamos dar uma olhada em alguns truques e dicas para obter o melhor do seu conjunto de recursos, começando com o básico.
1. Mudança de propriedades, valores e estados dos elementos
Até agora, só tocamos no conceito de usar a ferramenta Inspecionar Elemento para fazer mudanças temporárias em um site. Vamos discutir como fazer isso com mais detalhes.
As etapas são simples. Primeiro, use o ícone da seta para selecionar seu elemento escolhido. Você verá uma sobreposição que destaca os vários componentes enquanto você paira sobre eles:
Uma vez chegado ao elemento desejado, você pode clicar duas vezes em quase qualquer lugar que você veja uma etiqueta dentro do painel Elements e digitar uma mudança. Por exemplo, queremos mudar o texto original do herói na página inicial da Kinsta para algo diferente:
Você também pode trabalhar com o CSS da mesma forma que com o HTML. Por exemplo, pegue os botões Call to Action (CTA) na página inicial da Kinsta:
Se você selecionar o botão usando o ponteiro, você pode ver seu CSS relacionado no painel Estilos à direita:
Como com os elementos HTML, você pode mudar os valores e adicionar seu CSS também:
É claro, para elementos como botões, você pode querer trabalhar com seus vários estados. Neste caso, o estado :hover também vale a pena mudar. Para fazer isso, clique no link :hov no painel Estilo. Escolhendo isto, você pode selecionar aqueles para os quais você quer ver o CSS do estado :hover-state:
A página web mostrará como fica o estado sem que você tenha que agir. Aqui, nós mudamos as cores para diferenciá-lo do estado padrão do botão:
Você pode até mesmo tirar URLs de imagens e trocá-las por outras. Na página inicial da Kinsta, mostramos uma captura de tela do painel MyKinsta:
Através da localização do elemento e da mudança da URL de origem da imagem, você é capaz de testar outras imagens em seu lugar:
Como seria de esperar, estas mudanças não são permanentes, e com uma rápida atualização da página, você pode fazer com que as coisas voltem ao normal. Como alternativa, você também pode copiar o HTML e o CSS para seu editor e incluí-los em seu código para que essas mudanças sejam permanentes.
2. Busca de Elementos
Pode ser que antes de poder alterar um elemento, você precise encontrá-lo. A ferramenta Inspecionar Elemento tem uma funcionalidade de busca direta que pode ajudá-lo a encontrar qualquer aspecto de uma página da web.
Dito isto, é difícil de encontrar se você não souber onde procurar. O caminho “oficial” nos navegadores baseados em Chrome é ir para o menu “traffic” no lado direito da página e selecionar a opção Procurar:
Com isso, será aberto o painel do Console, juntamente com uma aba de Busca. Daqui, digite a tag desejada na caixa de texto, e você verá uma lista de elementos associados na página:
Observe que em outros navegadores, você pode encontrar a funcionalidade em outro lugar. Por exemplo, o Firefox inclui uma caixa de busca na parte superior do seu painel Inspecionar:
Aqui está outra dica rápida: Você pode realizar a expansão recursiva dos vários nós e elementos clicando com o botão direito dentro do painel de Elementos, e escolhendo Expandir recursivamente:
Se você der uma olhada no painel Estilos, você também encontrará uma caixa de texto Filtro. Este campo permite filtrar pelas propriedades do CSS, tornando-o um ótimo companheiro para a funcionalidade de busca global:
De modo geral, não deve ser difícil encontrar o que você precisa com dois filtros e ferramentas de busca dedicados.
3. Uma breve introdução ao modelo caixa
Uma das melhores maneiras que a ferramenta Inspecionar Elemento pode ajudá-lo a aprender mais sobre como as propriedades do CSS agem sobre os elementos é o painel visual “modelo caixa”.
Esta visão geral lhe dá uma representação de como uma caixa específica (como “elemento” ou “div”) aparece na tela. Em outras palavras, é uma visão geral de como as margens, acolchoamento, borda e conteúdo se combinam para se tornar a seção que você vê na tela.
Explicar o modelo completo de caixa CSS e como ele interage com o HTML de uma página da web está além do escopo deste artigo, embora a Mozilla tenha um guia fantástico para o interior e exterior do conceito.
Você encontrará freqüentemente o painel Modelo Caixa dentro das seções Layout ou Computed do painel direito da ferramenta Inspecionar Elemento:
Como com qualquer elemento e propriedades, você também pode alterar os valores e configurações de uma determinada caixa. Haverá também uma lista de outras propriedades para ajudá-lo a posicionar a caixa, definir um índice z, aplicar configurações de flutuação e exibição, e muito mais.
Enquanto trabalha com o modelo caixa, você também pode se beneficiar de ver o sistema de grade em jogo na página. Para isso, dê uma olhada no painel Layout – as opções que você precisa estarão sob o menu Grid:
Clicando nas configurações de exibição desejadas e, em seguida, escolhendo uma sobreposição relevante, será mostrado na tela, permitindo tomar decisões mais precisas usando o modelo caixa para manipular os elementos do site.
4. Emulando dispositivos usando a ferramenta Inspecionar Elemento
Eles passaram das palavras-chave para termos léxicos integrados, mas “responsivo” e “amigável ao celular” são fatores-chave para o desenvolvimento da web. Como tal, a ferramenta Inspecionar Elemento aborda esta faceta através de um par de recursos.
Na maioria dos navegadores, a ferramenta Inspecionar Elemento terá um ícone de dispositivo móvel ao longo da barra de ferramentas superior:
O Safari, no entanto, é diferente. Em vez disso, há uma alternância entre o modo Enter/Exit Responsive Design Mode no menu Develop:
Independentemente de como você chegar lá, uma vez escolhida a opção, a página web será exibida como se você a estivesse visualizando em um dispositivo menor:
Enquanto o Safari oferece apenas a você a escolha de diferentes dispositivos Apple, outros navegadores se aprofundam para lhe fornecer as ferramentas que você precisa para projetar com princípios de mobile-first. Por exemplo, você pode escolher a orientação do viewport, bem como o dispositivo que você gostaria de emular:
Há dois outros recursos interessantes aqui. Primeiro, você pode escolher uma velocidade de rede emulada. O Safari não inclui nenhuma opção para isto, e os navegadores baseados em Chrome oferecem uma pequena escolha geral de estrangulamento da rede:
O Firefox faz o melhor aqui, com uma seleção decente de escolhas de rede para escolher:
Para arredondar as coisas, você também é capaz de simular o feedback táctil e o reconhecimento do sensor. É o padrão nos navegadores baseados em Chrome, e no Firefox, você tem que alterná-lo:
O Firefox fica para trás, como o Chrome, o Brave, e outros mostram seu cursor como uma pequena “ponta de dedo” sobreposta. A funcionalidade não é perfeita para nenhum navegador, embora seja uma maneira confiável de determinar como seu site pode agir sobre outros dispositivos.
Este tipo de teste muitas vezes fica de lado para muitos desenvolvedores web. Dito isto, não há desculpa agora quando os navegadores oferecem soluções abrangentes como esta.
5. Atalhos do teclado ao utilizar a ferramenta Inspecionar Elemento
A maioria dos atalhos de teclado do navegador são freqüentemente os mesmos em todos os navegadores. Isso é uma boa notícia, se você alternar entre várias ferramentas para testar seus sites.
Aqui está uma lista rápida de alguns dos atalhos mais populares (e valiosos):
| Abrir a ferramenta Inspecionar Elemento | Comando + Shift + C para Mac, Controle + Shift + C para Windows |
| Movimentar-se entre os nós | Setas para cima e para baixo |
| Expandir o nó selecionado | Seta para a direita |
| Colapsar o nó selecionado | Seta à esquerda |
| Recursivamente expandir e colapsar os nós | Opção + Clique para Mac, Alt + Clique para Windows |
| Mova-se dentro de um nó para trabalhar com atributos | Entrar ou retornar |
| Avançar através dos atributos de um nó | Tab |
| Recuar através dos atributos de um nó | Shift + Tab |
| Ocultar ou mostrar o nó selecionado | H |
| Editar e parar de editar um nó como HTML | F2 |
| Quando uma propriedade CSS é selecionada, aumente o valor em um | Seta para cima |
| Quando uma propriedade CSS é selecionada, diminua o valor por um | Seta para baixo |
| Quando uma propriedade CSS é selecionada, aumente o valor em dez | Shift + seta para cima |
| Quando uma propriedade CSS é selecionada, diminua o valor em dez | Shift + Seta para baixo |
| Quando uma propriedade CSS é selecionada, aumente o valor em 0,1 | Opção + seta para cima para Mac, Alt + seta para cima para Windows |
| Quando uma propriedade CSS é selecionada, diminua o valor em 0,1 | Opção + seta para baixo para Mac,Alt + seta parabaixo para Windows |
É claro, há muitos mais atalhos disponíveis. A Mozilla possui documentação excepcional para o Firefox, enquanto o Chrome, o Brave, o Edge e outros compartilham os atalhos. A Apple é menos útil com os atalhos para desenvolvedores Safari, pois não há uma lista definida dentro de suas páginas de ajuda. Ao invés disso, sugerimos a leitura da documentação oficial das ferramentas para desenvolvedores do Safari.
Resumo
O desenvolvimento da web não é mais apenas HTML. Há muitas tecnologias envolvidas. Mesmo mantendo a santa trindade do HTML, CSS e JavaScript, você ainda precisará ver como um site reúne todos esses componentes.
A ferramenta Inspecionar Elemento do navegador é uma das melhores maneiras de olhar sob o capô de um site e descobrir em detalhes explícitos como ela funciona. Embora seja fantástico como auxiliar de aprendizagem, também pode ajudá-lo a testar mudanças em seu site e descobrir como ele funciona em diferentes dispositivos e redes móveis.
Você usa a ferramenta Inspecionar Elemento com freqüência? Se sim, quais são seus recursos favoritas? Compartilhe suas opiniões na seção de comentários!
Deixe um comentário