Como usar o Google Chrome para depurar CSS
Seu navegador inclui um poderoso conjunto de ferramentas de desenvolvimento e design web. Descubra como alterar o estilo de qualquer página da web que você está visualizando.
A ferramenta Inspect Element é ótima quando se trata de depurar suas páginas da web em tempo real. Você pode usar esta ferramenta para ajudar a visualizar e alterar o design de um site. Também permite que você faça isso sem precisar recarregar a página, exibindo suas alterações de CSS imediatamente.
Este artigo explicará como visualizar classes CSS e seus estilos aplicados na janela Inspecionar elemento. Também abordará como você pode usar isso para visualizar as alterações feitas em seu CSS em tempo real.
Abrindo o elemento de inspeção no Google Chrome
Você pode visitar qualquer site e abrir a janela Inspecionar elemento para ver a aparência do 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 a tecla F12 . Você também pode clicar com o botão direito em qualquer lugar da página e clicar em Inspecionar.
A janela Inspecionar elemento será aberta no código HTML da parte do site onde 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, na guia Elementos , 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, na guia Estilos.
Digamos que você tenha um elemento HTML com uma classe chamada "card-padding", com preenchimento direito e esquerdo aplicado a ele:
.card-padding {
padding-right: 0vh;
padding-left: 0vh;
}
Se você visualizou este site no navegador, poderá selecionar o elemento div com a classe "card-padding". Qualquer estilo aplicado à classe "card-padding" seria exibido à direita, na guia Estilos .
Quando você passa o mouse sobre um elemento na visualização do código HTML, essa parte da página da web será destacada no navegador. 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.
Neste 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:
- Usando este site, clique com o botão direito no primeiro título.
Nesse título h4 específico, você verá uma classe aplicada a ele chamada "text-grey" com a cor #8a8a8a.
Mude a cor para outra coisa, como laranja. Você deseja alterar apenas o valor em si, e não o nome da propriedade, "cor".
Você verá o rumo mudar de cinza escuro para laranja.
Se você deseja desabilitar um estilo CSS específico, desmarque a caixa à esquerda do estilo.
-
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.
- Se você estiver visualizando um site local, poderá continuar a fazer alterações no CSS até chegar mais perto da aparência necessária para sua IU. Depois disso, você pode copiar as alterações CSS feitas de volta para o 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 Bootstrap.
Usando este site, clique com o botão direito em um dos botões Bootstrap da página.
Você verá duas classes aplicadas ao botão, "btn" e "btn-primary". Bootstrap já tem seu próprio estilo aplicado a ambas as classes. As cores que estão sendo usadas como fundo e borda são #007bff. Mude isso para outra coisa, como Violet.
Se você estiver visualizando um site local, poderá adicionar as novas alterações novamente ao código local. Dependendo da ordem do seu CSS, pode ser necessário usar um seletor de CSS mais específico. Por exemplo, prefixe o seletor com ".btn". Isso substituirá o estilo original do Bootstrap.
.btn.btn-primary { background-color: violet; border-color: violet; }
O que element.style significa na guia Estilos?
Cada elemento HTML destacado na janela Inspecionar elemento possui um bloco element.styles. Isso equivale a adicionar um estilo embutido ao elemento HTML, em vez de direcioná-lo usando um seletor.
Clique com o botão direito em um elemento HTML. Adicione qualquer estilo à seção element.style, como:
color: whitesmoke;
Você verá que o código do elemento HTML também mudou. O código dentro do elemento HTML agora possui a nova linha:
style="color: whitesmoke;"
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.
- Usando este site, clique com o botão direito em qualquer lugar nas bordas externas do site.
Na seção HTML da janela Inspecionar elemento, concentre-se em dois elementos HTML específicos. Existe um elemento div pai com uma classe "content" aplicada a ele. Este elemento HTML possui um elemento filho h4, com uma classe "text-grey" aplicada a ele.
Selecione o elemento HTML filho h4 e desative o estilo de cor na classe "text-grey".
Selecione o elemento HTML pai com a classe "content". Adicione o seguinte estilo CSS à classe:
color: red;
Selecione o elemento HTML filho h4 e adicione um novo estilo à classe "text-grey":
color: green;
Você também verá um tachado se visualizar o estilo da classe "content". Isso confirma que o elemento filho h4 está substituindo a cor do pai.
Os benefícios de depurar seu CSS no navegador
A depuração de 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 as novas alterações de CSS afetam a interface do usuário do seu site em tempo real.
Você pode usar essa técnica em vez de fazer alterações no código local e recarregar o aplicativo. Isso evitará que você adivinhe quais valores CSS funcionariam, já que agora você pode visualizar as alterações na IU à 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 ao seu código local. Você ainda pode executar novamente seu aplicativo para testar se as novas alterações de CSS ainda funcionam.
Outras ferramentas úteis para inspecionar elementos
Este tutorial abordou os princípios básicos de como depurar o CSS de um site usando a janela Inspecionar elemento, incluindo onde encontrar o CSS na guia Estilos.
Também abordou como fazer alterações no CSS e visualizar as alterações visuais na IU em tempo real. Esperamos 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.