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, {{domxref("Window")}} en el ámbito de navegación, {{domxref("WorkerGlobalScope")}}, y sus variantes especificas de worker.
Esta página documenta los {{anch("Métodos")}} disponibles en el objeto console y da algunos ejemplos de {{anch("uso")}}.
{{AvailableInWorkers}}
false."debug".
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.
error().groupEnd().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().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 {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} y {{domxref("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.
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})
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})
Gecko 9.0 {{geckoRelease("9.0")}} 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.
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");
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.
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í:
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):
Tener presente de que los nombres de los contadores son mostrados cuando el contador inicia y cuando es detenido (respectivamente).
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 {{domxref("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:
