Console

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

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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

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 especifico. 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 especifico 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 salia; se puede ingresar una lisa de objetos de cadena los cuales serán concatenados en una sola cadena, la cual se mostrara 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 listandolos 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 vera 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 vera 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.

Styling console output

You can use the "%c" directive to apply a CSS style to console output:

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

Using groups in the console

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

You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call console.group(). The console.groupCollapsed() method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.

Note: Collapsed groups are not supported yet in Gecko; the groupCollapsed() method is the same as group() at this time.

To exit the current group, simply call console.groupEnd().

For example, given this code:

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");

The output looks like this:

nesting.png

Timers

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

In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the console object. To start a timer, call the console.time() method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the console.timeEnd() method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.

For example, given this code:

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

will log the time needed by the user to discard the alert box:

timerresult.png

Notice that the timer's name is displayed both when the timer is started and when it's stopped.

Note: It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.

Stack traces

The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call console.trace(). Given code like this:

foo();

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

The output in the console looks something like this:

Specification

Console Object API

Notes

  • At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.
  • Prior to Gecko 12.0, the console object's methods only work when the Web Console is open. Starting with Gecko 12.0, output is cached until the Web Console is opened, then displayed at that time.
  • It's worth noting that the Firefox's built-in console object is compatible with the one provided by Firebug.

See also

Other implementations

Etiquetas y colaboradores del documento

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