Indo além do console.log()
Uns dias atrás eu comecei a trabalhar em uma empresa nova (maxmilhas 💙) e pra me ambientar com o projeto, fiquei uns dias apenas resolvendo bugs 😱. Eu sei que chega a doer o coração quando alguém fala que você tem que resolver bugs, mas eu gostei muito de passar por esse processo, porque me fez fuçar tanto o projeto que agora já me sinto bem mais íntima dele.
Como eu não conhecia muito bem o projeto, precisei debugar E MUITO cada parte do código que eu trabalhei. E nesse processo eu aprendi algumas coisas legais do dev tools do chrome e quero compartilhar com vocês.
console.clear();
A primeira dica e pra mim a mais útil e a de limpar o console. Pode ser que sua aplicação esteja debugando várias coisas ao mesmo tempo e escrevendo várias coisas no console. Se você tentar debugar assim, pode ser que em algum momento tudo se torne bem confuso e você queira sair correndo. MAS não desista.
Existem três maneiras de limpar o console.
1- botão direito em cima do console e "clear console"
2 - Executar a função clear()
3 - command + K (mac) / control + L (windows)
Eu só usava a primeira opção, mas vamos combinar que com atalho é muito mais rápido.
console.clear();console.log()
O console.log todo mundo conhece, certo? Mas você sabia que dá pra deixar ele muito mais legível e te ajudar a ler melhor as informações?
%s
formata uma variável como string
const dogName = 'Mafalda';
console.log("O nome do meu cachorro é %s", dogName)
Importante lembrar que dá pra fazer isso com template strings também:
const dogName = 'Mafalda';
console.log(`O nome do meu cachorro é ${dogName}`)
%d
formata uma variável como inteiro
const dogAge = 10;
console.log("Meu cachorro tem %d anos", dogAge)
Aqui também dá pra usar template strings :)
%c
adiciona estilo
console.log("%c Eu preciso muito enxergar este console no meio dos outros, como faz?", 'font-size: 20px; color: yellow; background-color: red;')
Este pra mim é uma das coisas mais úteis. É ótimo você printar um console bem chamativo, que vai ser enxergado de primeira.
vários argumentos
Uma coisa legal também é que dá pra passar vários argumentos no console.
const list = {
name: 'Mafalda',
age: 10,
hobby: 'eat'
}console.log("EXIBINDO A LISTA AQUI: ", list)
console.warn();
Esse é bem parecido com o console.log, mas a formatação dele é de warning. É bem útil caso você precise deixar alguns pontos de atenção enquanto desenvolve.
console.warn("Atenção aqui!")
console.error();
Esse é aquele que mais faz a gente sofrer no console :|
É bem parecido com o warning, mas tem a formatação de erro.
console.error("Errou aqui ó.")
console.assert();
Aqui você pode testar uma condição, se ela for verdadeira ele não retorna nada, se for errada, retorna um erro.
console.assert(1 === 2, 'Ops, parece que não');
console.dir();
Exibe uma lista com as propriedades do objeto. É muito útil para saber tudo de um elemento do DOM, por exemplo.
const p = document.querySelector('p');
console.dir(p);
console.group();
Cria grupos de saídas.
É muito útil pra debugar um forEach, por exemplo. Para cada item que for iterado, ele gera um novo grupo.
const dogs = [{ name: 'Mafalda', age: 10}, { name: 'Olívia', age: 3 }, { name: 'Catuaba', age: 5 }];dogs.forEach((dog) =>{
// abre o grupo
console.group(`${dog.name}`)
console.log(`Olá, Eu sou a ${dog.name} e eu tenho ${dog.age} anos`)
// fecha o grupo
console.groupEnd(`${dog.name}`)
})
usando o groupCollapse, todos os itens vem fechados :)
const dogs = [{ name: 'Mafalda', age: 10}, { name: 'Olívia', age: 3 }, { name: 'Catuaba', age: 5 }];dogs.forEach((dog) =>{
// abre o grupo
console.groupCollapsed(`${dog.name}`)
console.log(`Olá, Eu sou a ${dog.name} e eu tenho ${dog.age} anos`)
// fecha o grupo
console.groupEnd(`${dog.name}`)
})
O grupo precisa começar e terminar com o mesmo nome.
console.time();
Retorna quanto tempo a operação demorou para ser feita.
console.time('Quanto tempo durou?')
fetch('http://api.github.com/users/paulahfaria')
.then(data => data.json())
.then(data => {
console.timeEnd(`fetching data`)
})
O grupo de tempo precisa começar e terminar com o mesmo nome.
console.count()
Conta quantas vezes a mensagem foi exibida.
console.count('mafalda');
console.count('mafalda');
console.count('mafalda');
console.count('mafalda');
console.count('catuaba');
console.count('mafalda');
console.count('catuaba');
console.count('catuaba');
console.count('catuaba');
console.table()
Last but not least.
Pra ajudar na formatação de dados no console, é lindo!
const dogs = [{ name: 'Mafalda', age: 10}, { name: 'Olívia', age: 3 }, { name: 'Catuaba', age: 5 }];console.table(dogs);
Documentação geral do console: https://developer.mozilla.org/en-US/docs/Web/API/Console
É isso :)
Espero que algum desses seja útil no seu dia a dia.
Se alguém quiser acrescentar alguma outra técnica útil de debug, compartilha aqui!
Edit-1 — Quer saber mais ainda sobre este assunto? Recomendo este ótimo artigo do Guilherme Vasconcelos :)
Sugestões e feedbacks são bem vindos ❤
