Primeiras aulas do curso Chrome DevTools: analise, inspecione e depure suas páginas Web

Chrome DevTools: analise, inspecione e depure suas páginas Web

Introdução: Editando seu site em tempo real - Apresentando o Dev Tools

No curso DevTools: analise, inspecione e depure suas páginas Web abordaremos as funcionalidades da ferramenta do Chrome, a Dev Tools.

A proposta do curso é utilizar a Dev Tools para buscar erros em uma aplicação e corrigí-los. Utilizaremos para praticar o seguinte projeto:

O método tradicional para resolver problemas de uma aplicação consistiria em trabalhar diretamente no código fonte, entretanto, tal prática demanda muito tempo e esforço. A Dev Tools indica de maneira simples e clara o que está acontecendo no navegador dando dicas de como resolver as falhas. A maneira mais simples de abrir o Dev Tools é clicar com o botão direito do mouse e selecionar a opção "Inspect" ou fazer uso de algum dos atalhos abaixo:

Qualquer uma dessas formas leva a abertura da seguinte janela:

Existem nove abas no Dev Tools que distribuem-se entre layout e conteúdo até performance e conectividade. Ou seja, diversas informações que nos auxiliam a compreender o que acontece no navegador quando o usuário está utilizando a aplicação.

Introdução: Editando seu site em tempo real - DOM - Document Object Model

Para iniciar, vamos observar a aplicação e buscar os erros nela:

Além de analisar o layout da página, vamos reparar também na estrutura. O html é a estrutura básica de um projeto web e isto é apresentado, no Dev Tools, na aba Elements. O html contem head, header, body, input e buttons, ou seja, a estrutura completa de um html

Clicando no botão "Linhas" que aparece em nossa aplicação ele modifica-se para "Blocos" e e alteração acontece tanto na aparência quanto no código. Observe:

Teoricamente, o html é um arquivo de texto fixo, portanto, não poderia sofrer mudanças. O que visualizamos na tela e é alterado, não é o html original. O html é o arquivo de texto que o navegador lê e interpreta para o usuário, portanto, o que enxergamos no Dev Tools é o resultado dessa leitura. Então, é criada uma estrutura que representa o documento html no formato de objetos criados in memória chamada de DOM - Document Object Model.

Assim, uma mudança no DOM também acontece no usuário. Quando clicamos no botão "Linhas" e ele se transforma em "Blocos", alguma coisa in memória se altera no DOM. Nesse caso estamos alterando o DOM através do comportamento já definido de um botão.

E se alterarmos no próprio elemento? Por exemplo, mudar o Linhas para Blocos no código:

<button id="mudaLayout" class="opcoesDaPagina-opcao 
opcoesDaPagina-botao">Blocos</button>

Teremos uma mudança no botão! O DOM é uma representação visual e editável e qualquer mudança que nós fizermos será verificada pelo usuário. Entretanto, quando damos um "Reload" na página, todas as mudanças realizadas desaparecem! Isso acontece pois o navegador retorna no html, realiza uma releitura e usa isso para construir o DOM novamente. Então, o DOM é recriado do zero, dessa maneira, cada vez que a página é carregada todas as mudanças que realizarmos são perdidas a cada novo acesso da página.

A vantagem de utilizar o Dev Tools é experimentarmos a vontade! Isto é, realizar diversos testes verificando aquilo que funciona mais ou menos em uma determinada aplicação. A desvantagem é que se arrumamos a aplicação no Dev Tools perdemos tudo quando pressionamos o "F5". Para realmente mudar o html é preciso fazer alterações diretamente no arquivo.

Os Bugs da Aplicação

Nesta etapa vamos encontrar, analisar e entender os erro da aplicação.

No Dev Tools podemos verificar os elementos que compõem a página: header, head, body, buttons, etc. Vamos reparar com maior atenção nos botões:

<div class="OpcoesDaPagina">
    <input type="search" placeholder="busca" 
id="busca" class="opcoesDaPagina-opcao">
    <button id="mudaLayout" class="opcoesDaPagina-opcao 
OpcoesDaPagina-botao">Linhas</button>
    <button id="pegaInfo"
 class="opcoesDaPagina-opcao">?</button>
    <button id="sync" class="opcoesDaPagina-opcao 
opcoesDaPagina-botao botaoSync">_</button>
</div>

Um elemento comum entre os botões é a classe opcoesDaPagina-opcao que alinha elementos. A classe opcoesDaPagina-botao não está presente no botão de interrogação. Aparentemente, esta classe falta para o item "?", portanto, vamos acrescentá-la. O "?" fica com a seguinte aparência:

<button id="mudaLayout" class="opcoesDaPagina-opcao 
opcoesDaPagina-botao">?</button>

Com isso, o layout do botão "?" ficará igual aos demais botões:

Nesse caso acrescentamos uma classe manualmente, o que demanda certo trabalho. Portanto, vamos utilizar uma ferramenta que nos auxilie nesta tarefa, a cls. Primeiro selecionamos, no código, o elemento que desejamos alterar e clicamos no ícone .cls. O item, que significa class, mostrará todas as classes que existem referentes ao elemento em questão:

No Campo localizado ao lado do ícone do .cls nós podemos inserir novas classes, basta preencher com o nome desejado e dar um "Enter". Assim, a classe é inclusa na lista de classes do elemento e também modifica sua representação visual! O interessante da ferramenta é que classes são adicionadas ou retiradas conforme o check estiver selecionado ou não:

Lembrando: As tags que aparecem no Dev Tools não são realmente tags, mas sim elementos que representam na memória o DOM. Cada elemento desses possui algumas características em comum. Quando um elemento é adicionado ao DOM ele também é a somatória de diversos comportamentos que se acumulam. Para descobrir quais são os tipo desses elementos utilizamos a aba Properties.

Vamos clicar no item input e observar o que aparece no Properties:

O DOM é composto de outras aspectos que não só elementos do HTML, por exemplo, na imagem acima estão descritas todas as propriedades que o input possui. Podemos ler essas propriedades de maneira escalonada, isto é: todo HTMLInputElement é um HTMLElement, todo HTMLElement é um Element, todo Element é um Node, todo Node é um EventTarget e todo EventTargetpossui a função addEventListener:

Ou seja, sempre que criamos um input podemos utilizar o addEventListener. Não esquecendo que todo EventTarget é também um Object.

A properties permite saber quais são as propridades de um elemento, mas também de onde elas surgiram.

Introdução: Editando seu site em tempo real - Utilizando o Elements

Na última aula verificamos que é possível editar todo o conteúdo do html usando o Dev Tools. Mas, a aplicação possui falhas tanto no âmbito do conteúdo quanto no Layout. Quando falamos sobre aparência, estamos tratando sobre css e existe uma aba específica para avaliar isso, a Style:

Clicando em qualquer elemento podemos verificar na aba Styles todos os estilos aplicados ao elemento. Vamos fazer um teste! Modificar a cor do cabeçalho de azul para verde. Selecionamos o elemento que corresponde ao cabeçalho e na aba Styles podemos inserir background-color e automaticamente são sugeridas diversas cores que podem ser utilizadas. Vamos adicionar o seguinte código:

background-color: green

A aba ficará com a seguinte aparência!

Repare que para fazer a alteração das cores nós utilizamos a palavra green, normalmente, em outro ambiente iríamos inserir um código. Vamos clicar uma vez no quadradinho colorido, segurar o "Shift" e clicar novamente no quadrado e assim o Dev Tools passa outro formato de cores. Repetindo o processo podemos visualizar os distintos formatos de códigos que sinalizam o verde, rgba, hsl...

Ou seja, não é preciso utilizar nenhum conversor externo, pois o próprio Dev Tools já faz isso para nós! É interessante também poder enxergar as cores modificadas no próprio layout. Além disso, com um simples clique em cima do quadrado colorido temos acesso a seguinte tabela de cores!

O Dev Tools permite brincar e experimentar com a aparência! Nós acabamos de modificar a cor do fundo, mas podemos acrescentar também uma margem extra, escrevendo, por exemplo: margin-top: 3px;

Ainda, podemos selecionar o que desejamos que seja alterado e aquilo que queremos que mantenha-se normal!

Agora, vamos arrumar aquilo que segue com falhas, por exemplo, a distribuição dos botões que ainda estão muito juntos. Note que quando passamos o mouse pelos elementos do site aparecem as dimensões nas quais esses elementos estão envoltos. Por exemplo, se selecionamos o form no Dev Tools podemos reparar que são exibidas três cores distintas:

O quadrado azul representa o tamanho do conteúdo, o verde o padding, isto é, o respiro interno e a barra laranja significa a margem. Observando as dimensões descobrimos que o formulário não possui margem acima e nem nas laterais, apenas em baixo. Obtivemos informações valiosas sobre o elemento, entretanto, qual a quantidade de margem que ele possui? O navegador calcula isso para nós e armazena estas informações na aba Computed:

Esta aba contem as dimensões em pixels de qualquer item e assim como descobrimos as medidas do formulário também podemos encontrar as de qualquer botão. Basta selecionar o item "Linha" e temos o seguinte:

A margem do botão equivale a 16 pixels!

Como o botão parece estar muito encostado aos demais itens vamos clicar no retângulo verde e modificar sua medida para 30. Mesmo fazendo essa alteração parece que o botão não se altera, como se nem mesmo tivesse um padding ou como se o desenvolvedor tivesse esquecido ou errado o código referente ao espaço.

Quando o navegador não entende alguma lógica CSS ele tende a ignorar o que é feito. Vamos verificar se o navegador ignora algo no botão? Observamos a aba Styles, pois ela nos informa tudo que é feito no navegador. Nessa aba estão descritos todos os estilos e CSS que foram lidos e aplicados, vamos observar o que ela nos mostra:

Observando o Styles notamos que abaixo do padding-left está o display: inline-block e o display: none. Observe que este último está riscado, isso acontece pois o CSS de cima está reescrevendo o de baixo e, portanto, apagando o seu comportamento. O display: inline-block é uma media query o que significa que o estilo do elemento é definido conforme alguma dimensão ou critério específico. Nesse caso, o critério é min-width: 610px, ou seja, largura mínima de 610px. Assim, sempre que a largura da página for maior que a largura estipulada, o botão terá display: inline-block. Deixando de aplicar essa largura é provável que o display: none passe a ser acionado.

Para testar podemos deixar a tela com medida de 610px e veremos que o display: inline-block que antes aparecia cede lugar para o display: none que passa a ser efetivamente utilizado e ao mudarmos as dimensões da tela o botão inclusive desaparece!

O interessante é que o Dev tools mostra quais estilos o navegador leu e quais ele ignorou. Se continuamos a analisar os Styles podemos verificar que existem outros itens riscados, por exemplo:

Passando o mouse por cima desse ícone temos a informação de que é um Invalid property value o que significa, em outras palavras, erro! Ou seja, quando adicionamos esse elemento acabamos cometendo um equívoco, observando melhor o que está escrito percebemos que inserimos um padding sem numeração. Assim, basta observar o Styles para perceber se existem erros no código.

Para corrigir o padding podemos clicar duas vezes em cima dele e inserir um valor, por exemplo, .5em. Ao fazer isso temos, automaticamente, o botão ajustado e melhor alinhado:

Mesmo fazendo esta alteração o botão "Linhas" segue torto. Isso acontece pela modificação anterior no seu padding, então, basta retornar e desabilitar a alteração que fizemos. Vamos voltar e observar o header:

Note que o cabeçalho está com dois itens desabilitados e que existem, ainda, outros erros. Por exemplo, a medida do padding-top está com a unidade errada,.5em e não .5eme como estava escrito. O padding-bottom está com o mesmo erro, então, padding-bottom: .5em. Ajeitamos também a maneira como o display está escrito, display: flex. Quando estamos mexendo no Styles podemos alterar quantas informações desejarmos, estilos, cores, etc.

Já sabemos que fazendo um reload na página temos todas estas modificações perdidas. E se quisermos guardar as alterações? Como saber em qual dos vários arquivos .css aquele que deve ser arrumado? O Dev Tools também nos ajuda nessa tarefa! Vamos observar o cabeçalho:

Em cima ele mostra o seletor css e ao lado o arquivo de onde ele foi importado. Assim, para arrumar o projeto devemos buscar o arquivo chamado cabecalho.css. O número do lado do arquivo indica em que linha encontra-se o seletor, no caso, a número 1.

Basta acessar o projeto para conferir isso. No arquivo cabecalho.css encontramos na primeira linha o .cabecalho:

Fazendo as correções necessárias o código ficará da seguinte maneira:


.cabecalho {
    font-size: 1rem;
    padding-top: .5em;
    padding-bottom: .5em;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-itens: center;
    align-content: center;
}

Retornando no navegador descobrimos onde está o problema do botão, no arquivo opcoesDaPagina.css, na linha 18. Arrumando esta falha temos o código da seguinte maneira:

.opcoesDaPagina-botao {
    padding:.5em;
    max-width: 4.5em;
    border: none;
    background: rgba(0,0,0,.25);
    color:white;

}

Ao recarregarmos a página verificamos, com sucesso, que as mudanças estarão todas salvas!

Vimos que a aba Computed serve para verificar as dimensões e as propriedades cabíveis no elemento selecionado. Mas, de todas as propriedades mostradas, nós não alteramos todas! O Dev Tools demarca em negrito as utilizadas e as em cores mais suaves as que não são utilizadas. Para visualizar todas as propriedades basta retirar o check do Show all que serão mostrados todos os valores:

Nessa aula vimos que podemos utilizar a aba Elements para realizar modificações em tempo real e podemos ver elas acontecendo na mesma hora. Além disso, podemos aproveitar o que fazemos no navegador para alterar, posteriormente no projeto.

Sobre o curso Chrome DevTools: analise, inspecione e depure suas páginas Web

O curso Chrome DevTools: analise, inspecione e depure suas páginas Web possui 222 minutos de vídeos, em um total de 58 atividades. Gostou? Conheça nossos outros cursos de HTML e CSS em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda HTML e CSS acessando integralmente esse e outros cursos, comece hoje!

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1120 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana