Google Developer Tools para Iniciantes

Considerações iniciais 

Por diversas vezes eu estive em projetos onde desenvolvedores mais juniores conheciam pouco ou nada sobre como usar o Google Developer Tools, uma ferramenta importante em que todo dev precisa saber pelo menos o básico. 

Neste artigo, eu tento ensinar alguns comandos básicos, porém imprescindíveis para um bom desenvolvimento. 

Tenha em mente que as informações técnicas passadas neste artigo são o básico do que acredito ser importante para o dev iniciante, obviamente há inúmeras formas diferentes de aproveitar o Google Developer Tools, então eu fortemente recomendo que vá fundo na toca do coelho. 

Aprender sobre Google Developer Tools não só facilitará seu trabalho como irá deixá-lo mais ágil em resolver problemas no código. 

Observações 

• Google Developer Tool será dividida em séries de artigos, pois a quantidade de informações importantes que pretendo passar tornaria o artigo muito grande e cansativo. ‘:)
• Neste artigo focaremos na aba Elements onde escreverei pontos importantes de HTML e CSS. 
• O meu sistema operacional será o Windows 11 e o navegador Brave para os exemplos e indicações. O browser Chrome é bastante semelhante mas tenha em conta que outros sistemas operacionais e navegadores poderão não ter os mesmos atalhos e o setup que usarei, podendo assim alterar a sua experiência. 
• Abordaremos temas básicos de Front End no Google Developer Tools, o suficiente para sentir-se confortável nos seus primeiros passos em Desenvolvimento Web. 

Espero que gostem! ;)

O que é Google Developer Tools? 

"O Chrome DevTools é um conjunto de ferramentas de desenvolvedor da Web criadas diretamente no navegador Google Chrome. O DevTools pode ajudá-lo a editar páginas dinamicamente e diagnosticar problemas rapidamente, o que, em última análise, ajuda você a criar sites melhores e mais rapidamente." 

Google Dev Tools - Overview

1 - Abrindo o Google Developer Tools

1.1 - Botão direito do mouse

Clique com o botão direito do mouse sobre qualquer área do ecrã e selecione "Inspecionar".

1.2 - Ctrl+Shift+I

Pressione "Ctrl + Shift + I" para abrir a ferramenta.

1.3 - F12

Pressione a tecla "F12" para abrir a ferramenta.

Nota: Dependendo do dispositivo ou configurações do mesmo, poderá ser necessário clicar em conjunto com a tecla “Fn”

2 - Posição da ferramenta

O Google Developer Tools pode ser aberto em posições diferentes do seu browser ou aberto separadamente.

Para alterar a sua posição no navegador, basta selecionar os 3 pontinhos verticais no canto superior direito e escolher a posição desejada na lista de ícones "Dock side".

Aqui você haverá quatro opções:

• "Undock into separate window" - Ótima escolha para separar a ferramenta do browser e posicioná-la noutro monitor
• "Dock to left" - Ferramenta acoplada no browser posicionada do lado esquerdo.
• "Dock to bottom" - Ferramenta acoplada no browser posicionada na parte inferior.
• "Dock to right" - Ferramenta acoplada no browser posicionada do lado direito.

3 - Aba "Elements"

Nosso ponto de partida será na aba "Elements", pois ela é a sessão que representa o HTML carregado na página.

3.1 - Como selecionar elementos

3.1.1 - Selecionar um elemento pela tag

A medida que o mouse percorre sobre o DOM (Document Object Model) do HTML carregado, os elementos são destacados na página do Site/Aplicação, um a um. Isso ajuda-nos muito a identificar o elemento.

Na imagem abaixo, o mouse está sobre a "div" com id "Intro". Perceba que a div destaca-se na página.

3.1.2 - Selecionar elemento por click

Clique no ícone do ponteiro, conforme mostrado na imagem abaixo, em seguida passe o mouse sobre os elementos da página.

Perceba que conforme o mouse percorre o elemento, o mesmo é destacado e a tag HTML correspondente é exibida na aba "Elements".

Clique sobre o elemento e o HTML correspondente será selecionado.

3.2 - Editar o HTML

É possível editar todo o HTML que foi carregado de maneira simples. Você pode modificar os atributos ou textos.

3.2.1 - Duplo click

Duplo click sobre o texto do HTML ou sobre qualquer atributo (classe, id, style, etc) para habilitar o cursor de edição.

3.2.2 - Botão direito

Clique com o botão direito do mouse sobre a tag, atributo ou texto para abrir uma lista de ações disponíveis.

3.3 - Remover tag/elemento

Botão direito do mouse sobre a tag que deseja remover e selecione "Delete Element" ou simplesmente pressione a tecla "Delete" após ter selecionado o elemento de deseja deletar.

Note: As alterações feitas não são aplicadas no arquivo HTML que recebeu do servidor, mas no DOM (Document Object Model) e são guardadas na memória local. Recarregar a página irá remover as modificações e alterar para o estado original. Pressione Ctrl+U para abrir o código fonte e poderá constatar que não houve nenhuma modificação no HTML.

4 - Subdivisões da aba "Elements"

Ao selecionar um elemento HTML, observe que dentro da aba "Elements" há uma subdivisão com outras abas (Style, Computed, Layout, etc).

4.1 - Aba "Style"

A aba "Style" mostra todo o CSS dos seletores (id, classe, tag, etc) e as propriedades (position, width, height, etc) que está a ser aplicado no elemento que foi selecionado no HTML.

Aqui há uma vasta possibilidade de ações que podem ser feitas, tais como criar novas classes, editar parâmetros e seus valores, editar efeitos como hover, active, etc.

4.1.1 - Modificando o elemento

No exemplo abaixo o "font-size" do título é modificado.

Para modificar o valor da propriedade "font-size", clique sobre o valor da mesma. Após isso, você pode escrever um valor literal ou usar as setas "up" e "down" para aumentar ou diminuir o valor.

Dica: Pressionando as setas enquanto segura a tecla "Shift" o valor é alterado de 10 em 10, segurando "Ctrl" o valor é alterado de 100 em 100.

Desabilite parâmetros com "uncheck"

Adicione novos parâmetros clicando dentro da área do seletor para o cursor aparecer na linha abaixo.

Ao iniciar o digitar, a ferramenta abrirá uma lista de opções. Aproveite :)

Clique sobre a cor e abra o editor de cores e transparência. Essa é uma maneira rápida para testar e modificar as cores do elemento.

4.1.2 - element.style

Ao adicionar parâmetros na "element.style", o estilo será inserido "inline" na tag HTML. Evite inserir estilos "inline", prefira sempre usar classes, id, etc.

4.1.3 - Como adicionar uma classe

Para esse exemplo eu criarei um novo elemento HTML e sua classe.

Clique com o botão direito do mouse e selecione "Edit as HTML".

Aqui eu adicionei uma Tag "p" com um texto.

Vamos criar uma classe para o parágrafo e estilizá-lo. Clique em ".cls" que está no canto superior direito da aba "Style" e depois atribua o nome da classe, pressione "Enter" (Sugiro seguir a convenção de nomes "BEM").

Observe que a classe foi criada e adicionada como atributo na Tag "p".

Agora já é possível estilizar o elemento utilizando a classe que criou.

4.1.4 - Estados do elemento

Alguns elementos HTML tem alguns estados específicos que respondem a certas ações, tais como hover, active, focus, target, etc.

Vamos atribuir o estado "hover" para nosso parágrafo que acabamos de criar, de modo que sua cor seja alterada ao passar o mouse sobre ele, por isso selecione-o no HTML.

Clique em "New Style Rule" no canto superior direito da aba "Style" e selecione a opção "inspector-stylesheet".

Será adicionado mais uma linha com a classe que criou (no meu caso "p.info-general"). Duplo clique sobre a classe para habilitar o cursor, então adicione no final da classe ":hover". Repare que após adicionar ":hover" na classe, a mesma assume uma cor cinza, pois está desabilitada.

Clique em ":hov" e em seguida marque a opção ":hover". Pronto, agora já está habilitado. Veja que a classe sem o estado ":hover" está com sua propriedade tachada.

Repare que surgiu uma marcação na Tag indicando que esse elemento tem estados.

Resultado final:

Lembre-se: As alterações feitas no CSS e HTML são salvas na memória local, portanto salve suas modificações no projeto antes de recarregar a página!

4.2 Aba "Computed"

A aba "Computed" mostra a estrutura do box model (margin, border, padding e element size) e a lista de propriedades, por ordem alfabética, que são aplicadas ao elemento.

Analisando o parágrafo criado ("p"), podemos filtrar por uma propriedade específica e assim verificar todos os estilos aplicados no elemento e listados por ordem de precedência.

A lista informará o valor da propriedade, o seletor usado e um link para código fonte, cujo este falaremos noutro artigo. :)

5 - Conclusão e agradecimentos

Espero que este pedacinho de conhecimento aqui exposto ajude-o em sua carreira. Lembre-se que esse é o primeiro passo, então mantenha-se em movimento e continue aprendendo! :)

Agradeço a Hi Interactive por disponibilizar-me este espaço para ajudar os devs. Se você chegou até aqui, PARABÉNS!!! Agradeço o seu tempo disponibilizado para a leitura.

Espero ter ajudado! ;)

Até a próxima!