Como usar o Google Chrome para depurar CSS

A ferramenta Inspect Element é ótima quando se trata de depurar suas páginas da web em tempo real. Você pode usar essa ferramenta para ajudar a visualizar e alterar o design de um site. Ele também permite que você faça isso sem precisar recarregar a página, exibindo suas alterações de CSS imediatamente.

Este artigo mostrará como visualizar classes CSS e seus estilos aplicados na janela Inspecionar Elemento. Ele também abordará como você pode usar isso para visualizar as alterações feitas no seu CSS em tempo real.

Abrindo o Inspect Element no Google Chrome

Você pode visitar qualquer site e abrir a janela Inspecionar elemento para ver como é o código HTML ou CSS. Este tutorial usará um site de exemplo para demonstrar.

Você pode abrir a janela Inspecionar Elemento no Google Chrome pressionando o botão F12 chave. Você também pode clicar com o botão direito do mouse em qualquer lugar da página e clicar em Inspecionar.

A janela Inspecionar Elemento será aberta no código HTML da parte do site em que você clicou com o botão direito. É aqui que você também pode

editar o texto do site usando o Google Chrome.

A guia Estilos na janela Inspecionar elemento

Na própria janela Inspecionar Elemento, sob o Elementos guia, há um local para visualizar o código HTML e CSS. Você pode ver o código HTML à esquerda da janela Inspecionar elemento. Você pode encontrar o código CSS à direita, sob o Estilos aba.

Digamos que você tenha um elemento HTML com uma classe chamada "card-padding", com preenchimento direito e esquerdo aplicado a ele:

.card-preenchimento {
 padding-right: 0vh;
 padding-esquerdo: 0vh;
}

Se você visualizou este site no navegador, poderá selecionar o div elemento com a classe "card-padding". Qualquer estilo aplicado à classe "card-padding" seria exibido à direita, sob o Estilos aba.

Quando você passa o mouse sobre um elemento na visualização de código HTML, essa parte da página da Web será realçada no navegador da Web. O tipo de elemento HTML, juntamente com quaisquer nomes de classe, também serão exibidos em uma caixa de diálogo próxima ao elemento.

Nesse caso, você verá o contêiner div com os nomes das classes "row", "card-padding" e "pb-5" destacados na página.

Como fazer alterações no CSS em tempo real

Você pode alterar o CSS diretamente na guia Estilos:

1. Usando esse site, clique com o botão direito do mouse no primeiro título.
2. Nesse cabeçalho h4 específico, você verá uma classe aplicada a ele chamada "text-grey" com a cor #8a8a8a.
3. Altere a cor para outra coisa, como laranja. Você só quer alterar o valor em si, e não o nome da propriedade, "color".
4. Você verá o título mudar de cinza escuro para laranja.
5. Se você quiser desabilitar um estilo CSS específico, desmarque a caixa à esquerda do estilo.
6. Você também pode adicionar mais estilos ao conjunto original. Clique logo abaixo ou à direita de uma propriedade para começar a adicionar uma nova. Você deve usar a mesma sintaxe que usaria em um arquivo CSS normal ao adicionar novos estilos.
7. Se você estiver visualizando um site local, poderá continuar a fazer alterações de CSS até chegar mais perto da aparência necessária para sua interface do usuário. Depois disso, você pode copiar as alterações de CSS feitas de volta ao seu código local.

Como modificar CSS de bibliotecas ou estruturas de terceiros

Você também pode fazer alterações nos elementos HTML se estiver usando bibliotecas ou estruturas de terceiros, como o Bootstrap.

1. Usando esse site, clique com o botão direito do mouse em um dos botões do Bootstrap na página.
2. Você verá duas classes aplicadas ao botão, "btn" e "btn-primary". O Bootstrap já tem seu próprio estilo aplicado a essas duas classes. As cores que estão sendo usadas como cores de fundo e de borda são #007bff. Mude isso para outra coisa, como Violet.
3. Se você estiver visualizando um site local, poderá adicionar suas novas alterações de volta ao seu código local. Dependendo da ordem do seu CSS, pode ser necessário use um seletor CSS mais específico. Por exemplo, prefixe o seletor com ".btn". Isso substituirá o estilo original do Bootstrap.

   .btn.btn-primário {
    cor de fundo: violeta;
    cor da borda: violeta;
   }

O que element.style significa na guia Estilos?

Cada elemento HTML que você realça na janela Inspecionar elemento tem um bloco element.styles. Isso é o equivalente a adicionar estilo inline ao elemento HTML, em vez de direcioná-lo usando um seletor.

1. Clique com o botão direito do mouse em um elemento HTML. Adicione qualquer estilo à seção element.style, como:

   cor: fumaça branca;

2. Você verá que o código do elemento HTML também mudou. O código dentro do elemento HTML agora tem a nova linha:

   estilo="cor: fumaça branca;"

Como os elementos HTML filhos herdam o estilo

Se você tiver dois valores de estilo diferentes aplicados a um elemento pai e a um elemento filho, o valor no elemento filho terá precedência.

1. Usando esse site, clique com o botão direito do mouse em qualquer lugar nas bordas externas do site.
2. Na seção HTML da janela Inspecionar elemento, concentre-se em dois elementos HTML específicos. Há um elemento div pai com uma classe "content" aplicada a ele. Este elemento HTML tem um elemento filho h4, com uma classe "text-grey" aplicada a ele.
3. Selecione o elemento HTML h4 filho e desative o estilo de cor na classe "text-grey".
4. Selecione o elemento HTML pai com a classe "conteúdo". Adicione o seguinte estilo CSS à classe:

   cor vermelha;

   Todo o texto dentro do div pai ficará vermelho. Essa alteração também será aplicada em cascata aos elementos filho, o que significa que o h4 também terá uma cor vermelha.
5. Selecione o elemento HTML h4 filho e adicione um novo estilo à classe "text-grey":

   cor verde;

   Isso substituirá o estilo de qualquer classe pai. O elemento HTML h4 mudará de vermelho para verde.
6. Você também verá um tachado se visualizar o estilo da classe "conteúdo". Isso confirma que o elemento filho h4 está substituindo a cor do pai.

Os benefícios de depurar seu CSS no navegador

Depurar CSS em seu navegador pode economizar muito tempo e acelerar seu fluxo de trabalho de codificação. Isso é especialmente verdadeiro se você precisar ver como suas novas alterações de CSS afetam a interface do usuário em seu site em tempo real.

Você pode usar essa técnica em vez de fazer alterações em seu código local e recarregar seu aplicativo. Isso evitará que você adivinhe quais valores CSS funcionariam, pois agora você pode visualizar as alterações da interface do usuário à medida que as faz.

Você pode fazer alterações na janela Inspecionar elemento até chegar perto do design desejado. Depois de fazer isso, você pode copiar o código da janela Inspecionar elemento de volta para o código local. Você ainda pode executar novamente seu aplicativo para testar se suas novas alterações de CSS ainda funcionam.

Este tutorial abordou os conceitos básicos de como depurar o CSS de um site usando a janela Inspecionar elemento, incluindo onde encontrar o CSS na guia Estilos.

Ele também abordou como fazer alterações no CSS e visualizar as alterações visuais na interface do usuário em tempo real. Espero que você também entenda como fazer alterações quando o CSS usa uma biblioteca de terceiros e como funciona a herança de estilo.

Há muitas outras coisas interessantes que você pode fazer com a janela Inspecionar Elemento.

7 coisas divertidas que você pode fazer com o Inspect Element

Leia a seguir

Sobre o autor