Intro

O objeto console tem diversos métodos associados que fornecem acesso ao console de depuração do navegador, entre esses métodos o mais utilizado é o console.log, no entanto muitas vezes existem casos em que ele não é a melhor opção.

Imagine a situação em que você tenha que depurar uma lista de alunos, normalmente para essas situações usamos o console.log para visualizar os dados tipo:


alunos = [
{id: "0", nome: "Susan Banks", idade: "28", ra: "126236325", serie: "3"},
{id: "1", nome: "john Banks", idade: "37", ra: "456236325", serie: "2"},
{id: "2", nome: "Tedd Banks", idade: "17", ra: "166236325", serie: "1"}
]

console.table(alunos);

exemplo 3

o console.log irá lhe mostrar os dados no formato de arvore o que já é bastante útil no entanto muitas vezes leva muito tempo ter que ficar abrindo nó por nó para visualizar o dado desejado, seria bem mais simples se ao olhar no console do navegador já tivesse-mos toda a informação no formato de uma tabela com um visual agradável. Mas qual opção seria melhor?

Uma opção melhor para logar dados tabulares

Para esses fins temos o console.table que exibe qualquer dado que tenha um layout tabular (um array de array, array de objetos ou um objeto com objetos aninhados) em uma tabela.

funcionamento

O console.table recebe dois parâmetros o primeiro é o dado e o segundo um filtro com as colunas que devem ser exibidas, sendo que o segundo parâmetro não é obrigatório.
ex:


alunos = [
{id: "0", nome: "Susan Banks", idade: "28", ra: "126236325", serie: "3"},
{id: "1", nome: "john Banks", idade: "37", ra: "456236325", serie: "2"},
{id: "2", nome: "Tedd Banks", idade: "17", ra: "166236325", serie: "1"}
]

console.table(alunos);

exemplo 1

Filtrar os dados exibidos

Há ainda a possibilidade de especificar quais dados serão exibidos na tabela, isso é feito passando um array com os nomes das propriedades caso seja um objeto, ou os índices no caso de os dados exibidos serem um array.
ex:


// Usando com array
matriz = [ [1, 5, 6], [11, 15, 16] ]


// Exibindo todas colunas
console.table(matriz)

exibindo todos os dados


// Especificando quais colunas serão mostradas
console.table(matriz, [0, 2])

restringindo as colunas que serão exibidas


// Usando com um objeto
familia = {
mae: { primeiroNome: "Susan", ultimoNome: "Banks" ,idade: 28 },
pai: { primeiroNome: "john", ultimoNome: "Banks" ,idade: 37 },
filho: { primeiroNome: "Tedd", ultimoNome: "Banks" ,idade: 17 }
}


// Exibindo todas colunas
console.table(familia)

exibindo todas as colunas


// Especificando quais colunas serão mostradas
console.table(familia, ["primeiroNome", "idade"])

restringindo as colunas exibidas


// Caso você queira exibir somente uma coluna pode passar o nome da propriedade direto sem precisar usar um array literal
console.table(familia, "primeiroNome")

exibindo uma unica coluna

Classificar as colunas

ainda é possível classificar a tabela por uma coluna em particular, clicando no rotulo da coluna.

Suporte

Os navegadores que dão suporte ao console.table são somente o chrome, firefox e opera.

Referencia

mozilla