Existem inúmeros recursos valiosos de desenvolvimento da web , sejam livros, vídeos, cursos online e muito mais. Aprender como usar a ferramenta Inspecionar Elemento de um navegador é uma dessas habilidades poderosas. É uma ferramenta de aprendizagem inestimável - que está ao seu alcance e sempre acessível.
Com o recurso Inspecionar elemento, você pode ver o funcionamento interno do site. Embora você só possa ver a marcação de front-end, como HTML, CSS e, às vezes, JavaScript, é uma maneira de ver precisamente como os desenvolvedores construíram um site.
Nesta postagem, mostraremos como usar a ferramenta Inspecionar Elemento e algumas das tecnologias, recursos e funcionalidades relacionadas que você encontrará. Primeiro, vamos dar a você uma introdução formal à ferramenta Inspecionar elemento em si.
Apresentando a ferramenta Inspecionar Elemento
Nos primeiros dias da web, havia apenas uma maneira de ver o código de um site - o recurso Exibir código- fonte .
Página “Ver fonte” do Kinsta.com.
Essa situação prevalecia nos dias anteriores a termos Cascading Style Sheets (CSS) e JavaScript em abundância. Os desenvolvedores da Web usaram 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 ferramentas melhores. O Firebug do Firefox foi uma das primeiras soluções para descobrir como um site funcionava e funcionava nos bastidores:
Os logotipos do Firefox e Firebug.
Depois de um tempo, essa funcionalidade encontrou seu caminho em quase todos os navegadores. Hoje, conhecemos esse recurso como a ferramenta Inspecionar Elemento:
A ferramenta Inspecionar elemento no site Kinsta.
É uma maneira poderosa de ver a tecnologia e o código subjacentes de um site. Assim, você pode encontrá-lo em alguns lugares diferentes - geralmente por meio 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 seja o HTML e CSS de uma página, você pode fazer mais com isso.
Visitando o Painel de Inspecionar Elemento
DevTools da Brave.
A ferramenta Inspecionar elemento é muito mais do que uma forma de exibir código. Freqüentemente, há vários painéis para acessar:
- Inspetor - é chamado de Elementos em alguns navegadores. É a tela principal da ferramenta Inspecionar elemento e mostra o código da página, junto com CSS específico do elemento. Você também encontrará mais detalhes sobre o “sistema de grade” de um site e outros aspectos.
- Console - Este é um log de aviso de front-end para um site, e é um lugar onde você também pode inserir trechos de código para realizar um teste rápido de uma ideia.
- Rede - aqui, você verá as solicitações feitas de e para um servidor, como todas as solicitações POST e GET.
- Desempenho - é claro, um site deve ter desempenho . Como tal, existe uma ferramenta dedicada para ajudá-lo a avaliar algumas métricas essenciais do site. Alguns navegadores funcionam melhor do que outros aqui.
- Memória - Este painel permite que você veja como um site usa memória e, novamente, alguns navegadores oferecem métricas extensas.
- Aplicativo - neste painel, você pode ver uma ampla gama de informações sobre o cache do site, serviços de segundo plano e muito mais.
Além disso, existem mais painéis que você pode adicionar:
Uma lista de outros painéis dentro do DevTools da Brave.
Existem painéis simples, como Mídia , e outros mais complexos, como o JavaScript Profiler e o Monitor de desempenho . Em suma, o nome da ferramenta Inspecionar elemento está prestando um péssimo serviço a todas as funcionalidades subjacentes. Ele tem um poder imenso e deve ser fundamental para o fluxo de trabalho de qualquer desenvolvedor da web.
Por que você deseja usar o elemento de inspeção
A ferramenta Inspecionar Elemento é quase a única solução “acertada” que você precisa ter ao seu lado durante o desenvolvimento. Entraremos em detalhes técnicos sobre o motivo no restante do artigo. Primeiro, porém, vale a pena falar sobre sua motivação para usar o Elemento Inspecionar.
Existem alguns motivos pelos quais você deseja usar a ferramenta:
- Você pode navegar em outros sites para se inspirar em como trabalhar no seu.
- Você aprenderá como outros sites ou desenvolvedores alcançam técnicas específicas.
- Dá-lhe uma licença para experimentar no seu site sem consequências.
- Na maioria das ferramentas do Inspecionar elemento, você tem a oportunidade de depurar os sites.
- É bom saber mais sobre o site em questão.
Resumindo, aprender sobre desenvolvimento web envolve olhar para bons exemplos de sites e descobrir o que os faz funcionar.
A ferramenta Inspecionar elemento permite verificar o HTML e CSS exatos usados em um site, dando a você 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ê clica com o botão direito em uma página e seleciona Inspecionar ou Inspecionar elemento :
Escolhendo a ferramenta Inspecionar Elemento.
Por padrão, ele abrirá a ferramenta em uma janela dividida. Freqüentemente, o padrão é o lado direito. Mas você pode personalizar isso ao seu gosto e até mesmo colocar a ferramenta em sua janela:
A ferramenta Inspecionar elemento em sua janela.
Obviamente, você também pode acessar o Inspecionar elemento na barra de ferramentas do navegador ou por meio de um atalho de teclado. A localização exata irá variar dependendo do navegador. Por exemplo, no Firefox , você encontrará as Ferramentas para Desenvolvedores da Web no menu Ferramentas> Ferramentas do navegador . Em contraste, Brave (e outros navegadores baseados em Chromium) têm a opção Ferramentas do desenvolvedor no menu Exibir> Desenvolvedor :
Menu da barra de ferramentas do Brave, mostrando suas ferramentas de desenvolvedor.
Os atalhos de teclado costumam ser semelhantes em navegadores diferentes: Command + Shift + C ( Control + Shift + C para Windows). Este atalho torna mais rápido abrir as ferramentas com as quais você precisa trabalhar imediatamente.
Se você nunca abriu a ferramenta Inspecionar elemento antes, ela geralmente é exibida no lado direito do seu menu, como mencionamos anteriormente. Para mudar isso, clique no tráfego menu leve na Inspecione barra de ferramentas do elemento. Aqui, você pode mudar o lado em que o "dock" é exibido:
As opções do “lado da doca” na ferramenta Inspecionar elemento.
Observe que o Firefox também usa uma visualização de “painel triplo” por padrão, o que ajuda você a obter o máximo de informações possível na ferramenta Inspecionar elemento:
Visualização do “painel triplo” do Firefox.
Agora que você tem a ferramenta aberta, é uma boa ideia descobrir o que você pode fazer com ela. Falaremos sobre isso a seguir.
3 situações para usar a ferramenta Inspecionar elemento
Mencionamos algumas maneiras de usar a ferramenta Inspecionar elemento, mas podemos ir além para oferecer alguns casos de uso. Vamos discutir isso brevemente.
1. Pesquisa de elementos específicos em uma página da web
O objetivo principal da ferramenta Inspecionar Elemento está em seu nome - inspecionar os elementos do site. Para fazer isso, você irá para a página desejada e escolha o método de abertura das ferramentas de desenvolvimento .
Assim que o painel estiver aberto, você clicará na seta que atua como um seletor para o elemento desejado:
O ícone de seta do inspetor.
A partir daqui, você pode passar o mouse sobre qualquer elemento na página e o verá destacado na janela Inspetor / Elementos :
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 da web.
2. Emulando um dispositivo, monitor e navegador de destino
O Inspect Element também funciona como uma espécie de emulador de dispositivo. Em outras palavras, você pode ver a aparência de um site em um dispositivo específico. As opções são inúmeras:
Uma lista de dispositivos emulados mostrados em Brave.
Este emulador será ótimo para julgar se sua estratégia mobile-first ou design responsivo é preciso e está funcionando. É inestimável e também mais econômico do que ter 200 dispositivos flutuando em sua mesa.
Freqüentemente, você acessará a emulação de dispositivo a partir de um pequeno ícone em algum lugar do painel Inspecionar elemento:
Emulando um dispositivo com a ferramenta Inspecionar Elemento.
Clicar neste ícone exibirá seu site da mesma forma que se parece com o dispositivo que você selecionou:
Escolha de um dispositivo para emular a partir da ferramenta Inspecionar Elemento.
Veremos isso com mais detalhes posteriormente, mas é uma maneira sólida de tornar seus projetos consistentes em todos os dispositivos.
3. Verificar o desempenho da página da web
A ferramenta Inspecionar elemento também pode ajudá-lo a avaliar a velocidade e o desempenho de um site por meio do painel Desempenho :
O painel Inspecionar desempenho do elemento.
Esse recurso funciona “registrando” os tempos de carregamento de elementos e scripts específicos. Os navegadores baseados em Chromium têm um desempenho excelente ao oferecer essas informações. Você gravará a página à medida que for carregada e, em seguida, verá os resultados em formato de linha do tempo.
É uma excelente maneira de verificar se uma página tem desempenho em um nível geral. A partir daí, você vai querer usar uma ferramenta como o Google PageSpeed Insights ou Lighthouse para trabalhar ainda mais no desempenho do seu site. Os navegadores baseados em Chromium terão um gerador de relatórios Lighthouse integrado:
Um relatório integrado do Google Lighthouse.
Você também pode ver um resumo do teste de desempenho em algumas outras guias. Por exemplo, você pode visualizar uma árvore de chamadas , um resumo geral e um registro de eventos :
O Log de eventos do elemento de inspeção.
É concebível que você não precise de nenhuma outra ferramenta para avaliar o desempenho ou funcionamento do seu site. Aprender como 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 pode parecer à primeira vista. Vamos dar uma olhada em alguns truques e dicas para obter o melhor de seu conjunto de recursos, começando com o básico.
Alterar propriedades, valores e estados do elemento
Até agora, apenas tocamos no conceito de usar a ferramenta Inspecionar Elemento para fazer alterações temporárias em um site. Vamos discutir como fazer isso com mais detalhes.
As etapas são diretas. Primeiro, use o ícone de seta para selecionar o elemento escolhido. Você verá uma sobreposição que destaca os vários componentes à medida que passa o mouse sobre eles:
Seleção de elementos na ferramenta Inspecionar elemento.
Depois de chegar ao elemento desejado, você pode clicar duas vezes em quase qualquer lugar em que vir uma tag no painel Elementos e digitar uma alteração. Por exemplo, queremos alterar o texto original do herói na página inicial do Kinsta para algo diferente:
Alterando o texto na página inicial do Kinsta.
Você também pode trabalhar com CSS da mesma maneira que HTML. Por exemplo, use os botões de apelo à ação (CTA) na página inicial do Kinsta:
Selecionando um botão na página inicial do Kinsta.
Se você selecionar o botão usando o ponteiro, poderá ver seu CSS relacionado no painel Estilos do lado direito :
O painel Estilo na ferramenta Inspecionar elemento.
Assim como acontece com os elementos HTML, você pode alterar os valores e adicionar seu CSS também:
Alterar a cor do botão no painel Estilos.
Claro, para elementos como botões, você pode querer trabalhar com seus vários estados. Nesse caso, o estado : hover também vale a pena ser alterado. Para fazer isso, clique no link : hov no painel Estilo. Escolher isso abrirá uma lista de estados de elemento, e você pode selecionar aqueles para os quais deseja ver o CSS de estado suspenso:
Exibindo as opções de “Estados” no painel Estilos.
A página da web mostrará como é o estado sem que você precise agir. Aqui, mudamos as cores do foco para diferenciá-lo do estado do botão padrão:
Alterar as cores do estado de flutuação no painel Estilos.
Você pode até pegar URLs de imagens e trocá-los por outros. Na página inicial do Kinsta, mostramos uma captura de tela do painel do MyKinsta :
O painel MyKinsta na página inicial do Kinsta.
Localizando o elemento e alterando o URL de origem da imagem, você pode testar outras imagens em seu lugar:
Nesse caso, a mudança foi publicada em poucos minutos (Fonte da imagem: Pixabay ).
Como era de se esperar, essas mudanças não são permanentes e, com uma atualização rápida da página, você pode fazer as coisas voltarem ao normal. Como alternativa, você também pode copiar o HTML e CSS para o seu editor e incluí-los no seu código para tornar essas alterações permanentes.
Procurando por Elementos
Pode ser que, antes de alterar um elemento, você precise encontrá-lo. A ferramenta Inspecionar elemento possui funcionalidade de pesquisa direta que pode ajudá-lo a encontrar qualquer aspecto de uma página da web.
Dito isso, é difícil encontrar se você não sabe onde procurar. A maneira “oficial” em navegadores baseados em Chromium é ir para o menu “semáforo” no lado direito da página e selecionar a opção Pesquisar :
A opção “Pesquisar” no DevTools da Brave.
Usar isso abrirá o painel Console , junto com uma guia Pesquisar . A partir daqui, digite a tag desejada na caixa de texto e você verá uma lista de elementos associados na página:
Precisa de hospedagem excepcional, rápida e segura para seu novo site? A Kinsta fornece servidores ultrarrápidos e suporte de classe mundial 24 horas por dia, 7 dias por semana, de especialistas da web. Confira nossos planos
Procurando por 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 pesquisa na parte superior do painel Inspetor :
Procurando por elementos no painel Inspetor do 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 do mouse no painel Elementos e escolhendo Expandir recursivamente :
A opção Expandir recursivamente no painel Elementos.
Se você der uma olhada no painel Estilos , também verá uma caixa de texto Filtro . Este campo permite filtrar por propriedades CSS, tornando-o um ótimo companheiro para a funcionalidade de pesquisa global:
Filtrando por propriedades no painel Estilos.
No geral, não deve ser difícil encontrar o que você precisa com dois filtros e ferramentas de pesquisa dedicados.
Uma introdução rápida sobre o modelo de caixa
Uma das melhores maneiras pelas quais a ferramenta Inspecionar elemento pode ajudá-lo a aprender mais sobre como as propriedades CSS agem sobre os elementos é o painel visual de “modelo de caixa”.
O modelo da caixa.
Esta visão geral fornece 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, preenchimento, borda e conteúdo se combinam para se tornar a seção que você vê na tela.
Explicar o modelo de caixa CSS completo 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 os detalhes do conceito.
Você frequentemente encontrará o painel Box Model dentro das seções Layout ou Computed do painel direito da ferramenta Inspecionar Elemento:
O painel “Box Model” dentro da ferramenta Inspecionar elemento.
Como acontece com quaisquer elementos e propriedades, você também pode alterar os valores e configurações de uma caixa específica. 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.
Ao trabalhar com o modelo de caixa, você também pode se beneficiar ao ver o sistema de grade em jogo na página. Para fazer isso, dê uma olhada no painel Layout - as opções de que você precisa estarão no menu Grade :
O menu de configurações da grade.
Clicar nas configurações de exibição desejadas e, em seguida, escolher uma sobreposição relevante irá mostrá-la na tela, permitindo que você tome decisões mais precisas usando o modelo de caixa para manipular os elementos do site.
Emulando dispositivos usando inspecionar elemento
Eles passaram de chavões para termos lexicais integrados, mas “responsivo” e “compatível com dispositivos móveis” são os principais fatores de desenvolvimento da web. Dessa forma, a ferramenta Inspecionar elemento aborda essa faceta por meio de alguns recursos.
Na maioria dos navegadores, a ferramenta Inspecionar elemento terá um ícone de dispositivo móvel ao longo da barra de ferramentas superior:
Alternando a visualização responsiva móvel dentro do Brave.
O Safari, entretanto, é diferente. Em vez disso, há uma alternância para entrar / sair do modo de design responsivo no menu Desenvolver :
A opção “Sair do modo de design responsivo” no Safari.
Independentemente de como você chega lá, depois de escolher a opção, a página da web será exibida como se você a estivesse visualizando em um dispositivo menor:
Uma visualização de layout de dispositivo móvel no Firefox.
Embora o Safari apenas dê a você a escolha de diferentes dispositivos Apple, outros navegadores se aprofundam para fornecer as ferramentas de que você precisa para projetar com princípios mobile-first. Por exemplo, você pode escolher a orientação da janela de visualização, bem como o dispositivo que deseja emular:
A lista de “Emulação de dispositivo” no Brave.
Existem dois outros recursos interessantes aqui. Primeiro, você pode escolher uma velocidade de rede emulada. O Safari não inclui nenhuma opção para isso, e os navegadores baseados em Chromium oferecem uma pequena escolha geral de limitação de rede:
As opções de estrangulamento no Brave.
O Firefox faz o melhor aqui, com uma seleção decente de opções de rede para escolher:
Opções de limitação do Firefox.
Para completar as coisas, você também pode simular feedback tátil e reconhecimento de sensor. É o padrão em navegadores baseados em Chromium e, no Firefox, você deve ativá-lo:
A opção de feedback tátil no Firefox.
O Firefox fica para trás aqui, já que o Chrome, Brave e outros mostram seu cursor como uma pequena sobreposição do tipo “ponta de dedo”. A funcionalidade não é perfeita para nenhum navegador, embora seja uma maneira confiável de determinar como seu site pode agir em outros dispositivos.
Esse tipo de teste geralmente é deixado de lado para muitos desenvolvedores da web. Dito isso, não há desculpa agora, quando os navegadores oferecem soluções abrangentes como esta.
Atalhos de teclado ao usar a ferramenta Inspecionar elemento
A maioria dos atalhos de teclado do navegador costuma ser igual 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):
| Abra a ferramenta Inspecionar Elemento | Command + Shift + C para Mac, Control + Shift + C para Windows |
| Mover-se entre nós | Setas para cima e para baixo |
| Expanda o nó selecionado | Seta direita |
| Recolher o nó selecionado | Seta para a esquerda |
| Expandir e recolher nós recursivamente | Option + Click para Mac, Alt + Click para Windows |
| Mova-se dentro de um nó para trabalhar com atributos | Entrar ou Retornar |
| Avance pelos atributos de um nó | Aba |
| Retroceda pelos atributos de um nó | Shift + Tab |
| Ocultar ou mostrar o nó selecionado | H |
| Edite e pare de editar um nó como HTML | F2 |
| Quando uma propriedade CSS é selecionada, incrementa o valor em um | Seta para cima |
| Quando uma propriedade CSS é selecionada, diminui o valor em um | Seta para baixo |
| Quando uma propriedade CSS é selecionada, aumente o valor em dez | Shift + seta para cima |
| Quando uma propriedade CSS é selecionada, diminui o valor em um | Shift + seta para baixo |
| Quando uma propriedade CSS é selecionada, incrementa o valor em 0,1 | Option + seta para cima para Mac, Alt + seta para cima para Windows |
| Quando uma propriedade CSS é selecionada, diminui o valor em 0,1 | Option + seta para baixo para Mac, Alt + seta para baixo para Windows |
Claro, existem muitos mais atalhos disponíveis. Mozilla tem documentação excepcional para Firefox, enquanto Chrome, Brave, Edge e outros compartilham atalhos . A Apple é menos útil com os atalhos de desenvolvedor do Safari, pois não há uma lista definida em suas páginas de ajuda. Em vez disso, sugerimos ler a documentação oficial das ferramentas de desenvolvedor do Safari.
Resumo
O desenvolvimento da Web não é mais apenas HTML. Existem muitas tecnologias envolvidas. Mesmo mantendo a sagrada trindade de 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 os bastidores de um site e descobrir em detalhes explícitos como ele funciona. Embora seja fantástico como um auxiliar de aprendizagem, também pode ajudá-lo a testar as alterações em seu site e descobrir como ele funciona em diferentes dispositivos e redes móveis.
Você usa o Inspecionar elemento com frequência? Se sim, quais são seus recursos favoritos? Compartilhe suas opiniões na seção de comentários!
Economize tempo, custos e maximize o desempenho do site com:
- Ajuda instantânea de especialistas em hospedagem do WordPress, 24 horas por dia, 7 dias por semana.
- Integração Cloudflare Enterprise.
- Alcance de público global com 28 data centers em todo o mundo.
- Otimização com nosso monitoramento de desempenho de aplicativos integrado.
Tudo isso e muito mais, em um único plano, sem contratos de longo prazo, migrações assistidas e garantia de devolução do dinheiro em 30 dias. Confira nossos planos ou fale com o departamento de vendas para encontrar o plano certo para você.