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.

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.

Página "View Source" da Kinsta.com
Página “View Source” da Kinsta.com

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

Os logotipos Firefox e Firebug
Os logotipos Firefox e Firebug

Depois de um tempo, essa funcionalidade encontrou seu caminho em quase todos os navegadores. Hoje, sabemos que essa funcionalidade é a ferramenta Inspecionar Elemento:

A ferramenta Inspecionar Elemento no site da Kinsta.
A ferramenta Inspecionar Elemento no site da Kinsta.

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

Com a ferramenta Inspecionar Elemento do seu navegador, você pode ver o funcionamento interno de qualquer site, do HTML ao CSS 👀 Saiba como usá-lo aqui ⬇️Click to Tweet

Visitando o painel da ferramenta Inspecionar Elemento

DevTools da Brave.
DevTools da Brave.

A ferramenta Inspecionar Elemento é muito mais do que uma forma de exibir código. Muitas vezes há vários painéis a serem acessados:

Além disto, há mais painéis que você pode acrescentar:

Uma lista de outros painéis dentro das DevTools da Brave.
Uma lista de outros painéis dentro da DevTools da Brave.

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 você gostaria de 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:

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 Inspecionar Elemento 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:

Escolhendo a ferramenta Inspecionar Elemento.
Escolhendo a ferramenta 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:

A ferramenta Inspecionar Elemento em sua janela.
A ferramenta Inspecionar Elemento em 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:

Menu da barra de ferramentas da Brave, mostrando suas ferramentas de desenvolvimento.
Menu da barra de ferramentas da Brave, mostrando suas ferramentas de desenvolvimento.

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:

As opções "Dock side" na ferramenta Inspecionar Elemento.
As opções “Dock side” na ferramenta Inspecionar Elemento.

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:

Vista do "painel triplo" do Firefox.
Vista do “painel triplo” do Firefox.

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:

O ícone da Seta Inspetora.
O ícone da Seta Inspecionar.

A partir daqui, você pode pairar sobre qualquer elemento da página, e você o verá destacado na janela Inspecionar/Elementos:

Destacando um elemento no painel de ferramentas de desenvolvimento.
Destacando um elemento no painel de ferramentas de desenvolvimento.

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

Uma lista de dispositivos emulados mostrados em Brave.
Uma lista de dispositivos emulados mostrados em Brave.

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:

Emulando um dispositivo com a ferramenta Inspecionar Elemento.
Emulando um dispositivo com a ferramenta Inspecionar Elemento.

Clicando neste ícone, seu site será exibido como aparece no dispositivo que você selecionou:

Escolhendo um dispositivo para emular a partir da ferramenta Inspecionar Elemento.
Escolhendo um dispositivo para emular a partir da ferramenta Inspecionar Elemento.

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:

O painel de Desempenho do Inspecionar Elemento.
O painel de Desempenho do Inspecionar Elemento.

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:

Um relatório integrado do Google Lighthouse.
Um relatório integrado do Google Lighthouse.

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:

O Registro de Eventos do Inspecionar Elemento.
O Registro de Eventos do Inspecionar Elemento.

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

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:

Seleção de elementos na ferramenta Inspecionar Elemento.
Seleção de elementos na ferramenta Inspecionar Elemento.

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:

Mudança de texto na página inicial do Kinsta.
Mudança de texto na página inicial da Kinsta.

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:

Selecionando um botão na página inicial da Kinsta.
Selecionando um botão 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:

O painel Style dentro da ferramenta Inspecionar Elemento.
O painel Style dentro da ferramenta Inspecionar Elemento.

Como com os elementos HTML, você pode mudar os valores e adicionar seu CSS também:

Mudando a cor do botão no painel Estilos.
Mudando a cor do botão no painel Estilos.

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

Trazendo as opções "Estados" no painel de Estilos.
Trazendo as opções “Estados” no painel de Estilos.

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:

Mudança de cores do estado de pairar no painel de Estilos.
Mudança de cores do estado de pairar no painel de Estilos.

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:

O painel MyKinsta na página inicial do Kinsta.
O painel MyKinsta na página inicial da Kinsta.

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:

Neste caso, a mudança foi ao ar em poucos minutos
Neste caso, a mudança foi ao ar em poucos minutos (Fonte de imagem: Pixabay).

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.

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:

A opção "Busca" no DevTools da Brave.
A opção “Busca” no DevTools da Brave.

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:

Precisa de uma hospedagem excepcional, rápida e segura para seu novo website? A Kinsta fornece servidores rápidos de iluminação e suporte de classe mundial 24 horas por dia, 7 dias por semana, por especialistas em web. Confira nossos planos

Busca de elementos nas DevTools da Brave.
Busca de elementos nas DevTools da Brave.

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:

Procura de elementos no painel do Inspetor Firefox.
Procura de elementos no painel Inspecionar Firefox.

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:

A opção Expandir recursivamente no painel de Elementos.
A opção Expandir recursivamente no painel de Elementos.

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:

Filtragem por propriedades no painel Estilos.
Filtragem por propriedades no painel Estilos.

De modo geral, não deve ser difícil encontrar o que você precisa com dois filtros e ferramentas de busca dedicados.

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

O Modelo Caixa.
O 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:

O painel "Modelo de Caixa" dentro da ferramenta Inspecionar Elemento.
O painel “Modelo Caixa” dentro 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:

O menu Grid settings.
O menu Grid settings.

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.

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:

Trocando a visualização móvel responsiva dentro da Brave.
Trocando a visualização móvel responsiva dentro do Brave.

O Safari, no entanto, é diferente. Em vez disso, há uma alternância entre o modo Enter/Exit Responsive Design Mode no menu Develop:

A opção "Exit Responsive Design Mode" no Safari.
A opção “Exit Responsive Design Mode” no Safari.

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:

Uma visualização do layout do dispositivo móvel no Firefox
Uma visualização do layout do dispositivo móvel no Firefox.

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:

A lista "Emulação de Dispositivos" em Brave.
A lista “Emulação de Dispositivos” no Brave.

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:

As opções de estrangulamento em Brave.
As opções de estrangulamento em Brave.

O Firefox faz o melhor aqui, com uma seleção decente de escolhas de rede para escolher:

As opções de estrangulamento do Firefox.
As opções de estrangulamento do Firefox.

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:

A opção de feedback táctil no Firefox.
A opção de feedback táctil no Firefox.

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.

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 por um 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.

Dê um mergulho profundo na ferramenta Inspecionar Elemento do navegador (e todos os recursos que ele possui) com este extenso guia 🔎Click to Tweet

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!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 29 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.