Registrar mensagens na ferramenta Console

Desde que os navegadores começaram a oferecer ferramentas de desenvolvedor, o Console é um dos favoritos, porque na maioria dos cursos de programação, você aprende a produzir algum tipo de print comando ou log para obter insights sobre o que acontece em seu código.

Antes do DevTools, para JavaScript, você estava limitado a uma alert() instrução or document.write() para depurar no navegador. Com o DevTools, para registrar informações no Console, muitos métodos do Console objeto estão disponíveis no Console, listados na Referência da API do objeto do Console.

Níveis de mensagens de log do console: console.log, .info, .error e .warn

O console objeto tem métodos para registrar vários níveis de mensagens:

• console.log - Imprime o texto no Console como uma mensagem de log.
• console.info - Imprime o texto no Console como uma mensagem informativa.
• console.error - Imprime o texto no Console como uma mensagem de erro.
• console.warn - Imprime o texto no Console como um aviso.

Código de exemplo para níveis de mensagens de log do Console

// prints the text to the console as  a log message
console.log('This is a log message')

// prints the text to the console as an informational message
console.info('This is some information') 

// prints the text to the console as an error message
console.error('This is an error')

// prints the text to the console as a warning
console.warn('This is a warning') 

Página da Web de demonstração para obter os níveis das mensagens de log do Console

Para tentar usar as funções de log no Console:

1. Abra a página da Web da demonstração Exemplos de mensagens do console: log, info, error e warn em uma nova janela ou guia.

2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

   O DevTools é aberto, com a Console aberta na Barra de Atividades. A página de demonstração já enviou as mensagens de log acima para o Console:

   

   Os log() métodos and info() parecem fazer a mesma coisa. Use info() e log() para diferentes tarefas de log, pois isso permite filtrar mensagens do Console, para exibir apenas um subconjunto de entradas de log.

   Os error() métodos and warn() exibem um ícone ao lado da mensagem e uma maneira de inspecionar o rastreamento de pilha da mensagem.

3. Copie e cole qualquer um dos exemplos no Console e pressione Enter.

   A saída é exibida no Console, abaixo do código inserido.

Registrando vários tipos de valores

Em vez de registrar valores de texto, você pode enviar referências JavaScript ou DOM válidas para o console. O Console exibe adequadamente os vários tipos de valores JavaScript que você envia a ele a partir de mensagens de log do console. O Console exibe uma representação filtrada e formatada dos resultados.

Código de exemplo para registrar vários tipos de valores

let x = 2;

// logs the value of x
console.log(x);

// logs the name x and value of x
console.log({x})   

// logs a DOM reference  
console.log(document.querySelector('body'));

// logs an Object
console.log({"type":"life", "meaning": 42});
let w3techs = ['HTML', 'CSS', 'SVG', 'MathML'];

// logs an Array
console.log(w3techs);

Página da Web de demonstração para registrar vários tipos de valores

Para usar a log função para exibir diferentes tipos de variáveis:

1. Abra a página da Web da demonstração Exemplo de mensagens do console: Registrar diferentes tipos em uma nova janela ou guia.

2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

   O DevTools é aberto, com o Console aberto na Barra de Atividades, exibindo vários tipos de valores. Cada tipo de resultado é exibido de uma maneira diferente.

3. Expanda cada entrada de saída para analisar cada resultado com mais detalhes.

   A segunda mensagem de log no código de exemplo usa chaves {} em torno da x variável, para gerar o nome da variável, além do valor da variável. Essa sintaxe registra em log um objeto que contém uma única propriedade chamada x, em vez de registrar o valor de x only.

   Registrar variáveis de diferentes tipos no Console:

   

   Registrar variáveis de diferentes tipos no Console com informações adicionais expandidas:

   

4. Copie e cole qualquer um dos exemplos da página da Web renderizada no Console, como console.log({x}), e pressione Enter.

   A saída formatada é exibida no Console, abaixo do código que você inseriu.

Registrar valores usando especificadores de formato

Um recurso de todos os métodos de log é que você pode usar especificadores de formato na mensagem da instrução de log. Os especificadores de formato fazem parte de uma mensagem de log e começam com um caractere de sinal de porcentagem (%).

Use especificadores de formato para registrar determinados valores em diferentes formatos e converter entre formatos:

• %s logs de saída como Cadeias de caracteres.
• %i ou %d registra a saída como Inteiros.
• %f Saída de logs como um valor de ponto flutuante.
• %o registra a saída como um elemento DOM expansível.
• %O registra a saída como um objeto JavaScript expansível.
• %c permite estilizar uma mensagem usando propriedades CSS.

Código de exemplo para registrar valores usando especificadores de formato

// logs "10x console developer"
console.log('%ix %s developer', 10, 'console');

// logs PI => 3.141592653589793
console.log(Math.PI); 

// logs PI as an integer = 3
console.log('%i', Math.PI); 

// logs the document body as a DOM node
console.log('%o', document.body); 

// logs the body of the document as a JavaScript object with all properties
console.log('%O', document.body); 

// shows the message as red and big
console.log('%cImportant message follows','color:red;font-size:40px')

Página da Web de demonstração para registrar valores usando especificadores de formato

1. Abra a página de demonstração Mensagens do console Exemplos: Registro com especificadores em uma nova guia ou janela.

2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

   O DevTools é aberto, com a Console aberta na Barra de Atividades. A página da Web já preencheu o Console com a saída.

   O primeiro exemplo demonstra que a ordem de substituição dos especificadores de formato é a ordem dos parâmetros após a cadeia de caracteres:

   console.log('%ix %s developer', 10, 'console'); // logs "10x console developer"
   

3. Clique nos triângulos de expansão nos resultados de saída para expandir os dados gerados pelas instruções acima log que estão na página da Web.

4. Se necessário, pressione F5 para recarregar a página e preencher novamente a saída do Console .

   Os especificadores de formato são usados para registrar, formatar e converter valores:

   

5. No Console, nas duas body entradas, clique nos triângulos para expandir os resultados do log e ver a diferença entre os especificadores de %o formato e %O .

   O body elemento da página da Web é exibido como um nó DOM expansível (console.log('%o', document.body);) ou como uma lista completa de todas as propriedades JavaScript no body elemento (console.log('%O', document.body);):

   

Agrupando mensagens de log

Se você registrar muitas informações, poderá usar os group métodos and groupCollapsed para exibir mensagens de log como grupos expansíveis e recolhíveis no Console. Os grupos podem ser aninhados e nomeados para facilitar a compreensão dos dados.

Código de exemplo para agrupar mensagens de log

// Example 1: Nested groups, with the inner group hidden (collapsed):
console.group("Passengers: Heart of Gold");
console.log('Zaphod');
console.log('Trillian');
console.log('Ford');
console.log('Arthur');
console.log('Marvin');
console.groupCollapsed("Hidden");
console.log('(Frankie & Benjy)');
console.groupEnd();
console.groupEnd();


// Example 2:
let technologies = {
  "Standards": ["HTML", "CSS", "SVG", "ECMAScript"],
  "Others": ["jQuery", "Markdown", "Textile", "Sass", "Pug"]
}
for (tech in technologies) {
  console.groupCollapsed(tech);
  technologies[tech].forEach(t => console.log(t));
  console.groupEnd();
}

Página da Web de demonstração para agrupar mensagens de log

1. Abra a página de demonstração Mensagens do console Exemplos: Agrupando logs em uma nova guia ou janela.

2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

   O DevTools é aberto, com a Console aberta na Barra de Atividades. A página da Web já preencheu o Console com a saída, registrando muitos valores como grupos:

   

3. Na saída do Console , expanda ou recolha as seções:

   

Exibindo dados como tabelas

Como alternativa à saída de objetos expansíveis, o console.table() método registra dados como uma tabela que você pode classificar usando os cabeçalhos da tabela, para facilitar a visualização das informações.

Código de exemplo para exibir dados complexos como tabelas

let technologies = {
  "Standards": ["HTML", "CSS", "SVG", "ECMAScript"],
  "Others": ["jQuery", "Markdown", "Textile", "Sass", "Pug"]
}
// log technologies as an object
console.log(technologies);
// show technologies as a table
console.table(technologies);

// get the dimensions of the document body
let bodyDimensions = document.body.getBoundingClientRect();
// show dimensions as an object
console.log(bodyDimensions);
// show dimensions as a table
console.table(bodyDimensions);

Este código na página da Web de demonstração produz as primeiras quatro console saídas, com quatro números de linha mostrados no lado direito do Console.

Página da Web de demonstração para exibir dados complexos como tabelas

Para mostrar dados complexos como tabelas:

1. Abra a página de demonstração Exemplos de mensagens do console: Usando a tabela em uma nova janela ou guia.

2. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

   O DevTools é aberto, com a Console aberta na Barra de Atividades. A página da Web já preencheu o Console com a saída.

3. No Console, clique nos triângulos de expansão.

   Os dados são emitidos usando console.table, o que facilita a leitura dos dados:

   

A saída de tem um formato de console.table tabela. Se você copiar e colar uma tabela do Console em um aplicativo que dê suporte a dados tabulares, como o Microsoft Excel ou o Microsoft Word, a estruturação da saída como linhas e colunas será preservada.

Especificando uma matriz de propriedades para exibir como colunas

Se os dados tiverem parâmetros nomeados, o console.table() método também permitirá que você especifique um Array de colunas para cada propriedade a ser exibida como um segundo parâmetro. O exemplo a seguir mostra como especificar uma matriz de colunas que seja mais legível:

O código restante na página da Web de demonstração mostra:

1. Como gerar todas as propriedades como colunas, para os elementos selecionados.
2. Como especificar uma matriz apenas de propriedades especificadas como colunas, para os elementos selecionados.

// get all the h1, p and script elements
let contentElements = document.querySelectorAll(':is(h1,p,script)');
// show the elements as an unfiltered table
console.table(contentElements)
// show only relevant columns
console.table(contentElements, ['nodeName', 'innerText', 'offsetHeight'])

Esse código produz as duas console saídas finais, com dois números de linha mostrados no lado direito do console:

• logging-with-table.html:37
• logging-with-table.html:39

A chamada final para console.table filtra as informações que o console.table() método exibe, especificando uma matriz de propriedades a serem exibidas, como um segundo parâmetro.

Instruções de log vs. depuração de ponto de interrupção e Expressões Dinâmicas

Você pode ficar tentado a usar os log métodos como seu principal meio de depurar páginas da Web, pois os métodos de log são simples de usar. No entanto, considere o resultado de qualquer console.log() solicitação: os produtos lançados não devem usar nenhuma log instrução que tenha sido usada para depuração, pois ela pode revelar informações privilegiadas para as pessoas. E o excesso de ruído é criado no Console.

Portanto, em vez de instruções, tente usar a Depuração de Ponto de log Interrupção ou Expressões Dinâmicas. Você pode descobrir que seus fluxos de trabalho são mais eficazes e obter melhores resultados.

Confira também

• Referência da API do objeto do console