Registrar mensagens no console é uma maneira muito básica de diagnosticar e solucionar problemas menores em seu código.

Mas, você sabia que há mais para console do que apenas log? Neste artigo, vou mostrar como imprimir para o console em JS, bem como todas as coisas que você não sabia console poderia fazer.

Console do Firefox Multi-line Editor

Se você nunca usou o modo de editor multilinhas no Firefox, deve experimentá-lo agora mesmo!

Basta abrir o console, Ctrl+Shift+K ou F12, e no canto superior direito você verá um botão que diz “Alternar para o modo de editor multilinha”. Alternativamente, você pode pressionar Ctrl+B.

Isso fornece um editor de código de várias linhas dentro do Firefox.

console.log

Vamos começar com um exemplo de log muito básico.

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 = 3

Em 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} )

Saída do console
Saída do console

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().

Saída do console
Saída do console

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).

Saída do console
Saída do console

Mas espere – fica melhor!

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

Saída do console
Saída do console

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.

YouTube: há mais para consolar do que registrar

Jesse Hall (codeSTACKr)

Sou Jesse, do Texas. Confira meus outros conteúdos e diga como posso ajudá-lo em sua jornada para se tornar um desenvolvedor web.



Fonte