Más allá del console.log

Hola amigos de la #nerdytud, espero que se encuentren bien

Hoy les comparto el uso de la api de JavaScript console, pero un paso más allá del famoso console.log

A veces simplemente necesitamos tener una salida de datos (o corroborar los mismos) y para ello utilizamos el console.log de la siguiente manera:

let foo = 'lorem ipsum';

console.log(foo);

También podemos mostrar en consola si hay una información, advertencia o error

let foo = 'lorem ipsum';

console.info(foo);

let foo = 'lorem ipsum';

console.warn(foo);

let foo = 'lorem ipsum';

console.error(foo);

let foo = 'lorem ipsum';

console.debug(foo);

Pero cuando tenemos dos (o más) variables, lo podemos utilizar de diferentes maneras

let foo = { id: 1, color: 'lorem' };
let bar = { id: 2, color: 'ipsum' };

console.log(foo);
console.log(bar);

o bien

console.log({foo, bar});

y mejor aún utilizando tabla

console.table({foo, bar});

Muchas veces poseemos datos de idéntico origen y podemos agruparlos

console.group('Detalles');
console.log('nombre: lorem');
console.log('edad: 32');
console.log('puesto: dev');
console.groupEnd();

En algunos casos en particular necesitamos ver el tiempo de ejecución

console.time("test loop");
for (i = 0; i < 50000; i++) {}
console.timeEnd("test loop");

Si necesitamos corroborar una condición

let isVisible = false

console.assert(isVisible, 'lorem ipsum')

Digamos que necesitamos customizar la salida

const foo = 'lorem ipsum';

const styles =  
    `padding: 2px; 
    background-color: tomato; 
    color: white; 
    border: 1px solid black; 
    font-size: 12pt;`; 

console.log(`%c${foo}`, styles);

Y por cierto si queremos limpiar de datos la consola

console.clear();