17
Javascript: Indo além do console.log()

Se você desenvolve em Javascript, com certeza já deva ter usado muito o método log do objeto console. Porem, ele não e o único meto que este objeto possui, continue lendo para ver outros métodos que podem ser muito uteis.
assert
dir
table
time & timeEnd
warn & error
clear
Exibe uma mensagem caso a expressão passada resulte em falha. Sua mensagem pode ser tanto uma String, Array ou Objeto.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.assert(1 > 2, "Numero inferior a 2") // Ira exibir uma string 'Numero inferior a 2' | |
console.assert(1 > 2, { message:"Numero inferior a 2" }) // Ira exibir um objeto uma unica propriedade message | |
// Outro exemplo | |
const data = { name: "carlos", year: 20 } | |
console.assert(data.lastName, "Nao possui propriedade lastName") |
Detalhe, caso esteja usando Node.js, os efeitos são diferentes. Caso a expressão falhe, será gerado um AssertionError.
Exibe uma lista interativa das propriedades do objeto. Muito útil para analisarmos algum elemento HTML, checar propriedades.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<input type="text" class="input-login" /> | |
<script src="main.js" ></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const input = document.querySelector(".input-login") | |
console.dir(input) |

Com Dir teremos uma interação melhor:

Exibe dados em forma de tabela de um Objeto ou Array. muito útil para termos uma visão melhor e limpa dos dados do que apenas o console.log() nos mostra. Veja exemplo a seguir:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.table([25,30,48]) | |
console.table([[22,33],[11,55],[66,88]]) | |
console.table({name: "antonio", year: 55}) |
A iteração do Array simples temos a coluna de índice e outra com valor, ja um Array multidimensional temos mais colunas de acordo com sua dimensão, ja um Objeto temos suas Chaves e Valores bem claros a vista.
Iniciar um cronômetro com console.time() e finaliza apenas quando for chamado console.timeEnd(). Muito útil caso tenha um aparte do seu código que você deseja saber quanto tempo leva de execução. Veja exemplo a seguir:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.time() | |
for(let c = 0; c < 1000; c++){ | |
console.log(c) | |
} | |
console.timeEnd() |
No final da execução será exibido tempo que o Time foi aberto ate TimeEnd ser chamado.
Similar ao Log, porem Warn exibe uma mensagem de alerta e Error exibe uma mensagem de Erro. Muito útil para especificar quando e uma falha maleável e quando ocorrer um erro de fato. Veja exemplos:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function somar(a = 0, b = 0){ | |
if(!a && !b) console.warn("Cuidado, A e B nao informados") | |
return a + b | |
} | |
console.log(somar()) | |
function subtrair(a, b){ | |
if(!a && !b){ | |
console.error("Erro, A e B nao informados") | |
return ; | |
} | |
return a - b | |
} | |
console.log(subtrair()) | |

Por fim, o método Clear limpa o console, se o ambiente permitir.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
for(let c = 0; c < 10; c++){ | |
console.log(c) | |
} | |
console.clear() |
Vemos que nem de console.log() pode viver um desenvolvedor Javascript. Espero que este conteúdo tenha agregado mais conhecimento.
17