Registar mensagens na ferramenta Consola

Desde que os browsers começaram a oferecer ferramentas de programador, a Consola é uma das favoritas, porque na maioria dos cursos de programação, aprende a produzir algum tipo de print comando ou log para obter informações sobre o que acontece no seu código.

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

Níveis de mensagens de registo da Consola: console.log, .info, .error e .warn

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

• console.log - Imprime o texto na Consola como uma mensagem de registo.
• console.info - Imprime o texto na Consola como uma mensagem informativa.
• console.error - Imprime o texto na Consola como uma mensagem de erro.
• console.warn - Imprime o texto na Consola como um aviso.

Código de exemplo para níveis de mensagens de registo da Consola

// 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 Web de demonstração para níveis de mensagens de registo da Consola

Para tentar utilizar as funções de registo na Consola:

1. Abra a página Web de demonstração Exemplos de mensagens da consola: registo, informações, erro e aviso numa nova janela ou separador.

2. Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

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

   

   Os log() métodos e info() parecem fazer a mesma coisa. Utilize info() e log() para diferentes tarefas de registo, uma vez que permite filtrar mensagens da Consola, para apresentar apenas um subconjunto de entradas de registo.

   Os error() métodos e warn() apresentam um ícone junto à mensagem e uma forma de inspecionar o rastreio da pilha da mensagem.

3. Copie e cole qualquer um dos exemplos na Consola e, em seguida, prima Enter.

   O resultado é apresentado na Consola, por baixo do código que introduziu.

Registar vários tipos de valores

Em vez de registar valores de texto, pode enviar referências javaScript ou DOM válidas para a Consola. A Consola apresenta adequadamente os vários tipos de valores JavaScript que envia para a mesma a partir de mensagens de registo da consola. A Consola apresenta uma representação filtrada e formatada dos resultados.

Código de exemplo para registar 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 Web de demonstração para registar vários tipos de valores

Para utilizar a log função para apresentar diferentes tipos de variáveis:

1. Abra a página Web de demonstração Exemplos de mensagens da consola: Registar diferentes tipos numa nova janela ou separador.

2. Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

   O DevTools é aberto, com a Consola aberta na Barra de Atividade a apresentar vários tipos de valores. Cada tipo de resultado é apresentado de uma forma diferente.

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

   A segunda mensagem de registo no código de exemplo utiliza chavetas {} em torno da x variável, para gerar o nome da variável, além do valor da variável. Esta sintaxe regista um objeto que contém uma única propriedade chamada x, em vez de registar o valor de x apenas.

   Variáveis de registo de diferentes tipos na Consola:

   

   Variáveis de registo de diferentes tipos na Consola com informações adicionais expandidas:

   

4. Copie e cole qualquer um dos exemplos da página Web composta na Consola, como console.log({x}), e, em seguida, prima Enter.

   A saída formatada é apresentada na Consola, por baixo do código que introduziu.

Registar valores com especificadores de formato

Uma funcionalidade de todos os métodos de registo é que pode utilizar especificadores de formato na mensagem da declaração de registo. Os especificadores de formato fazem parte de uma mensagem de registo e começam com um caráter de sinal de percentagem (%).

Utilize especificadores de formato para registar determinados valores em formatos diferentes e para converter entre formatos:

• %s regista a saída como Cadeias.
• %i ou %d regista a saída como Números Inteiros.
• %f regista a saída como um valor de vírgula flutuante.
• %o regista a saída como um elemento DOM expansível.
• %O regista a saída como um objeto JavaScript expansível.
• %c permite-lhe criar um estilo de mensagem com as propriedades do CSS.

Código de exemplo para registar valores com 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 Web de demonstração para valores de registo com especificadores de formato

1. Abra a página de demonstração Exemplos de mensagens da consola: Registo com especificadores num novo separador ou janela.

2. Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

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

   O primeiro exemplo demonstra que a ordem de substituição dos especificadores de formato é a ordem dos parâmetros a seguir à cadeia:

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

3. Clique nos triângulos do expansor nos resultados de saída para expandir os dados que são exportados pelas instruções acima log apresentadas na página Web.

4. Se necessário, prima F5 para recarregar a página e preencher novamente a saída da Consola .

   Os especificadores de formato são utilizados para registar, formatar e converter valores:

   

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

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

   

Agrupar mensagens de registo

Se registar muitas informações, pode utilizar os group métodos e groupCollapsed para apresentar mensagens de registo como grupos expansíveis e minimizáveis na Consola. Os grupos podem ser aninhados e nomeados para facilitar a compreensão dos dados.

Código de exemplo para agrupar mensagens de registo

// 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 Web de demonstração para agrupar mensagens de registo

1. Abra a página de demonstração Exemplos de mensagens da consola: Agrupar registos num novo separador ou janela.

2. Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

   O DevTools é aberto, com a Consola aberta na Barra de Atividade. A página Web já preencheu a Consola com saída, registando muitos valores como grupos:

   

3. No resultado da Consola , expanda ou feche as secções:

   

Apresentar dados como tabelas

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

Código de exemplo para apresentar 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 Web de demonstração produz as primeiras quatro console saídas, com quatro números de linha apresentados no lado direito da Consola.

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

Para mostrar dados complexos como tabelas:

1. Abra a página de demonstração Exemplos de mensagens da consola: Utilizar a tabela numa nova janela ou separador.

2. Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS).

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

3. Na Consola, clique nos triângulos do expansor.

   Os dados são produzidos através console.tablede , o que torna os dados mais fáceis de ler:

   

A saída de tem um formato de console.table tabela. Se copiar e colar uma tabela da Consola numa aplicação que suporte dados tabulares, como o Microsoft Excel ou o Microsoft Word, a estruturação da saída como linhas e colunas é preservada.

Especificar uma matriz de propriedades a apresentar como colunas

Se os dados tiverem parâmetros nomeados, o console.table() método também lhe permite especificar uma Array das colunas para cada propriedade apresentar como segundo parâmetro. O exemplo seguinte mostra como especificar uma matriz de colunas que é mais legível:

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

1. Como exportar 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'])

Este código produz as duas console saídas finais, com dois números de linha apresentados no lado direito da Consola:

• 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 apresenta, ao especificar uma matriz de propriedades a apresentar, como segundo parâmetro.

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

Poderá sentir-se tentado a utilizar os métodos como principal log meio para depurar páginas Web, uma vez que os métodos de registo são simples de utilizar. No entanto, considere o resultado de qualquer console.log() pedido: os produtos lançados não devem utilizar nenhuma log instrução que tenha sido utilizada para depuração, uma vez que podem revelar informações privilegiadas às pessoas. Além disso, o excesso de ruído é criado na Consola do .

Assim, em vez de log instruções, experimente utilizar a Depuração do Ponto de Interrupção ou expressões dinâmicas. Poderá considerar que os fluxos de trabalho são mais eficazes e obter melhores resultados.

Confira também

• Referência da API de objeto da consola