Exemplo de console.log() em JavaScript – como imprimir no console em JS

Artigo original: JavaScript Console.log() Example – How to Print to the Console in JS

Registrar mensagens no console é uma forma básica de diagnóstico e resolução de pequenos erros em seu código.

Você sabia, no entanto, que a função console vai muito além do log? Neste artigo, mostrarei a você como imprimir no console em JS, além de outras coisas que você não sabia que console podia fazer.

Console do editor multilinhas do Firefox

Se você nunca usou o editor multilinhas do Firefox, experimente-o agora!

Apenas abra o console, com Ctrl+Shift+K ou F12, e, na parte superior direita, você verá um botão que diz "Switch to multi-line editor mode" (Mudar para o modo editor multilinhas). Como alternativa, pressione Ctrl+B.

Isso levará você para o editor de código multilinhas dentro do Firefox.

console.log

Vamos começar com um exemplo de log (registro) bem simples.

let x = 1
console.log(x)

Digite isso no console do Firefox e execute o código. Você pode fazer isso clicando no botão "Run" (Executar) ou pressionando Ctrl+Enter.

Neste exemplo, deveremos ver "1" no console. Bastante direto, não?

Diversos valores

Você sabia que podemos incluir diversos valores? Adicione uma string ao início para identificar facilmente o que você está registrando.

let x = 1
console.log("x:", x)

E se tivermos vários valores que queremos registrar?

let x = 1
let y = 2
let z = 3

Em vez de digitar console.log() três vezes, podemos incluir todos eles. Podemos, também, adicionar uma string antes de cada um deles se quisermos.

let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)

Muito trabalho? Basta envolvê-los entre chaves! Agora, você terá um objeto com os valores nomeado.

let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )

Você pode fazer o mesmo com qualquer objeto.

let user = {
  name: 'Jesse',
  contact: {
    email: 'codestackr@gmail.com'
  }
}
console.log(user)
console.log({user})

O primeiro registro (log, em inglês) imprimirá as propriedades dentro do objeto user. O segundo identificará o objeto como "user" e imprimirá as propriedades dentro dele.

Se estiver registrando muitas coisas no console, isso pode ajudar você a identificar cada registro.

Variáveis dentro do registro

Você sabia que pode usar porções de seu registro como variáveis?

console.log("%s is %d years old.", "John", 29)

Neste exemplo, %s se refere a uma opção de string incluída após o valor inicial. Ele faz referência a "John", portanto.

O %d se refere a uma opção numérica incluída após o valor inicial. A referência, assim, seria para 29.

O resultado dessa declaração seria: "John is 29 years old.".

Variações de registros

Existem algumas variações de registros. A mais amplamente usada, certamente, é console.log(). Mas também existem os seguintes:

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, warn terá a cor amarela, enquanto error terá a cor vermelha.

Observação: os estilos variam de um navegador para o outro.

"Logs" opcionais

Podemos imprimir mensagens no console por meio de condicionais com console.assert().

let isItWorking = false
console.assert(isItWorking, "this is the reason why")

Se o primeiro argumento for false, a mensagem será registrada.

Se isItWorking mudar para true, a mensagem não aparecerá.

Contagem

Você sabia que pode contar com o console?

for(i=0; i<10; i++){
  console.count()
}

Cada iteração desse laço imprimirá um contador no console. Você verá "default: 1, default: 2" e assim por diante, até chegar em 10.

Se executar o mesmo laço novamente, verá que a contagem retoma de onde parou, ou seja, irá de 11 a 20.

Para redefinir o contador, podemos usar console.countReset().

Se quiser nomear o contador com um nome diferente de "default", é possível!

for(i=0; i<10; i++){
  console.count('Counter 1')
}
console.countReset('Counter 1')

Agora que adicionamos um rótulo, veremos "Counter 1, Counter 2" e assim por diante.

Para redefinir esse contador, precisamos passar seu nome à função countReset. Desse modo, podemos ter vários contadores sendo executados ao mesmo tempo e redefinir apenas alguns específicos.

Acompanhar o tempo

Além de contar, você pode contar o tempo de maneira semelhante a um cronômetro.

Para iniciar o temporizador, podemos usar console.time(). Isso não fará nada por conta própria. Neste exemplo, usaremos setTimeout() para simular a execução do código. Então, dentro do timeout, interromperemos o temporizador usando console.timeEnd().

console.time()
setTimeout(() => {
  console.timeEnd()
}, 5000)

Como se poderia esperar, após 5 segundos, veremos o registro final do temporizador, de 5 segundos.

Também podemos registrar o tempo atual de nosso temporizador enquanto está em execução, sem pará-lo. Fazemos isso usando console.timeLog().

console.time()

setTimeout(() => {
  console.timeEnd()
}, 5000)

setTimeout(() => {
  console.timeLog()
}, 2000)

Neste exemplo, obteremos nosso timeLog de 2 segundos primeiro, depois nosso timeEnd de 5 segundos.

Da mesma forma que ocorre com o contador, podemos rotular os temporizadores e ter diversos deles em execução ao mesmo tempo.

Grupos

Outra coisa que se pode fazer com log é agrupá-los.

Começamos um grupo usando console.group(). Encerramos 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')

Esse grupo de registros pode ser expandido ou recolhido. Isso facilita a identificação de um conjunto de registros.

Por padrão, o grupo está expandido. É possível defini-lo como recolhido usando console.groupCollapsed() em vez de console.group().

Os rótulos podem ser passados aos group() para identificá-los melhor.

Acompanhamento da stack

Você também pode fazer o acompanhamento da stack (stack trace, em inglês) com console. Basta adicioná-lo a uma função.

function one() {
  two()
}
function two() {
  three()
}
function three() {
  console.trace()
}
one()

Nesse exemplo, temos funções bastante simples, que chamam uma à outra. Então, na última função, chamamos console.trace().

Tabelas

Aqui temos um dos usos mais espantosos para o console: console.table().

Vamos configurar alguns dados para registrar:

let devices = [
  {
    name: 'iPhone',
    brand: 'Apple'
  },
  {
    name: 'Galaxy',
    brand: 'Samsung'
  }
]

Agora, vamos registrar os dados usando console.table(devices).

Espere! Fica ainda melhor!

Se quisermos apenas as marcas (brands), digitamos console.table(devices, ['brand'])!

Que tal um exemplo mais complexo? Nele, 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 "name" e "email". Se fizermos o console.log de todos os dados, veremos que há muito mais propriedades para cada usuário.

Estilo

Sabia que podemos usar propriedades do CSS para estilizar nossos registros?

Para fazer isso, usamos %c para especificar que temos estilos para adicionar. Os estilos são passados no segundo argumento do log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

Podemos fazer isso para dar destaque aos nossos registros.

Limpar

Se você está tentando solucionar problemas usando os registros, você atualizará bastante e seu console pode ficar congestionado rapidamente.

Basta adicionar console.clear() na parte superior do seu código e você terá um console limpo toda vez que você atualizar.

Só não o coloque no final do código ou não verá nada!

Obrigado pela leitura!

Se quiser revisar os conceitos deste artigo usando um vídeo, confira esta versão do artigo em vídeo que eu fiz.

Meu nome é Jesse e eu sou do Texas. Confira meus outros conteúdos e mande uma mensagem para eu saber como eu posso ajudá-lo em sua jornada para se tornar um desenvolvedor para a web.

• Inscreva-se no meu canal no YouTube
• Dê um oi pelo Instagram ou pelo Twitter
• Inscreva-se na minha newsletter