Console

Este articulo necesita una revisión editorial. Cómo puedes ayudar.

No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

El objeto Console provee acceso a la consola de depuración de los navegadores (e.j., 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 generalmente proporcionadas.

Console puede ser accedido desde cualquier método global, Window en el ámbito de navegación, WorkerGlobalScope, y sus variantes especificas de worker.

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

Nota: This feature is available in 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.count()
Registra el numero de veces que esta línea ha sido llamada con etiqueta dada.
Console.debug()
Es un alias de log(); fue adicionada para mejorar la compatibilidad con los sitios existentes que estaban utilizando debug(). Sin embargo, usted debe utilizar console.log().
Console.dir()
Muestra un listado interactivo de las propiedades de un objeto JavaScript específico. Esta lista le permite examinar el contenido de los objetos hijos.
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 cadena y argumentos adicionales con este método.
Console._exception()
Es un alias de 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 Web. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.
Console.log()
Para mensajes generales de registro de información. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.
Console.profile()
Inicia el registro de un perfil de rendimiento (Firefox performance tool). Se puede especificar un nombre opcional para el perfil.
Console.profileEnd()
Detiene el perfil. Usted puede revisar el perfil resultante en la herramienta de desempeño del navegador (por ejemplo, la herramienta de rendimiento de Firefox).
Console.table()
Muestra datos tabulares en forma de una tabla.
Console.time()
Inicia un temporizador con un nombre específico 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 segundos, desde su inicio.
Console.timeStamp()
Adiciona una marca a las herramientas TimelineWaterfall del navegador.
Console.trace()
Muestra una traza de error.
Console.warn()
Muestra un mensaje de advertencia. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.

Uso

Enviar texto a la consola

La característica mas utilizada de la consola es la de mostrar texto y otro datos. Existen cuatro categorías de salida que se pueden generar, utilizando los métodos console.log(), console.info(), console.warn() y console.error(). Cada uno de estos muestran resultados que se lucen diferentes en el registro y se pueden utilizar los controles de filtro proveidos 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 lisa de objetos de cadena (objectos strings) los cuales serán concatenados en una sola cadena, la cual se mostrará en la consola, o se puede ingresar una lista que contenga ninguna o mas sustituciones de cadena seguida por una lista de objetos con los cuales reemplazarlas.

Mostrando un solo objeto

La manera mas 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 vera 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:

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

La salida se verá parecido a esto:

[09:28:22.711] Mi primer carro fue un Dodge Charger . El objeto es:  ({str:"Algún texto", id:5})

Utilizando sustituciones de cadena

Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) introdujo soporte para sustituciones de cadena. Cuando se ingresa una caden a uno de los objetos de consola que acepta una cadena, es posible utilizar las siguientes sustituciones de cadena:

Sustitución de cadena Descripción
%o Muestra un hiper vinculo a un objeto JavaScript. Dando click en el link se abre un inspector.
%d or %i Muestra un entero. El formato de presentación aun no esta soportado.
%s Muestra una cadena.
%f Muestra un valor de punto flotante. El formato de presentación aun no esta soportado.

Cada uno de estos llama al siguiente argumento de un array declarado en los argumentos. Por ejemplo:

for (var i=0; i<5; i++) {
  console.log("Hola, %s. Usted me ha llamado %d veces.", "Bob", i+1);
}

La salida se verá parecido a esto:

[13:14:13.481] Hola, Bob. Usted me ha llamado me 1 veces.
[13:14:13.483] Hola, Bob. Usted me ha llamado 2 veces.
[13:14:13.485] Hola, Bob. Usted me ha llamado 3 veces.
[13:14:13.487] Hola, Bob. Usted me ha llamado 4 veces.
[13:14:13.488] Hola, Bob. Usted me ha llamado 5 veces.

Dando estilo a la salida de la consola.

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

console.log("%cMy stylish message", "color: red; font-style: italic");

Usando grupos en la consola

Requires Gecko 9.0(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

Puedes usar grupos anidades para ayudar a organizar la salida visualmente combinando material relacionado. Para crear un nuevo bloque anidado, se debe usar 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.

Nota: Grupos colapsados no están soportados en Gecko todavía,  el método groupCollapsed() es el mismo que group() en este momento.

Para editar el grupo actual, simplemente usa console.groupEnd().

Por ejemplo con el siguiente código:

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");

La salida se verá así:

nesting.png

Timers

Requires Gecko 10.0(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)

En orden para calcular la duración de una operación específica, Geco 10 introdujo soporte de contadores (timers del inglés) en el objeto console. Para iniciar un contador, usa el método console.time() , pasándole como parámetro un nombre. Para detener un contador, y obtener el tiempo transcurrido en milisegúndos, solo usa el método console.timeEnd(), nuevamente pasándole el nombre del contador como parámetro. Se pueden ejecutar hasta 10000 (diez mil) contadores simultáneamente en una página.

Por ejemplo, teniendo el siguiente código:

console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

Registrará el tiempo necesitado por el usuario para descartar el cuadro de alerta (alert box del inglés):

timerresult.png

Tener presente de que los nombres de los contadores son mostrados cuando el contador inicia y cuando es detenido (respectivamente).

Nota: Es importante saber que si estas usando esto para registrar el tiempo del trafico de red, el contador reportará el tiempo total para la transacción, mientras que el tiempo listado en el panel de conexiones o panel de red (network panel del inglés) es solo la cantidad de tiempo requerida para la cabecera (transaction header). Si en cambio tienes el registro de cuerpo hablitado (response body loggin del inglés), el tiempo listado para la respuesta de la cabecera y el cuerpo combinados debiera coincidir con lo que vez en la salida de la consola. 

Rastro de pilas (Stack traces)

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

foo();

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

La salida en la consola se verá como esto:

Especificación

Objeto API Console

Notas

  • Al menos en Firefox, si una página define un objeto console, este objeto sobreescribirá el construido en Firefox.
  • Anteriormente a Gecko 12.0, los métodos del objeto console solo funcionaban cuando la consola estaba abierta. Desde e iniciando con Gecko 12.0, la salida es almacenada (cacheada del inglés cached) hasta que la consola web es abierta, entonces se muestra en ese momento.
  • Vale la pena destacar que el objeto console construido por Firefox es compatible con el provisto por Firebug.

Ver tambien

Otras implementaciones

Etiquetas y colaboradores del documento

 Colaboradores en esta página: fcanellas, vlguerrero, chrisdavidmills
 Última actualización por: fcanellas,