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