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."
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!
.png){kind=small}
.png){kind=small}
