11 nov 2015

Usando o console.table para depurar seus objetos

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:

1
2
3
4
5
6
7
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:

1
2
3
4
5
6
7
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:

1
2
// Usando com array
matriz = [ [1, 5, 6], [11, 15, 16] ]
1
2
// Exibindo todas colunas
console.table(matriz)

exibindo todos os dados

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

restringindo as colunas que serão exibidas

1
2
3
4
5
6
// 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 }
}
1
2
// Exibindo todas colunas
console.table(familia)

exibindo todas as colunas

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

restringindo as colunas exibidas

1
2
// 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

Marcos Ramos
About Marcos Ramos

front-end developer na empresa redspark.

Leave a Comment