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 enseñan el console.log(), el cual nos permite mostrar el mensaje que queramos al ejecutar nuestro código, 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 aplicación.

Este artículo pretende ser una pequeña guía sobre estos métodos, para tener a mano en caso de que necesitemos algo un poco mas específico que simplemente mostrar algo por pantalla.

Si tienen ganas de estudiar más a fondo la clase console, y que ocurre por detrás, pueden ver la Console API, la especificación sobre console a la cual los motores de JavaScript se han adaptado para proveer funcionalidades similares.

assert()

Con este método, especificaremos una condición, 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 método simplemente limpíará la consola en caso de que podamos hacerlo, es otro de los comandos que aprendemos al comienzo.

count()

Este método 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 función.

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: 1
Sol: 1
Sol: 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 Sol
saludar();

------------------------------------------------------
cbonomo@usuario-ThinkPad-X1-Carbon-Gen-8:~/Cursos/Javascript/01-fundamentos$ node console.js 
Cristian: 1
Sol: 1
Sol: 2
Sol: 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 métodos de un objeto JavaScript. Es un método bastante útil para poder ver los métodos 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 información que dir, pero en formato XML.

error()

Este método 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 código en Node y en la consola de Chrome para ver la diferencia de manejo.

console.error('Error reading data');

group() y groupEnd()

este método 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 método 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 más');
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
VM64:2 Ver más
VM64:3 Nivel 1
VM64:4 console.group
VM64:5 Nivel 2
VM64:6 console.group
VM64:7 Nivel 3
VM64:9 Nivel 2
VM64:11 Nivel 1

info()

Este método muestra como salida un mensaje de información 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 métodos 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 número %d al teléfono %o, con una duración de %f segundos", "Cristian",i+1, celular, duracion);

}
--------------------------------------
Hola, Cristian, este es el mensaje número 1 al teléfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duración de 5.6 segundos
Hola, Cristian, este es el mensaje número 2 al teléfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duración de 5.6 segundos
Hola, Cristian, este es el mensaje número 3 al teléfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duración de 5.6 segundos
Hola, Cristian, este es el mensaje número 4 al teléfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duración de 5.6 segundos
Hola, Cristian, este es el mensaje número 5 al teléfono { codArea: 54, prefijo: 11, numero: 12345687 }, con una duración 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 según lo que deseemos resaltar.
Tenemos dos formas de realizar esto según donde mostraremos nuestro mensaje.

//navegador
console.log("%cError detectado","color: yellow; font-style: italic; background-color: black");

//node
console.log('\x1b[31m%s\x1b[0m', 'Error detectado');

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

table()

este método 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 método nos permite registrar cuanto tiempo puede tomar una operación en específico. 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 función init(), que solo realizara un conteo, pero también podría ser una métrica de cuanto tiempo toma el sistema para inicializar, o responder a una petición.

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.092ms
init: 0.276ms

trace()

Este método 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 método nos permite mostrar un mensaje de alerta en la consola web. En esta consola, nos mostrará el mensaje junto con el símbolo amarillo de warning.

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

Así, llegamos al final de este repaso por los métodos 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 fácilmente las soluciones que necesiten en su desarrollo.

Hasta la próxima!

Blog