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.

Índice

  • assert

  • dir

  • table

  • time & timeEnd

  • warn & error

  • clear

Assert

Exibe uma mensagem caso a expressão passada resulte em falha. Sua mensagem pode ser tanto uma String, Array ou Objeto.

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")
view raw main.js hosted with ❤ by GitHub

Detalhe, caso esteja usando Node.js, os efeitos são diferentes. Caso a expressão falhe, será gerado um AssertionError.

Dir

Exibe uma lista interativa das propriedades do objeto. Muito útil para analisarmos algum elemento HTML, checar propriedades.

<html>
<body>
<input type="text" class="input-login" />
<script src="main.js" ></script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
const input = document.querySelector(".input-login")
console.dir(input)
view raw main.js hosted with ❤ by GitHub

Com Dir teremos uma interação melhor:

Table

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:

console.table([25,30,48])
console.table([[22,33],[11,55],[66,88]])
console.table({name: "antonio", year: 55})
view raw main.js hosted with ❤ by GitHub

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.

Time & TimeEnd

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:

console.time()
for(let c = 0; c < 1000; c++){
console.log(c)
}
console.timeEnd()
view raw main.js hosted with ❤ by GitHub

No final da execução será exibido tempo que o Time foi aberto ate TimeEnd ser chamado.

Warn & Error

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:

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())
view raw main.js hosted with ❤ by GitHub

Clear

Por fim, o método Clear limpa o console, se o ambiente permitir.

for(let c = 0; c < 10; c++){
console.log(c)
}
console.clear()
view raw main.js hosted with ❤ by GitHub

Conclusão

Vemos que nem de console.log() pode viver um desenvolvedor Javascript. Espero que este conteúdo tenha agregado mais conhecimento.

17

This website collects cookies to deliver better user experience