5 trucos para sacarle el máximo partido a javascript console.log

Para un desarrollador web, el conocimiento del lenguaje JavaScript es de vital importancia. Aprender JavaScript es una de las etapas cruciales para un aspirante a desarrollador web, el popular lenguaje de scripting permite agregar funciones interactivas y otro contenido dinámico a las páginas web. La programación en JavaScript es intuitiva y relativamente simple, incluso para principiantes. Al ser la "capa final" de una aplicación web (después de HTML y CSS), es fundamental comprender cómo se relacionan estos tres lenguajes entre sí para generar una visualización óptima de la página web.

Programar en JavaScript también significa hacer el debug, la forma más fácil de hacerlo es usar el console.log. Este es un método en JS que muestra un mensaje en la consola del navegador. Esta consola no es un objeto de lenguaje JavaScript sino una variable global presente en todas las páginas cargadas en un navegador web. Su uso puede variar, permite visualizar el logging de eventos o cualquier error de una aplicación en JavaScript, precisamente para realizar la actividad de depuración y ayudar al programador.

Para interactuar con la consola, simplemente hay que llamar al método console.log() e inserta lo que deseas ver dentro de los corchetes (un evento, una variable, una llamada de método, etc.).

Veamos juntos 5 trucos para aprovechar al máximo la consola para programación JavaScript:

1. Nominar las variables registradas en el log – cuando se registran muchas variables, a veces se hace difícil saber cual corresponde a la ingresada en el console.log(), por ejemplo:

function sum(a, b) {
   console.log(b);
   return a + b;
}

sum(1, 2);

sum(4, 5);  

Ejecutando este código, en el registro solo verás una serie de números, sin entender cuál es la variable impresa. Para crear una asociación entre el valor ingresado en el registro y la variable, simplemente encierra el nombre de la variable entre llaves.

console.log({b})

2. Mejorar la visibilidad de los warning y de los errores – para mejorar la visibilidad de ciertos mensajes, puedes usar el método console.warn() que resaltará la cadena ingresada como un argumento sobre un fondo amarillo. Se puede hacer lo mismo con los registros de errores, pero con el método console.error(). En este caso el fondo sobre el que aparecerá el mensaje será de color rojo. Este tipo de acción permite al desarrollador web tener una visión más clara de lo que sucede en el código en tiempo de ejecución, mejorando la técnica de programación de JavaScript.
3. Customizar el log – la consola del navegador permite aplicar estilos al mensaje que se imprime en el registro. Para hacer esto, solo use la notación %c para el estilo CSS correspondiente que desea aplicar, por ejemplo:

console.log('%c Big message', 'font-size: 36px; font-weight: bold');

la notación %c aplica el estilo CSS especificado al mensaje que se mostrará.

4. Agrupar mensajes en el log – esta práctica es útil cuando se imprimen muchos mensajes diferentes en el log y deseas agrupar ciertos detalles relevantes. También será posible etiquetar claramente el origen de la información impresa.

console.group('User Details');
console.log('name: Sunil Sandhu');
console.log('position: Software Developer');
console.groupEnd();
console.group('Account');
console.log('Member Type: Premium Member');
console.log('Member Since: 2018');
console.log('Expiry Date: 20/12/2022')

;
8. console.groupEnd(

5. Limpiar la console – por "limpiar" nos referimos a eliminar los mensajes, errores y advertencias que se acumulan dentro de la consola cuando estás depurando o cuando quieres ver información específica. Para hacer esto, simplemente llama al método console.clear(). Vaciar el registro de todos los mensajes superfluos o desactualizados ayuda al desarrollador a aprender mejor y tener una visión más clara de lo que se está tratando de resolver.

Programar en JavaScript significa poder administrar el console.log() a favor de uno. Puede convertirse en una ventaja para el programador web, especialmente cuando se trata de aplicaciones web complejas, que tienen funciones complejas en su interior. A menudo, los programadores pasan por alto el uso del registro, pero es una característica muy poderosa, especialmente para el lenguaje JavaScript.

¡No olvides debuggare!