Seguindo com a nossa série sobre o chrome devtools, vamos continuar falando sobre as ferramentas que o nosso navegador pode nos oferecer para nos ajudar na hora de desenvolver o nosso sistema. E hoje nós iremos falar sobre a aba console que vai nos ajudar quando nós estivermos desenvolvendo usando JavaScript.

O procedimento para acessar ela é o mesmo da aba elements, acessamos o devtools (seja pelo menu do click direito do mouse, ctrl+shift+i ou f12), e então selecionamos a aba console. Ela vai ser semelhante a essa daqui:

REPL

A primeira coisa que essa aba pode nos oferecer é o fato de ela ser um REPL (Read Eval Print Loop), isso significa que ela é um shell interativo que aceita comandos (Read) e então interpreta eles (Eval), mostra o resultado dessa interpretação (Print), e então repete isso para outros comandos futuros (Loop). Muitas linguagens possuem esse tipo de shell interativo para que os programadores possam se acostumar com a linguagem e testar alguns comandos.

No caso do console do navegador serão mostradas todas as mensagens enviadas por comandos como console.log, console.warn, console.error e etc. Ele também mostra os erros causados durante a execução do JS na página.

Fora isso, por ser um REPL, nós podemos executar comandos de JS ali dentro, ou simplesmente verificar o valor de alguma variável ali, afinal todo comando digitado ali é como se fosse digitado dentro de um console.log no código. Ex:

Pode-se notar que as duas linhas tiveram o resultado de sua expressão evaluado abaixo de si, logo essas duas linhas seriam equivalentes ao seguinte código:

console.log(let x = 10);
console.log(x);

Como podemos ver essa funcionalidade é muito útil para podermos verificar o valor de uma variável, checar erros, e testar alguns códigos.

Configurações de visualização

Como explicado antes o console pode mostrar diversos tipos diferentes de mensagens: info (o padrão), warning, error, e verbose. Ao clicar na engrenagem do canto superior direito:

Podemos filtrar quais tipos de mensagens queremos mostrar ao procurar pelo texto delas na barra de busca (em verde), podemos filtrar pelos níveis de que falei acima pelo menu dropdown com texto “All levels” (em azul).

Se clicarmos na engrenagem (em vermelho) podemos configurar algumas coisas no console como a “eager evaluation” que serve para mostrar um preview de uma expressão enquanto digitamos ela no console, ou controlar se alguns erros serão mostrados ou não (como é o caso dos erros de rede e de CORS), entre outras opções.

Limpar

É normal que ao utilizarmos muito o console do navegador, ele fique muito cheio de mensagens, e nós podemos limpa-lás ou utilizando o comando:

console.clear();

Ou clicando no segundo botão da esquerda para a direita que possui um ícone com um sinal de pare, ao lado do texto “top”.

Live expressions

Está é uma funcionalidade bem interessante que pode nos ajudar muito quando queremos verificar as mudanças em alguns valores.

Imagine que você quer observar a mudança da propriedade pageYOffset enquanto rola a página, para isso você teria que digitar o pageYOffset toda vez que rolasse um pouco a página. Ex:

É um pouco repetitivo, e nesse caso podemos utilizar um recurso chamado de live expressions para nos ajudar com essa tarefa, com essa funcionalidade, nós podemos escrever uma expressão que será observada pelo console (por exemplo o pageYOffeset da imagem) e toda vez que ela mudar, o console mostrará o novo valor dela nele.

Para fazer isso podemos clicar no ícone de um olho, como demonstrado na imagem abaixo:

E então digitamos na caixa de texto apresentada a expressão que queremos observar:

E depois disso apertamos ctrl + enter e depois disso podemos rolar a página que o valor atualizado será mostrado em tempo real no console:

Interagindo por meio do JavaScript

Podemos interagir com o console do navegador utilizando o famoso objeto console do JavaScript. O seu uso mais famoso sem dúvidas é o método console.log, mas existem ainda mais métodos interessantes que podemos utilizar, segue uma lista de referência para eles:

• console.error: mesmo que console.log porém mostra uma mensagem com nível error no console;
• console.warn: mesmo que console.log porém mostra uma mensagem com nível warning no console;
• console.table: útil para mostrar arrays, objetos e arrays de objetos no console do navegador, pois eles são formatados visualmente como uma tabela;
• console.dir: mostra o objeto como um objeto no console, é muito útil para controlar como você quer visualizar elementos do HTML no console, já que normalmente eles aparecem na forma de tag, assim como eles aparecem na aba elements, e as vezes queremos a visualização normal de objetos para inspecionar alguma propriedade e etc;
• console.dirxml: ele é o mesmo que o console.log, porém se receber um elemento do HTML, ele mostra ele no console como uma tag, sendo o contrário do console.dir nesses casos;
• console.assert: recebe um valor booleano (ou seja você pode passar uma expressão ali) como primeiro parâmetro e depois o valor a ser mostrado no console, caso a expressão do primeiro parâmetro seja verdadeira, então nada acontece, mas caso ela seja falsa, um erro é mostrado no console junto aos dados do segundo parâmetro;
• console.group e console.groupEnd: agrupam vários console.log começando a partir do console.group e finalizando no console.groupEnd;

Existem outros comandos e você pode explorar mais sobre eles aqui: https://developer.mozilla.org/en-US/docs/Web/API/console

Formatando mensagens

Se você é curioso e já tentou dar uma olhada no código do facebook, já deve ter notado que eles tem algumas mensagens no console bem diferentes, como essas aqui:

Podemos customizar nossas mensagens exibidas pelo console.log utilizando um %c antes do texto que queremos formatar no console. Ex:

const bigRedTextStyle = "color: #f00; font-size: 4em;"
console.log("%cHello World", bigRedTextStyle)

Dessa forma podemos aplicar CSS as mensagens exibidas no console. A propósito, o resultado do código acima é:

Console utilities

E para fechar este artigo com chave de ouro vamos falar um pouco sobre console utilities que são comandos e variáveis que podemos utilizar apenas no console do navegador, e se utilizarmos elas nos nossos códigos JS, eles não vão funcionar.

Essas utilidades são alguns atalhos que podemos tomar no console do navegador, por exemplo o $_ que vai sempre evaluar para o valor da última expressão utilizada (ou seja ele sempre vai valer o valor do último comando usado no console). Fora o $_, outras utilities são:

• $0 – $4: Se você inspecionar elementos na aba elements, os 5 últimos ficam salvos nas variáveis $0, $1, $2, $3 e $4 e você pode acessar eles no console diretamente por essas variáveis ao invés de ficar dando um querySelector nelas pelo console para poder inspecionar o seu valor;
• $(selector): atalho para document.querySelector, caso você passe outro elemento HTML no segundo parâmetro ele substitui o document, na hora de chamar o querySelector;
• $$(selector): mesmo que o anterior porém este é um atalho para o método querySelectorAll;
• monitor(function): essa função monitor recebe uma função qualquer como parâmetro e toda vez que ela for executada, o console irá mostrar na tela o nome dela e os parâmetros que foram passados para ela;

Embora essas foram as que me pareceram mais úteis, ainda existem várias dessas utilities e você pode conferir elas nesse link aqui: https://developer.chrome.com/docs/devtools/console/utilities/