Como desenvolvedores web, uma ferramenta com a qual temos muito contato é o nosso navegador, e ele geralmente nos oferece ótimas ferramentas para auxiliar no desenvolvimento.

Por isso hoje vamos nos aprofundar em como utilizar uma dessas funcionalidades para desenvolver o nosso front-end: a aba elements (ou elementos se o seu estiver em português).

OBSERVAÇÃO: neste artigo será utilizado o devtools do chrome, ou seja, ele pode ser utilizado de referência para qualquer navegador baseado em chromium (que vai ser o caso das imagens utilizadas no artigo, que serão tiradas do navegador brave). Então apenas fique atento se você utilizar o navegador firefox pois algumas coisas podem ser diferentes ali, e ao uso do edge que apesar da versão atual ser baseada em chromium, a microsoft fez algumas mudanças aqui e ali.

Introdução

Bom, se vamos falar das ferramentas de desenvolvedor o primeiro passo é abrir elas, geralmente os dois jeitos mais comuns são:

• Apertar a tecla f12 do teclado;
• Apertar o botão direito do mouse e selecionar a opção inspecionar;

Tendo aberto as opções de desenvolvedor você vai ver um novo elemento na interface semelhante a esse:

Uma opção é que ele abra na vertical ao invés da horizontal, e nesse caso ele vai se apresentar mais ou menos assim:

Para mudar a posição onde o devtools vai aparecer é só selecionar uma das 4 opções que aparecem no menu que aparece após clicar nos 3 pontinhos do canto superior direito:

Essas 4 opções da esquerda para a direita são:

• Abrir em uma janela separada;
• Abrir a esquerda;
• Abrir abaixo;
• Abrir a direita;

O que podemos fazer?

Com isso podemos começar a olhar as funcionalidades trazidas pela aba elementos do devtools.

HTML

A primeira dela é a que mostra o código da página, e ela não mostra o HTML que foi recebido pela requisição http, ele mostra o estado atual do HTML depois de ser modificado pelo JavaScript e sofrer outras transformações, ou seja, é a representação fiel do estado atual da página.

Ao passar o mouse por cima das tags podemos ver que o elemento referente a tag selecionada é selecionado na página também, assim como pode ser conferido na imagem abaixo:

Além de mostrar o elemento na tela, ela também nos permite ver as margens (em laranja) e os paddings (em verde), e as dimensões de largura e altura atuais do elemento (em azul e na tooltip).

Outra forma de selecionar um elemento pelo devtools é clicar no primeiro ícone no canto superior esquerdo (o que tiver um quadrado e uma setinha, ao lado do ícone de celular), e clicar no elemento que você quer inspecionar, isso irá seleciona-lo no devtools. Fora isso também é possível obter informações a mais do elemento ao se passar o mouse em cima dele com essa opção habilitada (ela se desabilita sozinha após selecionar o elemento):

Isso pode ser muito útil para identificar as fontes utilizadas em algum site, as cores utilizadas, saber os tamanhos utilizados (bem legal para você que quer estudar design e ver como sites famosos utilizam a escala tipográfica deles por exemplo), além das medidas de largura, altura, padding e margin.

Essas funcionalidades são muito úteis para se descobrir porque o site está com uma barra de rolagem por exemplo. Pois você pode verificar o tamanho da tela ao passar o mouse em cima do body, e depois ir passando o mouse por cima dos outros elementos até encontrar o elemento que estiver excedendo o tamanho da página e então pensar num jeito de consertar ele para que ele se ajuste e não crie a barra de rolagem.

E antes de partirmos para as funcionalidades relacionadas com a estilização vamos dar uma olhada nas opções que aparecem quando nós clicamos com o botão direito em um elemento selecionado do nosso HTML:

Esse menu nos dá diversas possibilidades, entre elas as principais são:

• Add Attribute: deixa você adicionar um atributo nessa tag
• Edit as HTML: deixa você alterar o HTML dessa tag, meio que como se você edita-se pelo seu editor de código;
• Duplicate element: serve para criar uma cópia desse elemento;
• Delete element: remove esse elemento da página, o que é bem útil para aquele nosso exemplo onde um elemento causa overflow na página, já que nos permite ir deletando as seções até encontrar a que causou a barra de rolagem;
• Copy: aqui nos oferece diversas formas para copiar esse elemento, seja o texto HTML mesmo, o seletor css dele, os estilos dele, ou copiar ele para usar na aba console e mexer com o JS da página;
• Capture node screenshoot: salva uma imagem desse elemento na página (legal para quando você quiser fazer um showcase daquele card bonito que você fez e mandar para os amigos);

Estilos

Agora que já exploramos as possibilidades relacionadas a inspecionar o HTML da página, vamos dar uma olhada nas capacidades relacionadas ao CSS dessa aba:

Vamos explorar a sub-aba Styles, a Computed que são as mais utilizadas.

A começar pela aba styles, nela podemos ver todos os estilos aplicados ao elemento por ordem de especificidade (assim é possível saber quando um estilo está sobrescrevendo o outro, uma vez que ele vai aparecer riscado). Fora isso é possível ver na lateral de cada seção qual a origem desse estilo, e no caso de arquivos dá para ver inclusive a linha onde esse estilo foi declarado.

Mas não é só isso que elas no oferece, ao passar o mouse por cima das propriedades do css, vai aparecer uma checkbox ao lado da propriedade, e você pode utilizar ela para desabilitar o estilo ou não.

Você também pode clicar em cima do valor ou da propriedade e modificar o que está escrito ali, isso pode ser útil para no caso da nossa imagem trocar rapidamente a cor do h1 ou mudar a propriedade de color para background por exemplo.

Ao se clicar no + você pode adicionar novos estilos ao estilo atual:

E ver as alterações que esses novos estilos causam em tempo real, além disso o auto-complete dessa aba para as propriedades do css funciona muito bem.

Se descermos até o final da barra de rolagem podemos notar que ele também nos mostra quais estilos ele herdou, além do box-model dele (outra forma de vermos a width, height, padding, margin e as bordas do elemento):

Outra coisa que é possível de se fazer é simular estados de um elemento, assim nós podemos ver os estilos sendo aplicados em um estado em específico como por exemplo em um hover:

Para isso é só selecionar o elemento em que você quer aplicar um estado, e ai clicar no botão :hov e selecionar o estado que você quer manter ativado.

Seguindo para a aba computed, aqui nós vemos os estilos que realmente estão sendo aplicados no elemento, afinal você pode definir vários como o de hover e o normal, ai está aba mostra o que está sendo computado atualmente:

Além disso é possível ver detalhes de como aquele estilo foi calculado (mostrado no estilo da imagem que foi selecionado), e ao passar o mouse em cima dos estilos ele faz aparecer uma setinha perto ao valor computado, e se você clicar nela, ele te redireciona para onde esse estilo foi definido.

Conclusão

Eai já conhecia o potencial dessa ferramenta incrível disponível em quase todos os navegadores? Já conhecia outro conteúdo sobre o devtools? Compartilha com a gente aqui nos comentários.