consola en JavaScript

consola web

Una consola web es una herramienta que se utiliza principalmente para registrar información asociada con una página web como: requests de red, JavaScript, errores de seguridad, advertencias, CSS, etc. Nos permite interactuar con una página web mediante la ejecución de expresiones JavaScript en el contenido de la página. 
 

Objeto de consola

En JavaScript, la consola es un objeto que proporciona acceso a la consola de depuración del navegador. Podemos abrir una consola en el navegador web usando: Ctrl + Shift + I para Windows y Command + Option + K para Mac. El objeto de la consola nos proporciona varios métodos diferentes, como: 
 

• Iniciar sesión()
• error()
• advertir()
• clear()
• tiempo() y fin de tiempo()
• mesa()
• contar()
• grupo() y grupoEnd()
• registros de consola personalizados

Veamos todos estos métodos uno por uno. 
 

consola.log()

Se utiliza principalmente para registrar (imprimir) la salida en la consola. Podemos poner cualquier tipo dentro del log(), ya sea una string, una array, un objeto, un booleano, etc. 
 

// console.log() method
console.log('abc');
console.log(1);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3, 4]); // array inside log
console.log({a:1, b:2, c:3}); // object inside log

Producción: 
 

consola.error()

Este método se utiliza para registrar mensajes de error en la consola. Útil en las pruebas de código. De forma predeterminada, el mensaje de error se resaltará en color rojo. 
 

// console.error() method
console.error('This is a simple error');

Producción: 
 

consola.advertir()

Se utiliza para registrar un mensaje de advertencia en la consola. De forma predeterminada, el mensaje de advertencia se resaltará en color amarillo. 
 

// console.warn() method
console.warn('This is a warning.');

Producción: 
 

consola.clear()

Se utiliza para limpiar la consola. La consola se borrará, en el caso de Chrome, se imprimirá un texto superpuesto simple como: ‘La consola se borró’ mientras que en Firefox no se devuelve ningún mensaje. 
 

// console.clear() method
console.clear();

Producción: 
 

consola.tiempo() y consola.tiempoEnd()

Siempre que queramos saber la cantidad de tiempo empleado por un bloque o una función, podemos hacer uso de los métodos time() y timeEnd() proporcionados por el objeto de la consola de JavaScript. Toman una etiqueta que debe ser la misma, y ​​el código interno puede ser cualquier cosa (función, objeto, consola simple). 
 

// console.time() and console.timeEnd() method
console.time('abc');
 let fun =  function(){
     console.log('fun is running');
 }
 let fun2 = function(){
     console.log('fun2 is running..');
 }
 fun(); // calling fun();
 fun2(); // calling fun2();
console.timeEnd('abc');

En el fragmento de código anterior, podemos ver que la etiqueta es ‘abc’, que es la misma para el método time() y timeEnd(). Si aumentamos la cantidad de código dentro del bloque definido por estos métodos, el tiempo aumentará. También vale la pena recordar que el tiempo de regreso a la consola será en milisegundos y puede ser diferente cada vez que actualicemos la página. 
Producción: 
 

mesa de consola()

Este método nos permite generar una tabla dentro de una consola. La entrada debe ser una array o un objeto que se mostrará como una tabla. 
 

// console.table() method
console.table({'a':1, 'b':2});

Producción: 
 

consola.contar()

Este método se usa para contar el número que la función alcanzó con este método de conteo. 
 

// console.count() method
for(let i=0;i<5;i++){
    console.count(i);
}

producción: 
 

consola.grupo() y consola.grupoEnd()

Los métodos group() y groupEnd() del objeto de la consola nos permiten agrupar los contenidos en un bloque separado, que se sangrará. Al igual que time() y timeEnd(), también aceptan etiquetas, nuevamente con el mismo valor. 
 

// console.group() and console.groupEnd() method
console.group('simple');
  console.warn('warning!');
  console.error('error here');
  console.log('vivi vini vici');
console.groupEnd('simple');
console.log('new section');

Producción: 
 

Registros de consola personalizados

El usuario puede agregar estilo a los registros de la consola para personalizar los registros. La sintaxis para esto es agregar el estilo CSS como parámetro a los registros que reemplazarán a %c en los registros como se muestra en el ejemplo a continuación. 
 

// Custom Console log example
  const spacing = '10px';
  const styles =
        `padding: ${spacing}; background-color: white; color: green; font-style:
         italic; border: 1px solid black; font-size: 2em;`;
  console.log('%cGeeks for Geeks', styles);

Producción: 
 

Barra lateral de la consola

La barra lateral de la consola se usa para organizar los registros y brinda claridad en la experiencia de depuración. 
 

Después de filtrar errores solo usando la barra lateral de la consola: 
 

Después de filtrar las advertencias solo usando la barra lateral de la consola: 
 

Navegador compatible:

• Google Chrome
• Firefox
• explorador de Internet
• Ópera