Cuando estamos desarrollando un frontal web, hay ocasiones en las que necesitamos saber que valor tiene una variable o mostrar un mensaje sin que el usuario lo vea. Para ello, solemos usar el objeto console de JavaScript. Este objeto estático tiene diferentes métodos con los que mostraremos textos u objetos JSON en la consola del navegador.
console.log(text);
El método log del objeto console, nos permite añadir un texto sin formato a la consola del navegador. Suele ser útil cuando queremos mostrar el valor de una variable en un determinado momento.
console.info(text);
Muy similar al método anterior. Con este método se muestra un texto informativo en la consola.
console.warn(text);
Con warn mostrará el texto en formato de aviso. Dependiendo del navegador, se mostrará en un estilo y formato de aviso, normalmente amarillo-anaranjado y con un icono de advertencia.
console.error(text);
Este se suele usar para visualizar mensajes de error. Al igual que en el caso anterior, se mostrará con un estilo rojo e icono de error. En ocasiones, se suele utilizar para mostrar el mensaje de error real y por pantalla muestras un mensaje génerico de error.
console.table(jsonObj);
Table es un método al que se le puede pasar un objeto JSON y te lo formatea en una tabla.
console.assert(condición);
Si la condición es falsa, se mostrará un aviso en consola indicando que no es correcta. Por el contrario, si es verdadera, no se visualizará nada.
console.clear();
Con este comando borramos el texto que exista en la consola del navegador.
console.count();
Visualiza el número de veces por las que la ejecución ha pasado por esa sentencia.
console.dir(obj);
Te muestra el listado de propiedades del objeto.
var timer = console.time(); console.timeLog(timer); console.timeEnd();
Cuando usamos el método time() un contador empieza a contar el tiempo y te lo muestra cuando paras el contador usando el método timeEnd(). El método timeLog(timer) visualiza el tiempo cronometrado la variable timer.
console.trace(text);
Deja una traza del texto y te añade un vinculo para indicarte donde se ha lanzado ese comando.
console.group(); console.groupEnd();
Crea secciones dentro de la consola para realizar separaciones de información.
Formateadores
Se pueden aplicar estilos a las visualizaciones que hacemos con la clase console. Para ello, hay que añadir %c delante del texto que queremos formatear y establecer como segundo parámetro los estilos a aplicar.
console.log("%cHola, mundo!", "font-size:24pt; color: blue;");
Referencias
jsconsole -> Simula una consola con la que puedes probar los comandos anteriormente indicados.
console - Web APIs | MDN (mozilla.org) -> Información de los diferentes métodos que contiene la clase console de JavaScript.
El súper poder de console.log 🔥 💪 (youtube.com) -> Vídeo del canal Programación y más que me ha inspirado a realizar este post.
El súper poder de console log 🔥 JavaScript (programacionymas.com) -> Post con el código e imágenes de lo anteriormente explicado.
