O que é console.log? Como utilizar?

Neste artigo veremos o que é console.log e também como podemos utilizar esta função para desenvolver nossos projetos no JavaScript!

Fala programador(a), tudo bem? Bora aprender mais sobre JavaScript!

O console

Primeiramente é necessário entender que o console é um objeto, e o log() é apenas um método deste objeto

Há diversos outros métodos, como:

• error();
• warn();
• clear();
• time();
• table();
• count();
• group();
• e o próprio log();

Cada um tem a sua utilização específica, o log() tem como sua função emitir mensagens de depuração do sistema

O método log

Este método de console vai enviar os dados diretamente para o console do navegador

Que no Chrome pode ser acessado por: Ctrl + Shift + J

Aqui nesta tela todas as mensagens que estiverem dentro de console.log() serão exibidas

Então se você tem este código:

var teste = 'olá';

console.log(teste);

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Você terá a exibição da variável teste no console, veja:

Normalmente utilizamos o console.log para acompanhar os valores de variáveis durante a execução de algum código

Com o intuito de identificar algum bug ou entender como o código está se comportando

Tome cuidado

Não exponha variáveis sensíveis no console.log, isso pode causar problemas de segurança no seu software

O uso demasiado desta função pode representar lentidão no seu site, uma vez que o JS é executado no computador do cliente

E depende dos recursos do computador do mesmo

O ideal é apagar todos os console.log quando você enviar o site para produção, ou seja, o servidor que ficará hospedado

Pelo menos comentar as linhas

Conclusão

Neste artigo vimos o que é console.log e também como podemos utilizar

O log é um método do objeto console, que tem diversos outros métodos que auxiliam com mensagens no console do navegador

E o método log(), é utilizado para depurar valores de variáveis ou entender como o sistema está funcionando

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Logando mais de um valor de uma vez:

Não precisa criar um console.log pra cada variável, dá pra jogar tudo de uma vez separando por vírgula

var nome = 'Matheus'
var curso = 'JavaScript'

console.log(nome, curso)

O console imprime os dois valores na mesma linha, na ordem que tu passou

Só que tem um detalhe chato: quando aparecem cinco log espalhados pelo arquivo, tu olha a tela e não sabe qual valor é de qual variável

Aí entra um truque bem simples, envolver as variáveis em chaves:

console.log({ nome, curso })

Agora o console mostra o NOME da variável junto do valor, e a leitura fica óbvia 🙂

Quando usar warn, error ou table no lugar do log:

Lá em cima eu citei os outros métodos do objeto console, e vale saber quando cada um brilha

O log é o padrão, serve pra acompanhar valor durante a execução

O warn é pra aviso: aquilo ainda funciona, mas tu já sabe que vai dar dor de cabeça

console.warn('essa função vai ser removida, migre pra nova')

O error é pra falha de verdade, a mensagem sai marcada como erro e não se perde no meio dos outros log

console.error('não consegui carregar os dados do usuário')

E o table é o mais subestimado da lista: passa um array de objetos pra ele e o console monta uma tabelinha com as colunas

var usuarios = [
{ nome: 'Ana', cargo: 'dev' },
{ nome: 'João', cargo: 'designer' }
]

console.table(usuarios)

Pra inspecionar resposta de API isso é muito massa, tu bate o olho e entende a estrutura sem ficar abrindo seta por seta

E quando o JavaScript não roda no navegador?

Esse artigo fala do console do navegador, mas hoje é bem comum o mesmo JavaScript rodar fora dele, no servidor

Que servidor? O ambiente onde o teu código executa antes da página chegar no usuário, tipo uma API em Node ou a parte de servidor de um framework moderno

Nesse caso o console.log continua funcionando igualzinho, só que a mensagem não aparece no console do navegador, ela cai no terminal onde o processo está rodando

Já me ferrei uma vez por causa disso: fiquei olhando pro console do navegador achando que o log tinha sumido, e ele estava lá no terminal o tempo todo, quietinho

Então antes de achar que o teu log não executou, confere os dois lugares

Dá pra não apagar os log na mão:

Sair caçando console.log linha por linha antes de subir o site funciona, mas é o tipo de tarefa que a gente esquece justo no dia do deploy

O caminho mais tranquilo hoje é deixar isso no automático

O processo de build do projeto normalmente já consegue tirar essas chamadas da versão que vai pro ar, e as ferramentas de lint conseguem te avisar quando um console.log escapou pro commit

Assim tu segue usando o log à vontade enquanto desenvolve, sem medo de esquecer linha no meio do código

E o cuidado com dado sensível continua valendo do mesmo jeito: log de token ou de senha não deveria existir nem no teu editor, imagina em produção

Console.log continua salvando na era da IA:

Hoje boa parte do código nasce de um prompt, tu pede pro assistente e ele devolve a função pronta

Só que ele te entrega o código com a maior confiança do mundo, mesmo quando o valor que passa ali no meio é outro

E aí o console.log volta a ser o teu melhor amigo: tu não discute com a IA, tu imprime o valor e olha o que está realmente acontecendo

Coloca um log na entrada e outro na saída da função gerada, roda, compara

Se o valor bate, beleza, segue o jogo

Se não bate, tu já sabe qual pedaço devolver pro assistente arrumar, em vez de pedir "conserta aí" e torcer

Vibe coding sem depuração é só torcida, e torcida não sobe pra produção 😀