JS: Consola

La consola de JavaScript es una de las herramientas más usadas y, al mismo tiempo, una de las más subestimadas. Se trata de un objeto global que cuenta con un gran abanico de posibilidades: contiene varios métodos pensados para la inspección, el diagnóstico y la depuración de aplicaciones.

Esta herramienta ofrece una gran versatilidad porque puede usarse tanto en los navegadores web (Chrome, Firefox, Edge o Safari) como en los entornos de ejecución más modernos (Node.js o Deno). Uno de sus métodos más usados es console.log(), ya que permite mostrar información en pantalla.

Lista de métodos de console:

Uso de la consola

El objeto console está disponible de forma nativa: no necesita ser importado ni instanciado. En los navegadores web forma parte del objeto global window, mientras que en entornos como Node.js o Deno pertenece a global. En ambos casos, podemos usarlo de forma directa, sin ninguna configuración adicional y sin la necesidad de tener que indicar el objeto al que pertenecen.

En los navegadores web, estas sentencias son equivalentes:

window.console.log();
console.log();

Y en Node.js o Deno ocurre lo mismo:

global.console.log();
console.log();

Sintaxis

La sintaxis básica de la consola para acceder a sus métodos es muy sencilla. Bastará con escribir el término console seguido de un punto, el nombre del método y, finalmente, los paréntesis del método.

Esta es su sintaxis:

console.nombreMetodo();

Ejemplos:

console.log();
console.error();
console.warn();
console.info();

Dentro de los paréntesis del método se indica uno o varios parámetros, ya sea especificándolo de forma directa o usando un identificador, como puede ser el nombre de una variable, una constante o una función.

El método ‘console.log()’

En la mayoría de los lenguajes de programación, lo primero que solemos hacer es imprimir algo en pantalla para confirmar que todo funciona. En el caso de JavaScript, es tan sencillo como usar el método console.log().

Por ejemplo, usando una cadena de texto:

console.log('Hola');

Ejemplo con una variable:

let valor1 = 4;
let valor2 = 5;
let resultado = 4 * 5;

console.log(resultado); // 20

Este ejemplo devuelve el valor 20 como resultado, que se podrá ver tanto en la consola del navegador como en la terminal.

La gran utilidad de este método es poder comprobar o verificar el valor de una variable o el retorno de una función en el momento más conveniente. De esta forma, el desarrollador puede estar controlando el flujo del programa.

Este método admite:

• Múltiples parámetros
• Sustitución de valores
• Estilos personalizados

El método ‘console.error()’

El método console.error() permite mostrar mensajes de error en la consola. En el navegador web, el mensaje se muestra en color rojo y se acompaña de un icono de error, que puede variar según el navegador. En un entorno de ejecución como Node.js, el texto se ve normal pero se escribe en la salida stderr.

Por ejemplo:

console.error('Mensaje de error');

Al escribirse en el canal de salida stderr, los mensajes de error no se mezclan con los mensajes del canal de salida stdout. Esto es útil, sobre todo, cuando se redirige la salida del programa a un archivo u otro proceso.

Este método admite:

• Múltiples parámetros
• Sustitución de valores
• Estilos personalizados

El método ‘console.warn()’

El método console.warn() es utilizado para mostrar mensajes de advertencia en la consola. En los navegadores web, el mensaje aparece de color naranja y se acompaña de un icono de advertencia. Generalmente, este icono es un triángulo amarillo acompañado de un signo de exclamación «!».

Por ejemplo:

console.warn('Mensaje de advertencia');

Este método admite:

• Múltiples parámetros
• Sustitución de valores
• Estilos personalizados

El método ‘console.info()’

El método console.info() es muy parecido a console.log(), aunque es usado para mostrar un mensaje informativo. En la consola de los navegadores web, el texto va acompañado de un pequeño icono con la letra «i».

Por ejemplo:

console.info('Mensaje informativo');

Este método admite:

• Múltiples parámetros
• Sustitución de valores
• Estilos personalizados

El método ‘console.debug()’

El método console.debug() permite mostrar mensajes de depuración, que solo serán visibles si la consola del navegador está configurada para mostrarlos. Al igual que los métodos anteriores, este también admite múltiples parámetros.

Por ejemplo:

console.debug('Mensaje de depuración');

Este método admite:

• Múltiples parámetros
• Sustitución de valores
• Estilos personalizados

El método ‘console.table()’

El método console.table() permite mostrar datos en formato tabular, es decir, en una tabla. Este método requiere un parámetro obligatorio, llamado data, que debe ser un array o un objeto. Se puede indicar un parámetro opcional, llamado columns, para indicar un subconjunto de columnas a mostrar.

Por ejemplo:

let elTiempo = [
  {ciudad: 'Barcelona', temp: 23.5},
  {ciudad: 'Valencia', temp: 22}
];

console.table(elTiempo, ["ciudad", "temp"]);

Resultado:

El método ‘console.group()’

El método console.group() permite agrupar mensajes y sirve de apertura de grupo. Para el cierre del grupo se usa el método console.groupEnd(). Todos los mensajes que queden dentro de estos dos métodos de agrupación quedarán alineados un renglón más adentro que los otros.

De forma opcional, se puede añadir un parámetro al método console.group() para etiquetar el grupo. Este parámetro debe ser una cadena de texto. En cambio, el método console.groupEnd() no admite ningún parámetro.

Vamos a crear un ejemplo para entenderlo de una forma más visual.

console.group('Mensajes de salida');
console.log('Primer mensaje');
console.log('Segundo mensaje');
console.log('Tercer mensaje');
console.groupEnd();

Resultado:

Mensajes de salida
  Primer mensaje
  Segundo mensaje
  Tercer mensaje

El método ‘console.time()’

El método console.time() permite inicializar un contador de tiempo para realizar el seguimiento de una operación y sirve como comando de apertura. Para indicar el final del temporizador debe usarse el método console.timeEnd(). Se contará el tiempo de ejecución del código que quede entre ambos.

Además, de forma opcional puede usarse el método console.timeLog() para capturar el tiempo en un punto intermedio que quede entre los métodos de apertura y de cierre. Este método puede usarse tantas veces como sea necesario y funciona tanto en los navegadores web como en Deno, pero no en Node.js.

Como parámetro, los tres métodos admiten de forma opcional una etiqueta que permitirá identificar el temporizador. El nombre del temporizador debe ser el mismo en los tres métodos para que queden vinculados entre ellos.

Por ejemplo:

console.time('Contador');
console.log('Muestra un mensaje');
console.timeLog('Contador');
console.log('Muestra otro');
console.timeEnd('Contador');

Resultado:

Muestra un mensaje
Contador: 0.2041015625 ms
Muestra otro
Contador: 0.43701171875 ms

El método ‘console.clear()’

El método console.clear() es utilizado para eliminar o limpiar los mensajes anteriores. Este método funcionará tanto en una consola gráfica (navegadores web) como en una terminal, usando el modo interactivo de Node.js. No admite parámetros, así que su uso es el más sencillo de todos.

Por ejemplo:

console.clear();

Múltiples parámetros

Algunos métodos de console admiten múltiples parámetros, separados mediante una coma. Como resultado, se imprimirán separados con un espacio. Puede ser útil para añadir texto informativo que acompañe al valor. Los métodos que admiten esta funcionalidad son log, error, warn, info y debug.

Por ejemplo:

let valor = 25;
console.log('El valor es', valor);

Resultado:

El valor es 25

Sustitución de valores

El método console.log() también admite la sustitución de valores en cadena de texto. Para ello, se usan unos marcadores de posición (placeholders) que se reemplazan por los valores indicados a continuación, siguiendo el orden en que aparecen. Estos marcadores se basan en el tipo de dato.

Lista de marcadores:

• %s: cadenas de texto
• %d/%i: números enteros
• %f: números con decimales
• %o/%O: objetos

Por ejemplo:

let valor = 25;
let tipo = typeof valor;
console.log("El valor %d es un '%s'.", valor, tipo);

Resultado:

El valor 25 es un ‘number’.

En este ejemplo hemos usado el operador typeof para obtener el tipo de dato de la variable valor y lo hemos almacenado en la variable tipo.

Estilos personalizados

En los navegadores web también es posible aplicar estilos personalizados con CSS al resultado que se ve en la consola. Esto se consigue mediante el marcador (placeholder) %c. El texto situado antes del marcador no se verá afectado. Además, puede usarse varias veces en una misma cadena de texto.

Este tipo de estilos personalizados no funcionan en entornos de ejecución como Node.js o Deno, por lo que son exclusivos de los navegadores web.

Para indicar los estilos deseados se debe usar el marcador %c en la posición a partir de la cual vayamos a aplicar los estilos. Después, como nuevo parámetro, se indica una cadena de texto con una declaración CSS compuesta por una propiedad y un valor, siguiendo la sintaxis de CSS: propiedad: valor. Se indicará tantas declaraciones CSS como marcadores %c pongamos en el texto.

Veamos un ejemplo:

console.log(
  'Texto %cturquesa %cy %crojo',
  'color: teal',
  'color: inherit',
  'color: red'
);

Como podemos observar, hay tres marcadores %c y tres declaraciones CSS: una de color turquesa, otra sin color y, finalmente, otra para el rojo.

Resultado:

Texto turquesa y rojo.

Ahora el texto se ve con los colores deseados. También se puede indicar múltiples declaraciones CSS en el mismo parámetro. Por ejemplo, se puede cambiar el color de fondo, hacer el texto en negrita, en cursiva, etc.