DEV Community

Cover image for No todo es console.log()
Cristian Bonomo
Cristian Bonomo

Posted on • Edited on

No todo es console.log()

#javascript #node #programming #spanish

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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]
}
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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'   │
└─────────┴──────────────┘
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (3)

Collapse
 
acahuiche profile image
Alberto Cahuiche •

Te agradezco por la informacion, estaba acostumbrado solo a log o a lo mucho warn y error, pero no conocia por ejemplo table, dir o group, muy utiles, excelente aporte

Collapse
 
cristianbonomo profile image
Cristian Bonomo •

Gracias Alberto!!! tratare de ir subiendo más datos como estos.

Collapse
 
fsappdev profile image
fsappdev •

a ver si de una vez por todas dejo de joder con tanto consologismo y le doy un mejor uso al console...
buen articulo, se agradece...

Read next

04anilr profile image

What is new feature of React version19

Anil -

andrew_mclean_09 profile image

anyone wanna join me building my first app?(I'm a beginner bare with me)

Andrew Mclean -

blamsa0mine profile image

Build a Simple Chatbot with Svelte and ElizaBot

A0mineTV -

filipsobol profile image

Downsize your JavaScript: Mastering Bundler Optimizations

Filip Sobol -