DEV Community

Cover image for Diferentes Formas de usar o console do javascript
Patrick Rocha
Patrick Rocha

Posted on

Diferentes Formas de usar o console do javascript

Quem escreve códigos em javascript com toda certeza do mundo conhece o console.log e usa bastante, inclusive a grande maioria dos devs javascript usa o console.log para tudo que é necessário debugar em uma aplicação...

A verdade é que poucos desenvolvedores que tocam nessa linguagem de fato conhecem as formas de usar o console do javascript, seja ela uma pessoa desenvolvedora júnior ou até mesmo alguém que está vindo de outra linguagem.

Quando estamos desenvolvendo uma aplicação haverá diversas necessidades e situações em que precisamos debugar, o console.log por si só já ajuda bastante para capturar um erro, deixar uma mensagem de aviso importante ou verificar dados que são retornados de algum método ou requisição http. Também vale citar a importante causa de geração de logs de uma aplicação, onde podemos salvar todo o fluxo de erros, mensagens de aviso e dados que circularam pelo sistema para poder analisar posteriormente as informações.

Enfim, no javascript, nós temos diversos métodos dentro do console que ajudam a gerar logs mais organizados e legíveis, podemos dar sentido a cada informação que precisamos capturar, e vou listar elas e falar um pouco sobre.

Vamos lá?
ah, e eu vou pular o console.log por quê já falamos dele e todos já o conhecem =)

Deixando avisos no console com: console.warn

Bom, como foi dito no título, o console.warn serve para deixarmos avisos no terminal, que se tiver um interpretador de javascript deixará colorido com uma cor amarelada, assim como temos em placas de aviso e mais.

Console warn

Console warn

Capturando erros da melhor forma: console.error

Esse aqui é super auto-explicativo...
Básicamente passaremos o que estamos debugando dentro do console.error("teste erro"), e ele nos trará assim como o warn deixa amarelo, ele deixará vermelho, representando o problema

Console error
Console error

Gerando tabelas em forma de log! com: console.table

Um dos mais incríveis! Literalmente gera uma tabela com o que for passado nele, e importante: precisa ser um array com objetos dentro!

Console Table
Console Table

Vamos contar? com: console.count

Com ele, podemos contar loops, como por exemplo um for e foreach... é só criar o for e dentro dele passar o seu console.count que ele irá contar cada índice do seu laço de repetição...

Console Count

Quanto tempo leva? com: console.time (e console.timeEnd

Isso é muito bom para quem quer saber quanto tempo leva para acontecer uma determinada ação, seja ela uma requisição externa (http por exemplo) ou algo interno da aplicação mesmo como uma grande feature que leva um tempo para processar...
Básicamente, você irá chamar o console.time() na linha acima da função que você quer testar o tempo, e no final de todo o fluxo da função você chama o console.timeEnd() e digita algo bem bonitinho para mostrar o tempo que demorou para a função executar e terminar...
Veja na imagem abaixo como fica:

Console Time

Bonus:

E se por ventura, você precisar verificar quanto tempo levou do inicio até um certo ponto do fluxo, você pode usar o console.timeLog()
Console TimeLog

Traçando todos os metodos de um fluxo com: console.trace

Caso você tenha um fluxo com muitas chamadas de função aninhadas você vai precisar saber qual função está chamando outra função, daí, é só usar o console.trace e terá um belo log disso.

Console Trace

Agora, vamos agrupar nossos logs! com: console.group (e groupEnd)

Básicamente, console.group() e console.groupEnd() são usados ​​para agrupar logs semelhantes ou diferentes.

Console Group

Ah, e caso esse log agrupado for pra ser usado no console do browser, temos o método organizador para quem não gosta de muita informação jogada na tela, podemos organizar com grupos ocultos.
Ele é o: console.groupCollapsed()

Console Group Collapse

Então, por hoje é só.
Agora você está com um grande arsenal nas mãos para gerar logs bonitos e organizados use-os!

Não esqueçam de deixar os feedbacks e possíveis correções desse post caso tenha algo a incrementar =) Obrigado.

Top comments (0)