Console do Desenvolvedor e console.log - JavaScript

Uma ferramenta indispensável ao trabalhar com JavaScript é o console do navegador, que permite depurar o programa. Muitos navegadores modernos possuem um console semelhante. Por exemplo, para abrir o console no Google Chrome, precisamos ir ao menu Mais Ferramentas (More Tools) -> Ferramentas do desenvolvedor (Developer tools):

Depuração de JavaScript no Google Chrome

Depois disso, o console será aberto na parte inferior do navegador:

Podemos inserir diretamente no console do navegador expressões JavaScript, e elas serão executadas. Por exemplo, vamos digitar o seguinte texto no console:

alert("Olá mundo");

E o que é ótimo ao trabalhar com o console é que, ao digitar, ele oferece uma dica pop-up com os nomes que queremos inserir, o que facilita a entrada, reduzindo a quantidade de possíveis erros:

A função alert() exibe uma janela de mensagem no navegador. Finalmente, após digitar esse comando e pressionar a tecla Enter, o navegador executará essa função e exibirá uma janela de mensagem:

Inserção de comandos JavaScript no console do navegador Google Chrome

Assim, para escrever e executar código JavaScript, não precisamos de um editor de texto nem de um arquivo de página da web que contenha código JavaScript, apenas o console do navegador é suficiente. No entanto, digitar código JavaScript longo e complexo no console pode não ser muito conveniente, portanto, para todos os exemplos futuros, continuaremos a usar o código JavaScript que é incorporado à página HTML.

Impressão no console e console.log

Para exibir vários tipos de informações no console do navegador, usa-se a função especial console.log(). Por exemplo, vamos definir uma página HTML com o seguinte código:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Programício</title>
</head>
<body>
<script>
const sum = 5 + 8;
console.log("Resultado da operação: ");
console.log(sum);
</script>
</body>
</html>

No código JavaScript, a constante sum é declarada com a palavra-chave const, à qual é atribuída a soma de dois números, 5 e 8:

const sum = 5 + 8;

Em seguida, usando o método console.log(), uma mensagem é exibida no console do navegador:

console.log("Resultado da operação");

E, finalmente, também usando o método console.log(), o valor da constante sum é exibido no console do navegador:

console.log(sum);

E após o lançamento da página web no navegador, veremos no console o resultado da execução do código:

Algo muito útil é que no console do navegador você também pode observar os números das linhas de código onde o log foi realizado.

No futuro, frequentemente recorreremos ao console e utilizaremos a função console.log().

De fato, poderíamos ter inserido um código semelhante diretamente no console:

Também inserimos instruções sequencialmente e após digitar cada instrução, pressionamos Enter. Neste caso, eu digitei duas instruções:

const sum2 = 1 + 2      // definimos a constante sum2, que é igual à soma de 1 + 2
console.log(sum2)       // exibimos o valor da constante sum2 no console

Se precisarmos que o código no console seja transferido para uma nova linha sem ser executado, pressionamos a combinação de teclas Shift + Enter ao final da expressão JavaScript. Após digitar a última instrução, para executar o código JavaScript inserido, pressionamos Enter.