Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

December 24, 2021 05:13 pm GMT

No todo es console.log()

Cuando empezamos a programar en JavaScript, una de las primeras cosas que aprendemos a hacer es imprimir por consola.
Para esto, nos ensean el console.log(), el cual nos permite mostrar el mensaje que queramos al ejecutar nuestro cdigo, sea en el navegador o en la terminal que utilicemos.

Sin embargo, la clase console no est limitada a este nico comando, ya que posee varias alternativas y funcionalidades que nos pueden resultar tiles a la hora de debuggear nuestra aplicacin.

Este artculo pretende ser una pequea gua sobre estos mtodos, para tener a mano en caso de que necesitemos algo un poco mas especfico que simplemente mostrar algo por pantalla.

Si tienen ganas de estudiar ms a fondo la clase console, y que ocurre por detrs, pueden ver la Console API, la especificacin sobre console a la cual los motores de JavaScript se han adaptado para proveer funcionalidades similares.

assert()

Con este mtodo, especificaremos una condicin, la cual en caso de ser falsa, mostrar un mensaje por consola.

let isActive = false;let isActiveAgain = true;console.assert(isActive,'Usuario deshabilitado');console.assert(isActiveAgain,'Usuario deshabilitado!!!');-----------------------------------------------------cbonomo@usuario-ThinkPad-X1-Carbon-Gen-8:~/Javascript/01-fundamentos$ node console.js Assertion failed: Usuario deshabilitado

clear()

Este mtodo simplemente limpar la consola en caso de que podamos hacerlo, es otro de los comandos que aprendemos al comienzo.

count()

Este mtodo loguear la cantidad de veces que realicemos una llamada a count(), util en caso de que necesitemos establecer un contador para evaluar cuantas veces utilizamos una funcin.

let user = "";function saludar() {    console.count(user);    return "hola " + user;}user = "Cristian";saludar();user = "Sol";saludar();saludar();------------------------------cbonomo@usuario-ThinkPad-X1-Carbon-Gen-8:~/Javascript/01-fundamentos$ node console.js Cristian: 1Sol: 1Sol: 2

countReset()

con countReset() podemos resetear la cuenta de count()

let user = "";function saludar() {    console.count(user);    return "hola " + user;}user = "Cristian";saludar();user = "Sol";saludar();saludar();console.countReset(user); //resetea a 0 el indice Solsaludar();------------------------------------------------------cbonomo@usuario-ThinkPad-X1-Carbon-Gen-8:~/Cursos/Javascript/01-fundamentos$ node console.js Cristian: 1Sol: 1Sol: 2Sol: 1

debug()

imprime un mensaje en la consola a nivel de debug, el cual sera solo mostrado si la consola esta configurada para mostrar esta salida. En la consola de Google Chrome, por ejemplo, solo se vera si activamos la opcion Verbose en los Default Levels, en Node se muestra por defecto.

console.debug('Error printing data');

dir()

Mediante dir(), podemos mostrar una lista interactiva de propiedades de un objeto JavaScript. Es un mtodo bastante til para poder ver las propiedades de un objeto.

console.dir(console);--------------------------Object [console] {  log: [Function: log],  warn: [Function: warn],  dir: [Function: dir],  time: [Function: time],  timeEnd: [Function: timeEnd],  timeLog: [Function: timeLog],  trace: [Function: trace],  assert: [Function: assert],  clear: [Function: clear],  count: [Function: count],  countReset: [Function: countReset],  group: [Function: group],  groupEnd: [Function: groupEnd],  table: [Function: table],  debug: [Function: debug],  info: [Function: info],  dirxml: [Function: dirxml],  error: [Function: error],  groupCollapsed: [Function: groupCollapsed],  Console: [Function: Console],  profile: [Function: profile],  profileEnd: [Function: profileEnd],  timeStamp: [Function: timeStamp],  context: [Function: context]}

dirxml()

Muestra la misma informacin que dir, pero en formato XML.

error()

Este mtodo nos permite mostrar un mensaje de error en la consola. A simple vista, puede parecernos igual a console.log(), pero la diferencia es que mientras console.log() escribe mediante stdout, console.error() escribe a stderr, lo que nos permite utilizarlos de manera diferente. Les recomiendo correr este cdigo en Node y en la consola de Chrome para ver la diferencia de manejo.

console.error('Error reading data');

group() y groupEnd()

este mtodo nos permite crear indentaciones en nuestros logs, mediante agrupaciones. Utilizaremos group() para abrir un nivel y groupEnd() para cerrarlo.

console.log('Nivel base');console.group();console.log('Nivel 1');console.group();console.log('Nivel 2');console.group();console.log('Nivel 3');console.groupEnd();console.log('Nivel 2');console.groupEnd();console.log('Nivel 1');console.groupEnd();---------------------------Nivel base  Nivel 1    Nivel 2      Nivel 3    Nivel 2  Nivel 1

groupCollapsed()

Este mtodo nos permite crear un grupo desplegable, el cual al imprimirse por consola nos permitir abrirlo y cerrarlo. Recomiendo probar esta funcionalidad en la consola del navegador.

console.log('Nivel base');console.groupCollapsed('Ver ms');console.log('Nivel 1');console.group();console.log('Nivel 2');console.group();console.log('Nivel 3');console.groupEnd();console.log('Nivel 2');console.groupEnd();console.log('Nivel 1');console.groupEnd();-----------------------------Nivel baseVM64:2 Ver msVM64:3 Nivel 1VM64:4 console.groupVM64:5 Nivel 2VM64:6 console.groupVM64:7 Nivel 3VM64:9 Nivel 2VM64:11 Nivel 1

info()

Este mtodo muestra como salida un mensaje de informacin a la consola. Normalmente, aparece un icono con una 'i' para indicar esto.

console.info('Este es un mensaje informativo');VM154:1 Este es un mensaje informativo

log()

Como hablamos al comienzo, uno de los primeros mtodos que aprendemos. Veamos algunas funciones extra que tiene.

Podemos utilizar sustituciones dentro del string, para imprimir determinados tipos de valores.

let celular = {    codArea: 54,    prefijo: 11,    numero: 12345687};let duracion = 5.6;for (let i = 0; i < 5; i++) {    console.log("Hola, %s, este es el mensaje nmero %d al telfono %o, con una duracin de %f segundos", "Cristian",i+1, celular, duracion);}--------------------------------------Hola, Cristian, este es el mensaje nmero 1 al telfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duracin de 5.6 segundosHola, Cristian, este es el mensaje nmero 2 al telfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duracin de 5.6 segundosHola, Cristian, este es el mensaje nmero 3 al telfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duracin de 5.6 segundosHola, Cristian, este es el mensaje nmero 4 al telfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duracin de 5.6 segundosHola, Cristian, este es el mensaje nmero 5 al telfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duracin de 5.6 segundos

Otra funcionalidad interesante es dar estilos a nuestros mensajes. Podemos aplicar estilos a nuestra salida de consola para que sea mas atractiva, o segn lo que deseemos resaltar.
Tenemos dos formas de realizar esto segn donde mostraremos nuestro mensaje.

//navegadorconsole.log("%cError detectado","color: yellow; font-style: italic; background-color: black");//nodeconsole.log('\x1b[31m%s\x1b[0m', 'Error detectado');

Nota: en el caso de Node, existen paquetes como colors para simplificarnos la tarea.

table()

este mtodo nos permite imprimir una tabla con valores por consola. Debemos pasarle por argumento un array o un objeto

const persona = {    nombre: 'Cristian',    apellido: 'Bonomo'};console.table(persona);const lenguajes = ['Javascript','PHP','Java','Python'];console.table(lenguajes);---------------------------------- (index)     Values     nombre   'Cristian'  apellido   'Bonomo'   (index)     Values        0     'Javascript'     1        'PHP'         2        'Java'        3       'Python'

time()

Este mtodo nos permite registrar cuanto tiempo puede tomar una operacin en especfico. Vamos a utilizarlo en conjunto con timeLog(), el cual nos permite ver el valor actual de un timer previamente inicializado, y timeEnd(), el cual frena el timer.
Para este caso, voy a simular una funcin init(), que solo realizara un conteo, pero tambin podra ser una mtrica de cuanto tiempo toma el sistema para inicializar, o responder a una peticin.

function init() {    let count = 0;    for (let i = 0; i < 100; i++) {        count++;    }}console.time('init');init();console.timeLog('init');init();console.timeEnd('init');--------------------------------------init: 0.092msinit: 0.276ms

trace()

Este mtodo nos permite realizar un trace sobre las funciones llamadas hasta el punto en que llamamos a trace()

function funcionUno() {    function funcionDos() {        console.trace();    }    funcionDos();}funcionUno();Trace    at funcionDos (/home/cbonomo/Javascript/01-fundamentos/console.js:133:17)    at funcionUno (/home/cbonomo/Javascript/01-fundamentos/console.js:135:5)    at Object.<anonymous> (/home/cbonomo/Cursos/Javascript/01-fundamentos/console.js:138:1)    at Module._compile (node:internal/modules/cjs/loader:1095:14)    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)    at Module.load (node:internal/modules/cjs/loader:975:32)    at Function.Module._load (node:internal/modules/cjs/loader:822:12)    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)    at node:internal/main/run_main_module:17:47

warn()

Este mtodo nos permite mostrar un mensaje de alerta en la consola web. En esta consola, nos mostrar el mensaje junto con el smbolo amarillo de warning.

console.warn('Este es un mensaje de alerta');

As, llegamos al final de este repaso por los mtodos que nos ofrece la clase console(), espero les sea de utilidad a la hora de programar, para mostrar mejores mensajes por consola y poder implementar mas fcilmente las soluciones que necesiten en su desarrollo.

Hasta la prxima!

Original Link: https://dev.to/cristianbonomo/no-todo-es-consolelog-31hk

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To