Consola

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() No estándar Obsoleto

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() No estándar

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

console.profileEnd() No estándar

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() No estándar

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.

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:

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

La salida se verá parecido a esto:

[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:

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:

[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.

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

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:

[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:

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:

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):

• background y sus variantes largas equivalentes
• border y sus variantes largas equivalentes
• border-radius
• box-decoration-break
• box-shadow
• clear y float
• color
• cursor
• display
• font y sus variantes largas equivalentes
• line-height
• margin
• outline y sus variantes largas equivalentes
• padding
• text-* propiedas como text-transform
• white-space
• word-spacing y word-break
• writing-mode

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:

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í:

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:

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.

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:

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

foo();

La salida en la consola se verá como esto:

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

• Herramientas de Desarrollo de Firefox
• Consola Web — como la consola Web en Firefox maneja las llamadas API de consola
• Depuración Remota — como ver la salida de consola cuando el objetivo de depuración es un dispositivo móvil

• Google Chrome DevTools
• Microsoft Edge DevTools
• Inspector Web Safari