Usando a ferramenta “Inspecionar” do Google Chrome para diagnóstico de sites

Folosind instrumentul „Inspectare” Google Chrome pentru diagnosticarea site-urilor web
⏱️ 4 min read

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.

1602274925 692 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

Existem dois botões úteis próximos a essas guias. A primeira é a ferramenta Inspecionar Elemento.

1602274925 735 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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

google-chome-inspect-element-tool-example

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.

1602274926 460 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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

1602274926 282 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274927 207 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274927 373 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274927 536 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

Você também notará uma pequena barra de menu na parte inferior do painel HTML.

1602274927 799 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274928 701 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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

1602274928 127 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274928 723 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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

1602274928 15 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274929 1 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274929 541 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274929 150 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

1602274929 14 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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

1602274930 622 Folosind instrumentul „Inspectare Google Chrome pentru diagnosticarea site urilor web

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.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Você pode gostar...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x