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.
javascript
// 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.
javascript
// 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.
javascript
// 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.
javascript
// 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).
javascript
// 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.
javascript
// 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.
javascript
// 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.
javascript
// 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.
javascript
// 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