](https://res.cloudinary.com/practicaldev/image/fetch/s--tpAJJQji--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2334/1%2AQVZFTh_70amHpzQvb8olng.png)
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") |
Veja no exemplo acima, em “ Outro exemplo ”, podemos testar se um objeto possui uma propriedade, e caso não tenha será nos alertado, caso contrario não mudara em nada e não poluirá nossos logs.
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> |
| const input = document.querySelector(".input-login") | |
| console.dir(input) |
Veja no exemplo acima, pela nossa objeto input podemos ver todas as propriedades dele através do console.dir(). Caso você tente usar console.log() nesse objeto, você vera impresso em seu console:
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}) |
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() |
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()) | |
Vendo os dois métodos, somar e subtrair, em somar recebe valores padrões em seus parâmetros e caso não for passado será apenas alertado quando não for passado mas continuara funcionando e retornara 0, já o método subtrair, não recebe valores padrões em seus parâmetros, então caso não for passado em sua chamada será exibido um Erro no console e não retornara nada.
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() |
Ao executar código, veja que no console você obterá a seguinte mensagem “Console was cleared”
Conclusão
Vemos que nem de console.log() pode viver um desenvolvedor Javascript. Espero que este conteúdo tenha agregado mais conhecimento.
Top comments (0)