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

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

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

Esta página documenta losMétodos disponibles en el objetoconsole y da algunos ejemplos deuso.

Métodos

console.assert()

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

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

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 utilizarsustituciones de cadenas y argumentos adicionales con este método.

console.exception()No estándarObsoleto

Un alias paraerror().

console.group()

Crea un nuevogrupo, indentando todos los mensajes subsecuentes en un nuevo nivel. Para retroceder un nivel, se utilizagroupEnd().

console.groupCollapsed()

Crea un nuevogrupo, indentando todos los mensajes subsecuentes en un nuevo nivel. A diferencia degroup(), 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 utilizagroupEnd().

console.groupEnd()

Finaliza elgrupo actual.

console.info()

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

console.log()

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

console.profile()No estándar

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

console.profileEnd()No estándar

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

console.table()

Muestra datos tabulares en forma de tabla.

console.time()

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

console.timeEnd()

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

console.timeLog()

Muestra el valor deltemporizador especificado en la consola.

console.timeStamp()No estándar

Agrega un marcador a las herramientas del navegadorChrome oFirefox.

console.trace()

Muestra unatraza de pila.

console.warn()

Muestra un mensaje de advertencia. Puedes usarsustituciones 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étodosconsole.log(),console.info(),console.warn(),console.error() oconsole.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 únicostring, 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 objetoconsole que la acepta (comolog()), 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 ejemploconsole.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 ejemploconsole.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 yfloat
• color
• cursor
• display
• font y sus variantes largas equivalentes
• line-height
• margin
• outline y sus variantes largas equivalentes
• padding
• text-* propiedas comotext-transform
• white-space
• word-spacing yword-break
• writing-mode

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 aconsole.group(). El métodoconsole.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, ejecutaconsole.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í:

Temporizadores

Puedes inicializar un temporizador para calcular la duración de una operación específica. Para iniciar uno, llama al métodoconsole.time(), pasándole como único parámetro un nombre. Para detener un temporizador, y obtener el tiempo transcurrido en milisegundos, solo llama al métodoconsole.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.

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 llamadaconsole.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:

Especificaciones

Compatibilidad con navegadores

Notas

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

Véase también

• 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

Otras implementaciones

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