Depurando variáveis complexas no JavaScript com console.table

Vamos conhecer um truque não padrão do JavaScript que ajuda e muito na depuração de variáveis complexas – o console.table.

Como exemplo, vamos imaginar que temos um vetor de objetos complexos:

var vetorObjetos = [
    {
        nome: "Paulo",
        idade: 30
    },
    {
        nome: "Cecilia",
        idade: 55
    }
];

Para imprimir o conteúdo deste vetor no console do navegador, usamos o bom e velho console.log, desta forma:

console.log(vetorObjetos);

E temos este resultado nos consoles dos navegadores (Firefox e Chrome, respectivamente):

 

Mas você sabia que há um jeito bem mais simples de ver o conteúdo de variáveis complexas nestes navegadores? Experimente usar console.table no lugar de console.log:

console.table(vetorObjetos);

Acredite, este é o resultado nos consoles dos navegadores!

E se os objetos que serão tabulados tiverem muitas propriedades, você ainda pode filtrar o comando para exibir apenas as propriedades desejadas, passando o nome dos parâmetros num vetor, desta forma:

console.table(vetorObjetos, ["nome"]);

E como resultado, nossa tabela só mostra a propriedade nome dos objetos!

 

Assim, conhecemos mais um ‘truque’ que facilita e muito a depuração de código JavaScript (não compatível com os navegadores da Microsoft).