let x = 1console.log(x)Digite isso no console do Firefox e execute o código. Você pode clicar no botão “Executar” ou pressionar Ctrl+Enter.
Neste exemplo, devemos ver “1” no console. Muito simples, certo?
Valores Múltiplos
Você sabia que pode incluir vários valores? Adicione uma string ao início para identificar facilmente o que você está registrando.
let x = 1console.log("x:", x)Mas e se tivermos vários valores que quisermos registrar?
let x = 1let y = 2let z = 3Em vez de digitar console.log() três vezes podemos incluir todos eles. E podemos adicionar uma string antes de cada um deles, se quisermos, também.
let x = 1let y = 2let z = 3console.log("x:", x, "y:", y, "z:", z)Mas isso dá muito trabalho. Basta envolvê-los com chaves! Agora você obtém um objeto com os valores nomeados.
let x = 1let y = 2let z = 3console.log( {x, y, z} )
Você pode fazer a mesma coisa com um objeto.
let user = { name: 'Jesse', contact: { email: '[email protected]' }}console.log(user)console.log({user})O primeiro log imprimirá as propriedades dentro do objeto de usuário. O segundo identificará o objeto como “usuário” e imprimirá as propriedades dentro dele.
Se você estiver registrando muitas coisas no console, isso pode ajudá-lo a identificar cada registro.
Variáveis dentro do log
Você sabia que pode usar partes do seu log como variáveis?
console.log("%s is %d years old.", "John", 29)Neste exemplo, %s refere-se a uma opção de string incluída após o valor inicial. Isso se referiria a “John”.
o %d refere-se a uma opção de dígito incluída após o valor inicial. Isso se refere a 29.
O resultado desta declaração seria: “John tem 29 anos.”.
Variações de toras
Existem algumas variações de logs. Existe o mais amplamente utilizado console.log(). Mas também há:
console.log('Console Log')console.info('Console Info')console.debug('Console Debug')console.warn('Console Warn')console.error('Console Error')Essas variações adicionam estilo aos nossos registros no console. Por exemplo, o warn será colorido de amarelo, e o error será colorido de vermelho.
Observação: os estilos variam de navegador para navegador.
Logs opcionais
Podemos imprimir mensagens para o console condicionalmente com console.assert().
let isItWorking = falseconsole.assert(isItWorking, "this is the reason why")Se o primeiro argumento for falso, a mensagem será registrada.
Se nós mudássemos isItWorking para true, a mensagem não será registrada.
Contando
Você sabia que pode contar com console?
for(i=0; i<10; i++){ console.count()}Cada iteração deste loop imprimirá uma contagem no console. Você verá “default: 1, default: 2” e assim por diante até chegar a 10.
Se você executar o mesmo loop novamente, verá que a contagem continua de onde parou; 11-20.
Para zerar o contador, podemos usar console.countReset().
E, se quiser nomear o contador com algo diferente de “padrão”, você pode!
for(i=0; i<10; i++){ console.count('Counter 1')}console.countReset('Counter 1')Agora que adicionamos um rótulo, você verá “Contador 1, Contador 2” e assim por diante.
E para zerar este contador, temos que passar o nome para countReset. Desta forma, você pode ter vários contadores em execução ao mesmo tempo e zerar apenas alguns específicos.
Tempo de rastreamento
Além de contar, você também pode cronometrar algo como um cronômetro.
Para iniciar um cronômetro, podemos usar console.time(). Isso não fará nada por si só. Então, neste exemplo, vamos usar setTimeout() para emular o código em execução. Então, dentro do tempo limite, pararemos nosso cronômetro usando console.timeEnd().
console.time()setTimeout(() => { console.timeEnd()}, 5000)Como seria de esperar, após 5 segundos, teremos um log de término do cronômetro de 5 segundos.
Também podemos registrar a hora atual do nosso cronômetro enquanto ele está em execução, sem interrompê-lo. Fazemos isso usando console.timeLog().
console.time()setTimeout(() => { console.timeEnd()}, 5000)setTimeout(() => { console.timeLog()}, 2000)Neste exemplo, teremos nossos 2 segundos timeLog primeiro, então nosso 5 segundos timeEnd.
Da mesma forma que o contador, podemos rotular temporizadores e ter vários em execução ao mesmo tempo.
Grupos
Outra coisa que você pode fazer com log é agrupá-los. 🤯
Começamos um grupo usando console.group(). E terminamos um grupo com console.groupEnd().
console.log('I am not in a group')console.group()console.log('I am in a group')console.log('I am also in a group')console.groupEnd()console.log('I am not in a group')Este grupo de logs pode ser recolhido. Isso facilita a identificação de conjuntos de logs.
Por padrão, o grupo não é reduzido. Você pode configurá-lo para recolhido usando console.groupCollapsed() no lugar de console.group().
As etiquetas também podem ser passadas para o group() para melhor identificá-los.
Stack Trace
Você também pode fazer um rastreamento de pilha com console. Basta adicioná-lo a uma função.
function one() { two()}function two() { three()}function three() { console.trace()}one()Neste exemplo, temos funções muito simples que apenas chamam umas às outras. Então, na última função, chamamos console.trace().
Mesas
Este é um dos usos mais alucinantes do console: console.table().
Então, vamos configurar alguns dados para registrar:
let devices = [ { name: 'iPhone', brand: 'Apple' }, { name: 'Galaxy', brand: 'Samsung' }]Agora vamos registrar esses dados usando console.table(devices).
Mas espere – fica melhor!
Se quisermos apenas as marcas, basta console.table(devices, ['brand'])!
Que tal um exemplo mais complexo? Neste exemplo, usaremos jsonplaceholder.
async function getUsers() { let response = await fetch('https://jsonplaceholder.typicode.com/users') let data = await response.json() console.table(data, ['name', 'email'])}getUsers()Aqui estamos apenas imprimindo o “nome” e o “email”. Se vocês console.log todos os dados, você verá que existem muito mais propriedades para cada usuário.
Estilo 💅
Você sabia que pode usar propriedades CSS para definir o estilo de seus logs?
Para fazer isso, usamos %c para especificar que temos estilos a adicionar. Os estilos são passados para o segundo argumento do log.
console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")Você pode usar isso para fazer seus logs se destacarem.
Claro
Se você está tentando solucionar um problema usando logs, pode estar atualizando muito e seu console pode ficar confuso.
Basta adicionar console.clear() no topo do seu código e você terá um novo console sempre que atualizar. 😀
Só não adicione no final do seu código, lol.
Obrigado pela leitura!
Se você quiser revisitar os conceitos neste artigo por meio de um vídeo, você pode conferir este video-version que fiz aqui.
Sou Jesse, do Texas. Confira meus outros conteúdos e diga como posso ajudá-lo em sua jornada para se tornar um desenvolvedor web.