Consola

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

El objeto console provee acceso a la consola de depuración de los navegadores (p. ej. la Consola Web en Firefox). Los detalles de como funciona varían de navegador en navegador, pero hay un conjunto de características que de facto son proporcionadas generalmente.

El objeto console puede ser accedido desde cualquier objeto global. Window en el ámbito de navegación y WorkerGlobalScope como variantes específicas de workers a través de la propiedad console. Está expuesto como Window.console, y puede ser referenciado como console. Por ejemplo:

js
console.log("Falló al abrir el enlace especificado");

Esta página documenta los Métodos disponibles en el objeto console y da algunos ejemplos de uso.

Nota: Esta característica está disponible en Web Workers.

Métodos

console.assert()

Registra un mensaje y envía una traza de error a la consola si el primer argumento es false.

console.clear()

Limpia la consola.

console.count()

Registra el número de veces que esta línea ha sido llamada con la etiqueta dada.

console.countReset()

Reinicia el valor del contador para la etiqueta dada.

console.debug()

Registra un mensaje con el nivel de debug.

console.dir()

Muestra un listado interactivo de las propiedades de un objeto JavaScript específico. Este listado permite usar triángulos de lista desplegables para examinar el contenido de objetos hijo.

console.dirxml()

Muestra una representación en forma de árbol de un elemento XML/HTML si es posible o la vista del objeto JavaScript si no es posible.

console.error()

Muestra un mensaje de error. Se pueden utilizar sustituciones de cadenas y argumentos adicionales con este método.

console.exception()

Un alias para error().

console.group()

Crea un nuevo grupo, indentando todos los mensajes subsecuentes en un nuevo nivel. Para retroceder un nivel, se utiliza groupEnd().

console.groupCollapsed()

Crea un nuevo grupo, indentando todos los mensajes subsecuentes en un nuevo nivel. A diferencia de group(), inicia con la línea de grupo colapsada, requiriendo el uso de un botón de apertura para expandir el grupo. Para retroceder un nivel, se utiliza groupEnd().

console.groupEnd()

Finaliza el grupo actual.

console.info()

Muestra un mensaje de información en la consola. Puedes usar sustituciones de cadenas y argumentos adicionales con este método.

console.log()

Para salida general de la información registrada. Puedes usar sustituciones de cadenas y argumentos adicionales con este método.

console.profile()

Inicia el profiler incluído del navegador (por ejemplo, la Firefox performance tool). Puedes especificar un nombre opcional para el perfil.

console.profileEnd()

Detiene el profiler. Puedes ver el resultado en la herramienta de rendimiento del navegador (por ejemplo, la Firefox performance tool).

console.table()

Muestra datos tabulares en forma de tabla.

console.time()

Inicia un temporizador con un nombre especificado como parámetro. Hasta 10 000 temporizadores simultáneos pueden ejecutarse en una página determinada.

console.timeEnd()

Detiene el temporizador especificado y registra el tiempo transcurrido en milisegundos desde que fue iniciado.

console.timeLog()

Muestra el valor del temporizador especificado en la consola.

console.timeStamp()

Agrega un marcador a las herramientas del navegador Chrome o Firefox.

console.trace()

Muestra una traza de pila.

console.warn()

Muestra un mensaje de advertencia. Puedes usar sustituciones de cadenas y argumentos adicionales con este método.

Ejemplos

Enviar texto a la consola

La característica más utilizada de la consola es la de mostrar texto y otros datos. Existen varias categorías de salida que se pueden generar, utilizando los métodos console.log(), console.info(), console.warn(), console.error() o console.debug(). Cada uno de estos muestran resultados que lucen diferente en el registro y se pueden utilizar los controles de filtro proveídos por el navegador para ver únicamente los tipos de salida de interés.

Hay dos maneras de usar cada uno de los métodos de salida; se puede ingresar una lista de objetos cuyas representaciones en cadena serán concatenadas en un único string, el cual se mostrará en la consola, o se puede ingresar una lista que contenga cero o más sustituciones de cadena seguida por una lista de objetos con los cuales reemplazarlas.

Mostrando un solo objeto

La manera más simple de utilizar los métodos de registro es mostrar un solo objeto:

js
var someObject = { str: "Algún texto", id: 5 };
console.log(someObject);

La salida se verá parecido a esto:

bash
[09:27:13.475] ({str:"Algún texto", id:5})

Mostrando múltiples objetos

También se pueden mostrar múltiples objetos listándolos y luego llamando el método de registro, de esta forma:

js
const car = "Dodge Charger";
const someObject = { str: "Algún texto", id: 5 };
console.info("Mi primer automóvil fue un ", car, ". El objeto es:", someObject);

La salida se verá parecido a esto:

bash
[09:28:22.711] Mi primer automóvil fue un Dodge Charger . El objeto es:: ({str:"Some text", id:5})

Usando sustituciones de cadenas

Cuando se pasa una cadena a uno de los métodos del objeto console que la acepta (como log()), puedes usar las siguientes sustituciones de cadena:

%o or %O

Muestra un objeto JavaScript. Haciendo clic sobre el nombre del objeto abre más información acerca del mismo en el inspector.

%d or %i

Muestra un entero. El formateo de números está soportado, por ejemplo console.log("Foo %.2d", 1.1) mostrará el número como los dos dígitos significativos con un cero adelante: Foo 01.

%s

Muestra una cadena.

%f

Muestra un valor de punto flotante. El formateo está soportado, por ejemplo console.log("Foo %.2f", 1.1) mostrará el número con dos decimales: Foo 1.10.

Nota: El formateo de precisión no funciona en Chrome.

Cada uno de ellos trae el siguiente argumento posterior a la cadena de la lista de parámetros. Por ejemplo:

js
for (let i = 0; i < 5; i++) {
  console.log("Hola, %s. Me has llamado %d veces.", "Bob", i + 1);
}

La salida se verá parecido a esto:

bash
[13:14:13.481] Hola, Bob. Me has llamado 1 veces.
[13:14:13.483] Hola, Bob. Me has llamado 2 veces.
[13:14:13.485] Hola, Bob. Me has llamado 3 veces.
[13:14:13.487] Hola, Bob. Me has llamado 4 veces.
[13:14:13.488] Hola, Bob. Me has llamado 5 veces.

Estilizando la salida de la consola

Puedes usar la directiva %c para aplicar un estilo CSS a la salida de la consola:

js
console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);

El texto previo a la directiva no se verá afectado, pero el texto posterior a la directiva será estilizado usando las declaraciones CSS en el parámetro.

Puedes usar %c varias veces:

js
console.log(
  "Varios estilos: %crojo %cnaranja",
  "color: red",
  "color: orange",
  "Mensaje adicional sin estilo",
);

Las propiedadas utilizables junto con la directiva %c son las siguientes (al menos, en Firefox - pueden variar en otros navegadores):

Nota: Los mensajes de consola se comportan como un elemento en línea por defecto. Para ver los efectos de padding, margin, etc. debes establecerlo como por ejemplo display: inline-block.

Usando grupos en la consola

Puedes usar grupos anidados para ayudar a organizar la salida visualmente combinando material relacionado. Para crear un nuevo bloque anidado, haz una llamada a console.group(). El método console.groupCollapsed() es similar, pero crea el nuevo bloque colapsado, requiriendo el uso de un "botón de mostrar" para abrirlo y leerlo.

Para salir del grupo actual, ejecuta console.groupEnd(). Por ejemplo, dado el siguiente código:

js
console.log("This is the outer level");
console.group("First group");
console.log("In the first group");
console.group("Second group");
console.log("In the second group");
console.warn("Still in the second group");
console.groupEnd();
console.log("Back to the first group");
console.groupEnd();
console.debug("Back to the outer level");

La salida se verá así:

Demostración de grupos anidados en la consola de Firefox

Temporizadores

Puedes inicializar un temporizador para calcular la duración de una operación específica. Para iniciar uno, llama al método console.time(), pasándole como único parámetro un nombre. Para detener un temporizador, y obtener el tiempo transcurrido en milisegundos, solo llama al método console.timeEnd(), nuevamente pasándole el nombre del contador como parámetro. Se pueden ejecutar hasta 10 000 temporizadores simultáneamente en una página.

Por ejemplo, dado este código:

js
console.time("answer time");
alert("Click to continue");
console.timeLog("answer time");
alert("Do a bunch of other stuff...");
console.timeEnd("answer time");

Registrará el tiempo necesitado por el usuario para descartar el cuadro de alerta, mostrará el tiempo en la consola, esperará a que el usuario descarte la segunda alerta, y luego registrará el tiempo de finalización a la consola:

Nótese que el nombre del temporizador es mostrado tanto cuando el temporizador es iniciado como cuando es detenido.

Nota: Es importante saber que si estas usando esto para registrar el tiempo del trafico de red, el temporizador reportará el tiempo total para la transacción, mientras que el tiempo listado en el panel de conexiones o panel de red es solo la cantidad de tiempo requerida para obtener la cabecera. Si en cambio tienes el registro de cuerpo (response body logging) habilitado, el tiempo listado para la respuesta de la cabecera y el cuerpo combinados debiera coincidir con lo que ves en la salida de la consola.

Trazas de pila

El objeto consola tambien soporta la salida de una traza de pila; esto te mostrará la ruta de llamadas tomadas hasta alcanzar el punto de tu llamada console.trace(). Dado un código como el siguiente:

js
function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

La salida en la consola se verá como esto:

Especificaciones

Specification
Console Standard
# console-namespace

Compatibilidad con navegadores

BCD tables only load in the browser

Notas

  • Al menos en Firefox, si una página define un objeto console, ese objeto sobrescribe el que viene incorporado en Firefox.

Véase también

Otras implementaciones