Desenvolvimento

10 out, 2017

O poder do console do navegador

Publicidade

O console é uma ferramenta incrível. Seja para executar um código on the fly, inspecionar ou interagir com elementos de uma página, ou até mesmo para conferir se há mensagens de erros. A ferramenta é uma grande mão na roda. Afinal de contas, quem nunca usou um console.log() para validar o seu código?

Mas apesar de ser uma ferramenta tão útil, poucas pessoas sabem como utilizar todo o seu potencial. Neste artigo, te mostraremos algumas das funcionalidades mais bacanas do console que poderão a vir ser úteis no seu dia a dia.

Mensagens na tela

O método log é de longe o método mais famoso do console e serve para exibir mensagens. Entretanto, junto ao log, existem mais três funções que fazem isso:

  • warn
  • error
  • info

A diferença é que cada uma exibe a mensagem com uma formatação de cor diferente. No Google Chrome, por exemplo, o warn é amarelo, o error vermelho e o info azul. Isso varia de acordo com o navegador.

As diferentes cores das mensagens no Google Chrome

Arrays em tabelas

Uma tarefa bem recorrente quando estamos desenvolvendo aplicações para a web é pedir para o console exibir um array. Conseguimos usar o método log (ou qualquer um dos outros que acabamos de ver) para fazer isso, mas com o método table conseguimos uma visualização muito melhor.

Exibindo um array no console com o método table

Agrupamento de mensagens

Outra funcionalidade muito útil é o agrupamento de mensagens. Com ela, conseguimos dar melhores contextos as mensagens que são exibidas no console encapsulando-as em grupos. Para isso, basta utilizarmos a função group e groupEnd, passando como parâmetro para ambas o nome do grupo correspondente.

Agrupamento de mensagens com o método group e groupEnd

Métricas

Um jeito de medir a eficiência de nossos algoritmos é medindo o tempo que ele demora para ser executado. O console tem uma função exatamente para isso, a time. Ela funciona de forma muito semelhante ao group. Passamos como argumento o nome do identificador daquela medida no time e ao final na função timeEnd.

Métricas de algoritmos utilizando o método time e timeEnd

Conclusão

Estes foram só alguns exemplos de funcionalidades que o console do navegador possui e que poucos conhecem. Existe uma série de outras funcionalidades que não foram abordadas, como a utilização de template strings, edição de páginas, monitoramento de eventos, etc. Explicaremos elas em outro artigo.

Para aprender mais sobre o console, acesse o site da especificação aqui.