JavaScript - Comandos do Console

Olá Web Developers! Muitos programadores JavaScript usam o comando console.log para ajudar a debugar seus códigos. Porém, há vários comandos do console que ficam de fora de suas rotinas, e que são muitas vezes mais indicados para certas ocasiões.

Comandos do Console para Logs

Os comandos do console mais comuns são os que imprimem algo. O método mais usado é o .log(), que simplesmente imprime uma mensagem.

Similarmente podemos usar outros métodos:

• .info(): possui um comportamento parecido com o .log()
• .warn(): imprime uma mensagem em estilo de alerta
• .error(): apresenta uma mensagem de erro

Além disso, já mostrei aqui no blog como estilizar as mensagens do console no navegador. Também pode ser bem útil.

Exibindo dados em tabelas

Se você precisa analisar vários dados que estão dentro de um Array, pode ser mais interessante usar o comando .table(). Se você passar um Array com objetos, eles serão exibidos em uma tabela. Você pode até escolher ordenar os dados por um campo.

Além disso, você também pode passar um objeto. Neste caso, cada propriedade do objeto será exibida em uma linha da tabela.

Lista interativa das propriedades do objeto

Às vezes queremos imprimir coisas como um elemento do DOM. Porém, isso faz o elemento HTML ser impresso no console. Em contrapartida, caso você queira que as propriedades do elemento sejam exibidas, você pode usar o console.dir() no lugar.

O dir() faz com que todas as propriedades de um objeto sejam exibidas. Veja a comparação em relação ao console.log ao imprimir um elemento <h2>.

Curso Google Chrome Developer Tools

Conhecer o curso

Comandos do Console para Agrupar Informações

Certamente você já teve a necessidade de imprimir vários valores juntos. Caso tenha usado o console.log(), há uma chance do log ter ficado um pouco bagunçado.

Há comandos do console que nos fornecem uma maneira simples de agrupar vários logs. Veja no código abaixo:

console.group('Cursos');

   console.log('TreinaWeb')
   console.groupCollapsed('Categorias')
      console.log('Front-End');
      console.log('Back-End');
      console.log('Mobile');
   console.groupEnd()

   console.log('AvMakers')
   console.groupCollapsed('Categorias')
      console.log('Edição de Vídeo');
      console.log('Modelagem 3D');
      console.log('Motion Design');
   console.groupEnd()

console.groupEnd()

Usamos o .group() para criar o nome de um grupo. Em seguida nós usamos o .log() normalmente. Ao final, fechamos o grupo com .groupEnd(). Os grupos criados podem ser fechados, ou seja, por padrão eles são apresentados abertos.

No entanto, você pode declarar grupos que sejam apresentados já fechados. Basta usar o .groupCollapsed() no lugar de .group(). Dessa maneira, caso haja muitos dados, seu console não ficará tão bagunçado.

A identação usada nesse código não é necessária. Eu coloquei apenas para deixar o código mais legível para mostrar onde um grupo inicia e onde ele é encerrado.

Contando Ocorrências

É provável que em algum momento você precise saber quantas vezes um código foi executado. E temos os comandos do console .count() e .countReset() exatamente para isso!

Primeiramente precisamos passar um nome para o .count(), como console.count('cadastro'). Sempre que esse comando for executado, um contador vai ser incrementado e impresso no console.

Para que o contador seja reiniciado, basta indicar o nome do contador para o .countReset(), como console.countReset('cadastro').

Indicando o caminho de execução

Sabe quando você precisa se lembrar como determinada função está sendo chamada, mas não lembra o caminho? Para que você poupe tempo, experimente usar o .trace.

function cadastrar() {
  enviarDados();
}

function enviarDados(){
   console.trace();
}

cadastrar()

Como resultado, você terá o caminho, a lista de funções executadas, até chegar no console.trace().

Curso HTML5 + CSS3 - Primeiros passos

Conhecer o curso

Contando o tempo

Também temos o comando console.time() para indicar o início e fim de uma contagem de tempo. É um comando muito bom para você verificar quanto tempo uma operação está levando. Falei melhor sobre esse comando no post das várias formas que temos para Testes de Performance em códigos JavaScript.

Limpando a bagunça

Com o fim de seus testes, você pode limpar o console com as teclas Ctrl + L. Mas isso também pode ser feito programaticamente com o comando console.clear(). Quando estou testando algo e já tenho muitos logs ou o programa está dando vários alertas que ainda estou investigando, costumo executar esse comando para limpar o console para mim logo na inicialização da aplicação. Assim meus logs não se misturam com outros.