O Google Chrome não é apenas um navegador rápido para o consumidor – ele também esconde uma série de recursos de desenvolvedor sob seu capô. Você pode revelar um pouco desse poder com a ferramenta “Inspecionar”. Embora inicialmente opressiva, a ferramenta oferece uma visão sobre como os sites são construídos e pode ajudá-lo a depurar seus próprios sites.
Acessando a ferramenta de inspeção
A ferramenta Inspecionar pode ser encontrada no menu de contexto do Chrome.
Clique com o botão direito em qualquer elemento do navegador e clique em “Inspecionar” no menu de contexto.
Uma janela aparecerá na lateral do navegador Chrome, conforme mostrado abaixo. Isso é chamado de painel DevTools. Se você já usou o Firebug no Firefox, pode reconhecer algumas partes dele.
Há muito aqui, então vamos examinar as peças individuais.
Inspecionando o Inspetor
O painel de inspeção é dividido em várias guias diferentes que são visíveis na parte superior da janela. Vamos nos concentrar na guia Elementos padrão.
Existem dois botões úteis próximos a essas guias. A primeira é a ferramenta Inspecionar Elemento.
Esta ferramenta permite que você passe o mouse e selecione diferentes elementos DOM para inspecionar.
O segundo botão ativa o modo de visualização do dispositivo. Neste modo, você pode ver a aparência da sua página da web em diferentes resoluções e tamanhos de tela.
Se você clicar nesse botão, você verá sua página da web mudar para uma nova visualização.
Você pode então usar o menu suspenso acima da visualização da página ou as alças nas laterais da visualização da página para redimensionar a janela de visualização do dispositivo.
Visualização HTML
A maior parte da guia DevTools é ocupada pelo painel HTML.
Este painel é como uma “fonte de visualização” superpotente. Está estruturado de acordo com o DOM, com elementos aninhados dentro de seus elementos pais.
Você verá que o elemento que você “inspecionou” no início é automaticamente destacado com um fundo cinza ou azul. Aqui, inspecionei uma imagem que está contida em um link. Como esperado, vejo uma marca de âncora destacada.
Mas cadê minha imagem? Posso revelar quaisquer elementos DOM aninhados na tag âncora clicando no triângulo de divulgação ao lado de . Neste caso, a seta revela a tag que eu esperava encontrar.
Você também notará uma pequena barra de menu na parte inferior do painel HTML.
Isso é chamado de trilha de navegação e mostra todos os elementos pais do elemento selecionado. Para navegar até um desses elementos, basta clicar nele.
Estilos
Abaixo da visualização HTML, também vemos um painel que mostra todas as regras CSS que se aplicam ao nosso elemento. Isso é chamado de painel Estilos e, neste caso, vemos todas as regras que se aplicam à tag âncora que examinei anteriormente.
Você pode ativar e desativar uma regra passando o mouse sobre ela e clicando na caixa de seleção ao lado dela.
Você verá essa mudança refletida na visualização da página imediatamente. E se você clicar diretamente em uma regra, você pode alterar seu nome e valor.
Você também pode pesquisar regras específicas usando a caixa de pesquisa Filtro.
O painel Estilos é capaz de muito mais do que apenas isso, entretanto. Confira a documentação do Google para obter uma explicação completa das muitas funções do painel Estilo.
Modelo de caixa e estilo computado
Ao lado da visualização do estilo está o modelo de caixa para o meu elemento selecionado. Se você não estiver familiarizado, o modelo de caixa é uma representação abstrata da margem, borda, preenchimento e tamanho do conteúdo aplicado a um elemento específico.
Neste caso, posso ver que meu elemento tem um tamanho primário de 461 x 209 pixels. Ele não contém regras de margem, borda ou preenchimento, portanto, essas caixas ficam em branco.
Se você escolher um elemento com alguma posição, margem, borda ou regras de preenchimento, seu modelo de caixa pode se parecer mais com isso.
Você também pode ver um no local modelo de caixa se você passar o mouse sobre os elementos DOM com a ferramenta Inspecionar elemento ativada.
Abaixo do modelo de caixa está uma lista de todas as regras de estilo que se aplicam a este elemento específico. Isso é um pouco diferente do painel Estilos. Ele não exibe as linhas reais do CSS – apenas os efeitos dessas regras. Isso é chamado de “estilo computado” do objeto e é o resultado combinado do seu CSS.
Finalmente, você pode pesquisar regras específicas digitando na caixa Filtro.
Conclusão
Se você trabalha frequentemente com páginas da web, vale a pena explorar a ferramenta Inspect do Chrome. E as outras guias no DevTools, como Console e Rede, podem ser inestimáveis para os desenvolvedores. Há mais coisas do que podemos cobrir agora, mas Documentação do próprio Google é completo e útil.
