Indo além do console.log 🖥️
Tags: javascript, beginners, braziliandevs, tutorial
Published: 2022-04-22 15:13:52

## ⭐ Introdução

Todo dev que já usou JS / TS utilizou pelo menos uma vez na vida o famoso `console.log()`, seja para apenas ir acompanhando passo a passo do código, para mostrar uma mensagem de retorno e muito mais, mas você aí, sabia que nem só de `console.log()` o dev precisa viver?

Abaixo você encontrará mais opções que podem até nós ajudar na hora de desenvolver nossas programas, deixando claro que não serão apresentadas todas as opções que existem.

---

## 🤔 console.assert

O `console.assert()` serve para verificar alguma expressão que passarmos e caso a mesma seja falsa, retornamos uma mensagem no terminal / console.

Estrutura base:
![Estrutura base console.assert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3ygqase16b1273a43zk.png)

Exemplo:
![Exemplos de console.assert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6brraovg6m024wt74d9.png)

Lembrando que só receberemos a mensagem do `console.assert()` que retornar **false**, como vemos a seguir se executarmos o exemplo acima:

![Rodando console.assert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cwnf41g5k3dclm6q0mz.png)

---

## 🧹 console.clear

Esta opção serve, para como o próprio nome sugere, limparmos nosso console / terminal.

Estrutura base:
![Estrutura base console.clear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/indrcrvokl80w4otetes.png)

Exemplo:
![Exemplo console.clear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te1rnigp7jklxj5zdz86.png)

Se executarmos o código acima iremos ver isso no nosso terminal (tudo que for mostrado no terminal antes do comando `console.clear()` será excluído):
![Resultado running console.clear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyitl73xt3j6tyoa63y1.png)

O `console.clear()` pode ser muito bom ao final do nosso código onde podemos limpar o terminal e não nos preocuparmos com isso posteriormente.

---

## ➕ console.count

Podemos usar o `console.count` para contar quantas vezes uma função foi executada / chamada ou quantas vezes passamos por aquele código já etc.

Estrutura base:
![Estrutura base console.count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x58jhb5on5xm2dswls0s.png)

Exemplos:
![Exemplo 1 console.count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz2jqjacovxudpcyschv.png)

Neste exemplo apenas chamamos o `console.count()` 5 vezes, o resultado disso em nosso terminal será o seguinte:

![Resultado exemplo 1 console.count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyuod430832t53ix2dkv.png)

Outro exemplo é o a seguir, onde podemos passar um texto que será exibido no terminal junto com a contagem padrão do próprio `console.count()` (esse texto é um dos parâmetros que podemos passar)

![Exemplo 2 console.count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7hed5c67oycmthdwkxw.png)

O resultado desse código no terminal será o seguinte:

![Resultado exemplo 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcn3nogpiyugoy01q0te.png)

E como último exemplo usaremos ele dentro de uma função, como comentado no início da explicação. O exemplo então fica assim:

![Exemplo 3 console.count](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f312he7g6ofn55zzb82.png)

O resultado no terminal:

![Resultado exemplo 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hq96m7rpu6vsh0hduyau.png)

---

## ⚠️ console.warn

Usamos o `console.warn()` para passar avisos ao usuário ou apenas para identificarmos algo que não está indo bem, neste caso o texto em si fica com a cor amarela.

Estrutura base:
![Estrtura base console.warn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myfkzhfqc14f08oqsp9s.png)

Exemplo: 

No caso do exemplo usaremos o console que temos nos próprios navegadores, assim quando precisamos lançar algum aviso podemos fazer da seguinte forma:

![Exemplo console.warn navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p50l581cyxahgqsya327.png)

O resultado disso será:

![Resultado console.warn navegador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0e1o1qnrv7wgk25yi8n.png)

Neste caso executamos manualmente o código indo até o console do navegador, mas esse comando pode ser dado no seu código JS e ser executado depois que o usuário fazer alguma ação em sua página HTML, seja por exemplo enviar um forms ou clicar em algum botão.

---

## ❌ console.error

Quase igual o `console.warn` o `console.error` serve justamente para mostrarmos possíveis erros no console / terminal, desta vez o texto ficará com a cor vermelha.

Estrutura base:
![Estrutura base console.error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/260ypk3uo2soyugoc8t9.png)

Exemplo:

Assim como no exemplo anterior também usaremos o próprio console do navegador e no geral o código não muda muita do exemplo anterior, ficando assim neste caso:

![Exemplo console.error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jufakppbfs6l4tquxuon.png)

O que iremos ver ao executar o código será isso:

![Resultado console.error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhausgzzjfsdutqiw09w.png)

---

## ❓ console.info

Praticamente idêntico ao tradicional `console.log()` que usamos normalmente, neste caso podemos usar o `console.info()` para realmente saber que aquilo é uma informação necessário e entendermos melhor o código, por que de resto não há diferenças igual os exemplos anteriores onde a cor das letras e outras coisas acabam mudando. No Firefox e Chrome, um pequeno ícone "i" pode ser apresentado próximo aos items do log do console.  

Estrutura base:
![Estrutura base console.info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvxha6fdimnhgnp4cx32.png)

Exemplo:

Seguindo o exemplo acima, mas apenas alterando a mensagem que será exibida, iremos obter um resultado mais ou menos como está representado na imagem abaixo.

![Exemplo console.info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e961tq89x4uhcwuaujc9.png)

Como dito no começo desta parte a diferença para o `console.log()` é nenhuma ou mínima, como comentado que em alguns navegadores pode surgir uma ou outra diferença entre usar o `console.info()` e o `console.log()`.

---

## 📋 console.table

O `console.table()` pode ser uma grande ajuda quando queremos visualizar melhor algumas informações no console, justamente usando o `console.table()` iremos criar uma tabela no console onde iremos ver as informações que passamos para ele.

Estrutura base:
![Estrutura base console.table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnjlb4gwwqddlxhl7x13.png)

Exemplos:

Como podemos ver na estrutura base passamos para o `console.table()` o que queremos que seja exibido em formato de tabela, esse parâmetro pode ser um array, um objeto etc.

No exemplo abaixo estamos usando o `console.table()` passando para ele um array com o nome `frutas` que contém os seguinte elementos `["Banana", "Maça", "Uva", "Morango", "Kiwi"]`. O código então fica mais ou menos assim:

![Exemplo 1 console.table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/er0cjh3xr2ippxrpjm9y.png)

Se executarmos esse código iremos ver algo parecido com isso:

![Resultado 1 console.table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a37tfaoxuzfta218cqnw.png)

![Resultado 2 console.table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5i0hqgr32lfcpqf2utr.png)

Note que em ambos os casos ele cria uma tabela com duas colunas, uma com o índice de cada elemento do array e o dado que está em cada um desses índices.

Outro exemplo que podemos explorar é passando um objeto para o `console.table()`, neste caso iremos criar um objeto chamado `eu` com as propriedades `{ age: 18, name: "Luigi Belanda", language_favorite: "JS"}`. 

![Exemplo 2 console.table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0b7uniwcfx9a5n46cav.png)

Se executarmos o código do exemplo acima teremos os seguintes resultado:

![Resultado 3 console.table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzxuwueo6potaclgv69v.png)

![Resultado 4 console.table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9qa1hvzk1lghayq0ry9.png)

Note que novamente foi criada uma tabela com duas colunas, a primeira com o nome de nossas propriedades e a segunda com o valor / dado de cada uma delas.

---

## 👥 console.group

Com o `console.group()` podemos justamente agrupar algumas informações para conseguirmos visualiza-las da melhor forma, de uma forma que delimitaremos esses grupos (nos exemplos a seguir veremos isso) e ainda para ajudar as mensagem vão ficando indentadas dentro de nosso `console.group()` para ajudar ainda mais nossa visualização.

Estrutura base:
![Estrutura base console.group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01odd4xxyhloxccvh4zc.png)

Note que precisamos abrir e fechar nosso grupo, abrimos com o `console.group()` e fechamos com o `console.groupEnd()`, só assim mostramos no código onde começa e termina nosso grupo de informações, mas você deve estar se perguntando, entre essas duas linhas (`console.group()` e `console.groupEnd()`)  eu coloco o que? Neste caso como está no exemplo você pode por `console.log()`, `console.warn()` e muito mais.

Exemplos:

No primeiro exemplo iremos criar 2 grupos, um contendo os alunos que estavam presentes na sala e os que faltaram, o código fica mais ou menos assim:

![Exemplo 1 console.group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgwquzlf3easplba018t.png)

Se executarmos o exemplo acima iremos ter o seguinte resultado:

![Resultado exemplo 1 console.group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uisc8onpb5s0h7fwesmw.png)

![Resultado exemplo 1 console.group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d008c4xm3hk2p1ohb2s.png)

Ainda usando o contexto de alunos que estavam presentes ou que faltaram temos o segundo exemplo, neste caso iremos criar outro grupo, mas dentro de outro (mostrando a questão da indentação das informações como comentando no começo dessa parte). No exemplo temos ainda os dois grupos principais (alunos presentes e os que faltaram), mas dentro do grupo dos presentes temos uma outra divisão indicando aqueles alunos que ficaram apenas durante as 2 primeiras aulas.

![Exemplo 2 console.group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbt9vvpv0tihx2ayalqj.png)

A indentação no exemplo acima não se faz necessária para que o código funcione corretamente, é apenas para ficar mais fácil de visualizar que existe um grupo dentro do outro.

Executando o código do exemplo acima obtemos os seguintes resultados:

![Resultado exemplo 2 console.group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xk4oj8n12taabnx6nv2w.png)

![Resultado exemplo 2.1 console.group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d83lo3x5xj3gnj6tx1vn.png)

No lugar do `console.group()` podemos usar o `console.groupCollapsed()`, desta forma nosso grupo de informações irá vir recolhido, ou seja, iremos precisar ir até o console e clicar no botão para o grupo se abrir / expandir e vermos as informações.

Seguindo o exemplo acima iremos apenas mudar para  `console.groupCollapsed()` o `console.group()` presente no grupo de alunos que estiveram presentes apenas nas 2 primeiras aulas, o resultado final dessa mudança é esse:

![Resultado exemplo 2.2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml6mzwcwsubgk6j4w1vs.png)

Nota que como dito o grupo de informações vem fechado / recolhido, se quisermos visualizar quais alunos estiveram presentes apenas nas 2 primeiras aulas temos que ir até o console e clicar no botão para o grupo se abrir / expandir.

---

## 🕑 console.time

Já pensou em ver quanto tempo leva para uma determinada parte do seu código rodar completamente? É pra isso que o `console.time()` serve, ele irá mostrar ao final de tudo quanto tempo levou para chegar ao final desde da chamada do `console.time()` até a chamada do `console.timeEnd()`.

Estrutura base:
![Estrutura base console.time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzcmgxat0swrhw0175or.png)

Dentro do `console.time()` passamos como parâmetro um nome para nosso timer podemos assim dizer, já no `console.timeEnd()` passamos o mesmo nome para assim indicar que a contagem de tempo deve ser finalizada.

Exemplo:

No exemplo abaixo iremos criar um loop for que irá rodar 1000 vezes executando a linha `console.log("Oi")`, no final veremos quanto tempo isso leva para terminar.

![Exemplo 1 console.time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbrzq8j41nma6yu42p24.png)

Se rodarmos o código do exemplo acima iremos ter os seguintes resultados:

![Resultado 1 console.time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmcb5frsxg9wj7lg421x.png)

![Resultado 1.2 console.time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utgkg6qajwziwfuvq1c3.png)

_Um método parecido com o que acabamos de ver é o `console.profile()`, que não será abordado neste post._

---

## 🛣️ console.trace 

Com o `console.trace()` conseguimos fazer uma trilha de como o código está sendo executado, passo a passo.

Estrutura base:
![Estrutura base console.trace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58p6xemk48265pmn6ckn.png)

Exemplo:

No exemplo abaixo iremos apenas criar 2 funções, uma função chamada `funcao1` que irá chamar a outra função `funcao2`, está que por sua vez irá ter um `console.trace()`.

![Exemplo console.trace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mshc7r49lx9x0iavsl81.png)

Abaixo podemos ver o resultado caso executemos o código do exemplo acima:

![Resultado exemplo console.trace](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zzh3rjilu51l17dqmc7.png)

Podemos notar que como comentado ele mostra uma trilha de quais funções foram chamadas.

---

## 🔗 Fontes

- https://developer.mozilla.org/en-US/docs/Web/API/console
- https://dev.to/devsmitra/javascript-console-methods-a-cheat-sheet-for-developers-44mc
- https://www.w3schools.com/jsref/obj_console.asp