Usando a ferramenta "Inspecionar" do Google Chrome para diagnósticos de sites

O Google Chrome não é apenas um navegador rápido para consumidores – ele também esconde uma série de recursos para desenvolvedores. Você pode revelar parte desse poder com a ferramenta “Inspecionar”. Embora inicialmente possa ser esmagadora, a ferramenta oferece uma visão de como os sites são construídos e pode ajudá-lo a depurar seus próprios sites.

Acessando a ferramenta Inspecionar

A ferramenta Inspecionar pode ser encontrada no menu de contexto do Chrome.

Clique com o botão direito em qualquer elemento no seu navegador e clique em “Inspecionar” no menu de contexto.

Uma janela aparecerá ao lado do navegador Chrome, como visto 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 partes individuais.

Inspecionando o Inspetor

O painel de inspeção é dividido em várias abas diferentes que são visíveis na parte superior da janela. Vamos nos concentrar na aba padrão Elementos.

Há dois botões úteis ao lado dessas abas. O primeiro é a ferramenta Inspecionar Elemento.

Esta ferramenta permite que você passe o mouse sobre e selecione diferentes elementos DOM para inspecionar.

O segundo botão ativa o modo de Pré-visualização de Dispositivo. Nesse modo, você pode ver como sua página da web se parece em diferentes resoluções e tamanhos de tela.

Se você clicar nesse botão, verá sua página da web mudar para uma nova visualização.

Você pode então usar o menu suspenso acima da pré-visualização da página ou as alças nas laterais da pré-visualização da página para redimensionar a janela de pré-visualização do dispositivo.

Visualização HTML

A maior parte da aba DevTools é ocupada pelo painel HTML.

Este painel é como um “Ver Fonte” superpoderoso. Ele é estruturado de acordo com o DOM, com elementos aninhados dentro de seus elementos pai.

Você verá que o elemento que você “inspecionou” no início está automaticamente destacado com um fundo cinza ou azul. Aqui, inspecionei uma imagem que está contida em um link. Como esperado, vejo uma tag de âncora destacada.

Mas onde está minha imagem? Posso revelar quaisquer elementos DOM aninhados na tag de âncora clicando no triângulo de divulgação ao lado dela. 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 migalhas, e mostra todos os elementos pai 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 quaisquer regras CSS que se aplicam ao nosso elemento. Isso é chamado de painel de Estilos, e neste caso vemos todas as regras que se aplicam à tag de âncora que inspecionei anteriormente.

Você pode ativar ou desativar uma regra passando o mouse sobre ela e clicando na caixa de seleção ao lado.

Você verá essa mudança refletida na pré-visualização da página imediatamente. E se você clicar diretamente em uma regra, pode alterar seu nome e valor.

Você também pode procurar regras específicas usando a caixa de pesquisa de Filtro.

O painel de Estilos é capaz de muito mais do que isso, no entanto. Confira a documentação do Google para uma explicação completa das muitas funções do painel de Estilos.

Modelo de Caixa e Estilo Computado

Ao lado da visualização de estilo está o modelo de caixa para meu elemento selecionado. Se você não está familiarizado, o modelo de caixa é uma representação abstrata da margem, borda, preenchimento e tamanho do conteúdo aplicados 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, então essas caixas estão em branco.

Se você escolher um elemento com algumas regras de posição, margem, borda ou preenchimento, seu modelo de caixa pode parecer mais assim.

Você também pode ver um modelo de caixa in situ se passar o mouse sobre 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 é ligeiramente diferente do painel de Estilos. Ele não exibe as linhas reais de CSS – apenas os efeitos dessas regras. Isso é chamado de “estilo computado” do objeto, e é o resultado combinado do seu CSS.

Finalmente, você pode procurar regras específicas digitando na caixa de Filtro.

Conclusão

Se você trabalha com páginas da web com frequência, a ferramenta Inspecionar do Chrome vale a pena explorar. E as outras abas no DevTools, como Console e Rede, podem ser inestimáveis para desenvolvedores. Há mais do que podemos cobrir agora, mas a documentação do Google é completa e útil.