Você já deve ter se deparado com alguma situação em que você precisava debugar a sua aplicação. Debugar uma aplicação WEB, na maioria dos casos significa, console.log(). De longe, esta é a ferramenta mais utilizada para encontrar erros e realizar uma porção de outras operações.
Neste artigo vamos expandir o console e entender como aprimorar o nosso fluxo de trabalho utilizando o melhor amigo do desenvolvedor.
O que é o console?
O console é um recurso de desenvolvimento incluso nos navegadores modernos que permite que o desenvolvedor:
- Visualizar erros e avisos que ocorrem em uma página.
- Interagir com uma página, utilizando comandos javascript.
- Debugar aplicações diretamente no navegador.
- Inspecionar e analizar o fluxo de uma atividade.
Basicamente ele permite que você escreva, gerencie e monitore Javascript diretamente dentro do seu navegador.
Console.log, Console.error, Console.warn and Console.info
Estes são de longe os recursos mais utilizados do console , eles permitem que você apresente mensagens e visualize arrays e objetos dentro do seu navegador. Todos apresentam a mesma estrutura de utilização, no entanto, console.warn() e console.error() apresentam mensagens em amarelo (Warn) e vermelho(Erro).
Comportamento padrão
String / Number / Boolean / Date / Object / Array
Saída dos dados:
Passando mais de um argumento
É possível passar mais de um argumento para o console.log(), permitindo assim economizar algumas linhas de código. Este comportamento é o mesmo para warn, error e info.
Saida:
console.trace()
Há alguns erros que são um tanto quanto misteriosos e a sua causa raiz é um tanto quanto desconhecida. Se você ainda não se deparou com algum erro destes, não se preocupe, não vai demorar muito para que você seja o próximo premiado. Em resumo, “Está tudo certo, não sei o que pode estar errado!”. Neste caso, o seu melhor amigo será o console.trace() este método permite que você veja o stack trace do erro naquele exato momento, isso vai lhe ajudar a identificar em qual método o seu código pode estar se perdendo.
console.count()
Existem alguns casos onde você quer verificar quantas vezes um determinado método é invocado, ou até mesmo se o seu loop está iterando o número de vezes que deveria. Nestes casos você pode utilizar o console.count()
console.table()
De longe este é o recurso mais interessante de se utilizar, é o meu preferido, sem sombra de dúvidas. Sempre que estou desenvolvendo um CRUD eu utilizo ela para me auxiliar na montagem dos dados da minha tabela. Veja como ela é versátil.
Para começar, montei um array de objetos simulando uma chamada ao banco de dados. Estes objetos possuem os seguintes campos: nome, idade, sexo, profissao.
Para este exemplo estou utilizando a API fetch para buscar os dados.
Passei o retorno para o console.table() e olha só o resultado que ele me apresenta.
Talvez você esteja com eu, quando vi pela primeira vez o console.table(). Eu fiquei extasiado, não tinha a menor ideia de que isto existia. Desde então, passei a utilizá-lo em todos os meus projetos. Mas a maravilha não para por ai. Vamos dizer que os seus objetos são infinitamente maiores do que os deste exemplo e você só precisa de dois destes dados. Pois eu tenho uma ótima notícia para você, como table você pode fazer sua própria “query sql”. Veja o exemplo:
É possível também passar um objeto com sub-objetos:
Neste caso vamos ter como index as chaves do objeto.
console.group() e console.groupEnd()
Em alguns casos é interessante criar um grupo de logs e isso é possível utilizando o console.group(). O parâmetro passado para o group é o nome do agrupamento:
console.groupCollapsed()
Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior; ao contrário de group(), o grupo em linha começa recolhido, esta é a principal diferença. Para revelar seu conteúdo, basta clicar no botão de revelação para expandí-lo. Para recuar um nível, utilize groupEnd().
console.time() e console.timeEnd()
Existem algumas aplicações que tem como requisito que o sistema seja aberto com todos os recursos carregados em em determinado intervalo de tempo máximo, ex: 2 segundos. O console.time() vai lhe ajudar a otimizar o carregamento dos seus recursos, permitindo que você identifique o tempo de carregamento da sua aplicação de uma forma segmentada e controlada.
Inicia um contador de tempo com o nome especificado. Até 10.000 contadores de tempo podem ser rodados por página.
console.clear()
Limpa todas as mensagens do console criadas até aquele momento.
Substituindo strings
Quando você estiver logando algum conteúdo, é possível fazer referência à suas variáveis utilizando o referencial %(%s = string, %i = integer, %o = object, %f = float).
console.log("%s", "PERIGO!");
Passando estilos para o console
Quando você possui muita informação no console, às vezes é preciso adicionar algum destaque à uma mensagem mais importante. Para isto utilizamos o %c antes da mensagem que queremos destaque. O destaque é feito utilizando CSS.
Conclusão
Agora que você conhece mais recursos do console, não fica difícil de escolher qual deles usar. De longe o mais interessante é o table no entanto, os demais possuem as suas devidas aplicações. Não deixe de estudar e ficar por dentro dos nossos novos artigos. Inscreva-se em nossas notificações para receber mais artigos como estes.
2 Comments
Wesley Silva
Parabéns Jonatan Pietroski. Conteúdo interessante e bem explicado, obrigado por compartilhar seus conhecimentos. Valeu!
pietroski
Obrigado Wesley! É sempre bom saber que estou ajudando de alguma forma.