Como Debugar Javascript Pelo Console

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.

Este é o console no navegador, ele pode ser acessado no menu do navegador, Mais Ferramentas e Ferramentas de Desenvolvedor.

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

console.log(), console.error(), console.warn(), console.info()

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

Deveria logar 10 vezes o conteúdo.

Logou 10 vezes

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:

“Query customizada” apenas nome e idade

Apresenta apenas nome e idade.

É possível também passar um objeto com sub-objetos:

Montagem do objeto

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:

Exemplo com agrupamento de logs pai e filho.

Resultado dos logs

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.

Especifica um timer chamado: chamada da API e termina este timer, passando um parâmetro ao timeEnd()

Monta a tabela e mostra o tempo que demorou para realizar todas as operações desde que o timer iniciou.

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.

Perceba que somente depois do %c é que o estilo é aplicado.

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.

Referências

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

Leave a comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Copyright © – Jonatan Pietroski