Como exibir dados como uma tabela no console do navegador

Console é uma ferramenta integrada ao navegador que registra erros que ocorrem em sites. Se houver algum erro - como links quebrados, funções JavaScript incompletas ou propriedades CSS desconhecidas - o navegador exibirá mensagens de erro no Console.

Você também pode interagir com o Console por meio do shell e da API do Console, o que é útil para testar determinadas funções e dados de saída. Aqui, o artigo mostrará uma dica útil para usar a API do Console.

Acesse o console no navegador

No Chrome, você pode selecionar Visualizar > Desenvolvedor > Console JavaScript para exibir o Console. Além disso, você também pode usar o atalho de teclado: Cmd+ Option+ Jno OS X e Ctrl+ Shift+ Jno Windows.

Abaixo está um console do Chrome sem erros.

A partir daqui, você pode começar a usar os comandos fornecidos na API do Console.

Interaja com o console

Você pode interagir com o Console do seu navegador através do próprio Console e adicionando JavaScript. Por exemplo, aqui pedimos ao Console que produza o resultado "Bom dia!" digitando o comando console.log() diretamente no console:

Conforme mencionado, você também pode aplicar console.log(). Console.log() pode ser usado para testar uma instrução condicional JavaScript. Você pode ver mais claramente quando o resultado retorna verdadeiro ou falso (verdadeiro ou falso) com a ajuda de console.log().

Aqui está um exemplo:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

O código acima retornará verdadeiro, porque uma variável contém o número 1 . No Console, você verá o navegador gerar o texto com o conteúdo “true”.

Dados de saída em formato de tabela

Às vezes, você terá que processar um array de dados ou uma lista de objetos, conforme mostrado abaixo:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

Esses dados serão difíceis de ler quando usarmos o método console.log(). O método console.log() exibirá o Array em uma visualização em árvore recolhível, conforme mostrado abaixo.

Quando você tem que lidar com tal Array, usar console.table() é a melhor maneira de gerar dados. Este método exibe os dados em formato de tabela. Tomando os mesmos dados acima, o resultado aparecerá da seguinte forma:

O console do navegador ajuda os desenvolvedores da web a lidar com erros em sites. Os usuários também podem usá-lo para examinar a saída de dados, como acontece com o método console.log(). Quando você tem um array de dados, o comando console.table() é mais útil porque exibe o array em um formato de tabela fácil de ler. Observe que console.table() só é aplicável em navegadores baseados em Webkit, como Chrome, Safari e a versão mais recente do Opera.

Espero que você tenha sucesso.