Executando verificação de segurança...
5

Como usar o "console.log()" do CSS

Oi gente, como vão? Espero que bem!

Meu nome é Gabriel Kyomen e essa é minha primeira postagem aqui. Se você gostar do conteúdo, peço que leia o último tópico com atenção! Agora vamos ao conteúdo real

Bugs. Bugs por toda a parte

Se você já colocou a mão na massa alguma vez para desenvolver, com certeza já se deparou com um bug. Um comportamento diferente daquilo que esperamos, e que raramente sabemos a causa.

Pequena curiosidade rápida

Não se sabe ao certo a origem do termo "bug" - inseto em inglês -, porém acredita-se que seja por um relato de Grace Hopper, programadora da Marinha dos EUA, que escreveu em seu diário de bordo que um inseto preso nos contatos do computador Mark II estava causando problemas no seu funcionamento, e aí a expressão "Encontrei um bug!"
Bug no diário de bordo de Grace Hopper

A arte do debugging

Bom, acontece que desenvolvedores passam a maior parte de seus dias fazendo manutenção de código, o que inclui encontrar e corrigir bugs, etapa que chamamos de debug.

Com o avanço das ferramentas que usamos para trabalhar, como o VSCode, por exemplo, foram desenvolvidas várias aplicações com esse objetivo, os famosos debuggers

Porém, se tem uma coisa que nós desenvolvedores somos bons, é em achar um jeito "preguiçoso" de fazer algo, e com debugging isso não seria diferente. Seja em JS, Java, C ou qualquer outra linguagem, existe um método capaz de imprimir algo na tela, incluindo opcionalmente o valor de alguma variável.

Falando em JS, que atualmente é com o que eu trabalho, isso abre margem para aqueles famosos console.log("chegou até aqui") hehe. Claro que não é o ideal, mas vai poupar alguns minutos de configuração do ambiente para identificar aquele erro bobo no qual você escreveu um witdh no lugar de width (não finja que nunca fez isso).

Mas como fazer isso em CSS?

Infelizmente, esses métodos só estão disponíveis em linguagens de programação, e quando se trata de desenvolvimento web, duas das três principais não se encaixam nesse conceito, já que o HTML é uma linguagem de marcação, e o CSS é uma linguagem de estilização.

Claro, o HTML é quase imune a problemas, já que apenas diz a estrutura das coisas, e praticamente todo seu comportamento pode ser alterado pelo CSS, e é justamente esse CSS que acaba sendo a "pedra no sapato" de muitos desenvolvedores web, sejam iniciantes ou experientes.

Somando a "falta de paciência" com a dificuldade de identificar um elemento com problemas, muitos apelam para as bordas, tentando decobrir quem está causando aquele espaço gigante na página, ou então quem está ultrapassando os limites do elemento pai, com um código como esse:

* {
    border: 1px solid red;
}

Em diversas situações, isso vai ser suficiente, porém existe um problema: As bordas ocupam espaço, empurrando elementos, o que pode piorar a visualização e dificultar a identificação do bug. É aí que entram duas técnicas parecidas, mas sem esse problema:

Técnica 1: outlines - as bordas sem tamanho

Essa técnica consiste em mudar ligeiramente a propriedade usada para um outline, que tem a mesma visualização da borda, mas sem ocupar espaço, mantendo tudo no lugar original. Alterando o código acima, teríamos algo assim:

* {
    outline: 1px solid red;
}

Outra vantagem é que, se um elemento teve sua borda declarada, ela poderia ser trocada pelo primeiro código, quebrando ainda mais o estilo, enquanto esse manteria a borda original e adicionaria outra linha, já que o outline é desenhado por fora das bordas.

Print do outline

Técnica 2: backgrounds com alpha somados

Essa outra técnica envolve uma outra propriedade, dessa vez bem conhecida, a background-color, porém, com uma opacidade menor de 1. O motivo é que, quando temos um background com opacidade menor do que 1, conseguimos ver o que está no fundo, e aí as cores se misturam. Se as cores são iguais, o efeito causado é de que quanto mais pra "cima" um elemento estiver, mais escura sua cor de fundo será.

O código ficaria assim:

* {
    background: rgba(100, 0, 0, 0.1);
}

E aqui o resultado:
Print do background

Conclusão

Mesmo quando se trata de ferramentas "preguiçosas" para debug, existem umas melhores do que outras, e conhecê-las sempre é uma boa ideia, principalmente quando não temos o tempo para configurar ou a necessidade por uma ferramenta mais poderosa para identificar bugs.

Caso queiram aprender formas mais sofisticadas, recomendo assistirem esse vídeo do Kevin Powell, um dos meus criadores de conteúdo de CSS favoritos. Inclusive, o tópico desse post foi completamente inspirado em um dos conteúdos dele. O vídeo está em inglês, mas infelizmente não conheço outra fonte que tenha falado desse assunto em inglês.

Se quiserem ver o exemplo que criei para esse artigo, é só clicar aqui pra acessar o codepen

Sobre o autor

Esse é aquele tópico que comentei sobre lerem com atenção caso tenham gostado do conteúdo. Basicamente queria me apresentar melhor, mas sem atrapalhar o ponto principal do post hehe.

Como comentei, meu nome é Gabriel Kyomen. Acho que como todos aqui, adoro acompanhar o canal do Filipe, e atualmente trabalho como Fullstack com NextJS pra web, Expo pra apps e NodeJS com express pra APIs. Também sou estudante de Ciência da Computação na UFSCar.

Decidi entrar para a plataforma com intuito principal de praticar minha escrita e criação de conteúdo, já que fiz um workshop na faculdade uma vez e me interessei bastante por isso depois de ler diversos feedbacks positivos que me motivaram a ensinar aquilo que pratico no meu dia a dia.

Por isso, queria pedir para darem feedbacks aqui nas respostas. Dependendo de como for, penso em escrever alguns posts que juntos virem uma "série", seja pra me acompanhar em jornadas de aprendizado, ou seja para ensinar algo que já tenho consolidado na mente mesmo.

Se quiserem aumentar o network de vocês, sintam-se à vontade para conectarem comigo no meu Linkedin ou no meu Github!

Se você leu até aqui, de verdade, muito obrigado! Até mais.

Carregando publicação patrocinada...
1

Se sua intenção era praticar a escrita e criação de conteúdo, acredito que irá muito além. Conteúdo útil de leve leitura e fácil compreensão. Parabéns, creio que tens muito a contribuir. Agradeço. Te desejo sucesso.

1

Eu uso muito pra verificar o pq algo está diferente do q deveria estar o inspecionar do navegador, vejo as especificações na parte direita e arrasto para baixo, onde mostra a "box" do elemento, recomendo muito.

1
1

Valeu, mano! Li seu post de type predicate logo que você escreveu e já comecei a fazer alguns refactors por aqui. Você escreve muito bem!

1
1

Olha que publicação top, entrei aqui meio que sem esperar muito e realmente me impressionou esses hackzinho pra debugar o css, eu usava border 2px solid red, e esse outline eu nem sabia que existia, topzera mesmo, pode continuar fazendo posts assim que vai agregar muito valor pra comunidade.

1

Eu já fiz muito isso, mas hj em dia eu acabo usando o devtools do próprio browser mesmo, que já mostra todas as dimensões dos elementos, permite editar inline, etc.

Mas claro, é bom saber desse "truque", é uma ferramenta a mais na nossa "caixa de utilidades" :-)

1

Esse tópico sobre CSS e bugs é maravilhoso. Lembro exatamente de fazer algo com uma borda sólida pra identificar os problemas das páginas que pediam pra eu construir.}
Nunca usei outline mas já usei o 'background' pra identificqar múltiplos erros de estilização.

Obrigado por compartilhar seu conhecimento e suas experiências. Vlw!!!

1

Eu que agradeço pelo feedback! Vou tentar escrever periodicamente por aqui, falar um pouco mais de dicas que já utilizei no meu dia a dia

1

É uma ótima técnica e salva o dia em algumas situações, ótima dica.
Uma outra dica é usar o devtools do Firefox (tanto a versão padrão quanto a Developer, o Firefox azul) que tem um bocado de coisas novas sempre, que aparecem no chrome e derivados bem depois.
Um caso é uma forma de aplicar a dica original do post em Grid e Flex, que já existe há anos no Firefox.
Não é uma propaganda do navegador nem uma comparação sobre qual seria o melhor, apenas chamando a atenção para uma característica interessante que muitos devs deixam passar por usar apenas Chrome no desenvolvimento e Firefox apenas para testar compatibilidade, quando isso é feito.
Eu sempre tenho pelo menos 2 abertos, um Firefox (uma dessas versões citadas) e um Chrome ou derivado (quase todos os navegadores atuais usam como engine o V8 do Chromium, o Firefox é dos poucos que não). No momento estou escrevendo essa resposta no Brave.
Sei que é quase padrão ter um software para cada tarefa, mas para algumas, como navegar e desenvolver frontend, não consigo, sempre tenho de 5 a 8 navegadores instalados na máquina, no celular tenho também a maioria deles.