Como Usar o Console Log No JavaScript (Guia Completo)

Programador Viking 21 de março de 2022 0 Comentários Leitura: 3 min

Console Log Javascript

Neste artigo vamos aprender a utilizar o console log na linguagem Javascript de uma forma simples de entender, mesmo que você seja iniciante.

Além disso, vamos mostrar tanto a parte teórica quanto a parte prática passando todos os detalhes. E também algumas dicas de segurança que você precisa conhecer ao usar este comando.

Enfim, saber utilizar esse comando é extremamente importante porque ele fará parte da sua rotina como programador javascript.

Confira neste artigo:

O que é o console log

Primeiramente precisamos entender que o console é um objeto e o log é apenas um método desse objeto.

Existem diversos outros métodos do objeto console, por exemplo:

error()
warn()
clear()
time()
table()
count()
group()
log()

Cada um desses métodos do objeto console tem uma utilização especifica. O log() tem como objetivo apresentar mensagens de depuração do sistema.

Veja também: Como aprender JavaScript do zero e se tornar um profissional

Sintaxe

A sintaxe desse comando é bem simples conforme podemos ver no trecho de código abaixo:

console.log( mensagem )

basta digitar console.log() e dentro dos parênteses deve ser informado o conteúdo que será apresentado no navegador.

Bem simples né? Agora vamos ver um código na prática.

Colocando a mão na massa

Para facilitar o entendimento, vou deixar logo abaixo um código básico de HTML para iniciarmos a nossa implementação do código Javascript.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>Programador Viking - Youtube</title>
    </head>
    <body>
        <h1>PROGRAMADOR VIKING</h1>
       
    </body>
</html>

Se abrirmos o código HTML acima, vamos ver que tem apenas um título escrito programador viking e nada mais.

Ao abrir o console do navegador também não existem nenhuma mensagem de log.

Para isso, vamos usar o comando console.log() para informar uma mensagem.

Então vamos usar a tag <script> dentro do próprio HTML para facilitar o entendimento e deixar tudo em um único código.

Vamos declarar uma constante chamada mensagem que vai receber uma string com o conteúdo ‘inscreva-se no canal’

Em seguida vamos usa o console.log() passando por parâmetro a constante mensagem. Dessa forma o conteúdo dessa constante será apresentada no console do navegador.

Veja também: Como aprender JavaScript do zero e se tornar um profissional

O trecho do código ficará assim:

<script>
    const mensagem = 'Inscreva-se no canal'
    console.log(mensagem)
</script>

Executando o código completo ao abrir o console do navegador teclando F12, vc verá a mensagem ‘inscreva-se no canal’ conforme imagem abaixo:

Muito cuidado ao usar o console log

Agora preciso que você preste muita atenção nos cuidados que deve ter ao utilizar o console.log().

Normalmente usamos essa técnica de programação para conseguir enxergar o caminho que o nosso código está fazendo.

E também é muito comum, colocarmos variáveis no console.log() para visualizar o conteúdo dela durante a execução do programa.

Porém é necessário tomar muito cuidado para não acabar esquecendo de apagar o console.log() e expor conteúdos sensíveis dentro das variáveis.

Ou seja, isso pode causar muitos problemas de segurança no seu software.

Além disso, utilizar muitas vezes este comando pode acabar deixando o seu site mais lento. O ideal é sempre apagar todos os console log quando você for enviar o site para produção.

Vídeo Aula

Para facilitar o entendimento recomendo assistir a vídeo aula completa ensinando a usar este comando da forma correta no Javascript. Basta clicar aqui ou na imagem abaixo: