path: root/files/es/web/api/console/index.html

---
title: Console
slug: Web/API/Console
tags:
  - API
  - DOM
  - Debugging
  - Depuración
  - NeedsCompatTable
  - NeedsTranslation
  - Reference
  - TopicStub
  - consola web
  - web console
translation_of: Web/API/Console
---
<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>

<p>El objeto <code><strong>Console</strong> </code>provee acceso a la consola de depuración de los navegadores (e.j., la <a href="/en-US/docs/Tools/Web_Console">Consola Web</a> en Firefox). Los detalles de como funciona varían de navegador en navegador, pero hay un conjunto de características que <em>de facto</em> son generalmente proporcionadas.</p>

<p><code>Console </code>puede ser accedido desde cualquier método global, {{domxref("Window")}} en el ámbito de navegación, {{domxref("WorkerGlobalScope")}}, y sus variantes especificas de <code>worker</code>.</p>

<p>Esta página documenta los {{anch("Métodos")}} disponibles en el objeto <code>console </code>y da algunos ejemplos de {{anch("uso")}}.</p>

<p>{{AvailableInWorkers}}</p>

<h2 id="Métodos">Métodos</h2>

<dl>
 <dt>{{domxref("Console.assert()")}}</dt>
 <dd>Registra un mensaje y envía una traza de error a la consola si el primer argumento es <code>false</code>.</dd>
 <dt>{{domxref("Console.count()")}}</dt>
 <dd>Registra el numero de veces que esta línea ha sido llamada con etiqueta dada.</dd>
 <dt>{{domxref("Console.debug()")}} </dt>
 <dd>Registra un mensaje con el nivel de<code>"debug"</code>.
 <div class="note"><strong>Note</strong>: A partir de Chromium 58 este método solo aparece en las consolas de navegadores Chromium cuando el nivel "Verbose" está seleccionado.</div>
 </dd>
 <dt>{{domxref("Console.dir()")}}</dt>
 <dd>Muestra un listado interactivo de las propiedades de un objeto JavaScript específico. Esta lista le permite examinar el contenido de los objetos hijos.</dd>
 <dt>{{domxref("Console.dirxml()")}}</dt>
 <dd>
 <p>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.</p>
 </dd>
 <dt>{{domxref("Console.error()")}}</dt>
 <dd>Muestra un mensaje de error. Se pueden utilizar <a href="/en-US/docs/Web/API/console#Using_string_substitutions">sustituciones de cadena</a> y argumentos adicionales con este método.</dd>
 <dt>{{domxref("Console._exception()")}}</dt>
 <dd>Es un alias de <code>error()</code>.</dd>
 <dt>{{domxref("Console.group()")}}</dt>
 <dd>Crea un nuevo <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">grupo</a>, indentando todos los mensajes subsecuentes en un nuevo nivel. Para retroceder un nivel, se utiliza <code>groupEnd()</code>.</dd>
 <dt>{{domxref("Console.groupCollapsed()")}}</dt>
 <dd>Crea un nuevo <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">grupo</a>, indentando todos los mensajes subsecuentes en un nuevo nivel. A diferencia de <code>group()</code>, 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 <code>groupEnd()</code>.</dd>
 <dt>{{domxref("Console.groupEnd()")}}</dt>
 <dd>Finaliza el <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">grupo</a> actual.</dd>
 <dt>{{domxref("Console.info()")}}</dt>
 <dd>Muestra un mensaje de información en la <a href="/en-US/docs/Tools/Web_Console">Consola Web</a>. Se puede utilizar <a href="/en-US/docs/Web/API/console#Using_string_substitutions">sustitución de cadena</a> y argumentos adicionales con este método.</dd>
 <dt>{{domxref("Console.log()")}}</dt>
 <dd>Para mensajes generales de registro de información. Se puede utilizar <a href="/en-US/docs/Web/API/console#Using_string_substitutions">sustitución de cadena</a> y argumentos adicionales con este método.</dd>
 <dt>{{domxref("Console.profile()")}}</dt>
 <dd>Inicia el registro de un perfil de rendimiento (<a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). Se puede especificar un nombre opcional para el perfil.</dd>
 <dt>{{domxref("Console.profileEnd()")}}</dt>
 <dd>Detiene el perfil. Usted puede revisar el perfil resultante en la herramienta de desempeño del navegador (por ejemplo, la <a href="/en-US/docs/Tools/Performance">herramienta de rendimiento de Firefox</a>).</dd>
 <dt>{{domxref("Console.table()")}}</dt>
 <dd>Muestra datos tabulares en forma de una tabla.</dd>
 <dt>{{domxref("Console.time()")}}</dt>
 <dd>Inicia un <a href="/en-US/docs/Web/API/console#Timers">temporizador </a>con un nombre específico como parámetro. Hasta 10.000 temporizadores simultáneos pueden ejecutarse en una página determinada.</dd>
 <dt>{{domxref("Console.timeEnd()")}}</dt>
 <dd>Detiene el <a href="/en-US/docs/Web/API/console#Timers">temporizador</a> especificado y registra el tiempo transcurrido, en segundos, desde su inicio.</dd>
 <dt>{{domxref("Console.timeStamp()")}}</dt>
 <dd>Adiciona una marca a las herramientas <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> o <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> del navegador.</dd>
 <dt>{{domxref("Console.trace()")}}</dt>
 <dd>Muestra una <a href="/en-US/docs/Web/API/console#Stack_traces">traza de error</a>.</dd>
 <dt>{{domxref("Console.warn()")}}</dt>
 <dd>Muestra un mensaje de advertencia. Se puede utilizar <a href="/en-US/docs/Web/API/console#Using_string_substitutions">sustitución de cadena</a> y argumentos adicionales con este método.</dd>
</dl>

<h2 id="Usage" name="Usage">Uso</h2>

<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Enviar texto a la consola</h3>

<p>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.</p>

<p>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.</p>

<h4 id="Mostrando_un_solo_objeto">Mostrando un solo objeto</h4>

<p>La manera mas simple de utilizar los métodos de registro es mostrar un solo objeto:</p>

<pre class="brush: js">var someObject = { str: "Algún texto", id: 5 };
console.log(someObject);
</pre>

<p>La salida se vera parecido a esto:</p>

<pre>[09:27:13.475] ({str:"Algún texto", id:5})</pre>

<h4 id="Mostrando_múltiples_objetos">Mostrando múltiples objetos</h4>

<p>También se pueden mostrar múltiples objetos listándolos y luego llamando el método de registro, de esta forma:</p>

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

<p>La salida se verá parecido a esto:</p>

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

<h4 id="Utilizando_sustituciones_de_cadena">Utilizando sustituciones de cadena</h4>

<p>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:</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <td class="header">Sustitución de cadena</td>
   <td class="header">Descripción</td>
  </tr>
  <tr>
   <td>%o</td>
   <td>Muestra un hiper vinculo a un objeto JavaScript. Dando click en el link se abre un inspector.</td>
  </tr>
  <tr>
   <td>%d or %i</td>
   <td>Muestra un entero. El formato de presentación aun no esta soportado.</td>
  </tr>
  <tr>
   <td>%s</td>
   <td>Muestra una cadena.</td>
  </tr>
  <tr>
   <td>%f</td>
   <td>Muestra un valor de punto flotante. El formato de presentación aun no esta soportado.</td>
  </tr>
 </tbody>
</table>

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

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

<p>La salida se verá parecido a esto:</p>

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

<h4 id="Dando_estilo_a_la_salida_de_la_consola.">Dando estilo a la salida de la consola.</h4>

<p>Puedes usar la directiva <code>"%c" para aplicar un estilo </code>CSS a la salida de la consola:</p>

<pre class="brush: js">console.log("%cMy stylish message", "color: red; font-style: italic");</pre>

<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div>

<div>{{h3_gecko_minversion("Usando grupos en la consola", "9.0")}}</div>

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

<div class="note"><strong>Nota:</strong> Grupos colapsados no están soportados en Gecko todavía,  el método <code>groupCollapsed() es el mismo que </code><code>group()</code> en este momento.</div>

<p class="note">Para editar el grupo actual, simplemente usa <code>console.groupEnd()</code>.</p>

<p class="note">Por ejemplo con el siguiente código:</p>

<pre class="brush: js">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");
</pre>

<p>La salida se verá así:</p>

<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>

<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>

<p>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 <code>console.time</code><code>()</code> , pasándole como parámetro un nombre. Para detener un contador, y obtener el tiempo transcurrido en milisegúndos, solo usa el método <code>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.</code></p>

<p>Por ejemplo, teniendo el siguiente código:</p>

<pre class="brush: js">console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");
</pre>

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

<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>

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

<div class="note"><strong>Nota:</strong> 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. </div>

<h3 id="Rastro_de_pilas_(Stack_traces)">Rastro de pilas (Stack traces)</h3>

<p>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:</p>

<pre>foo();

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}
</pre>

<p>La salida en la consola se verá como esto:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7167/api-trace2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Specification" name="Specification">Especificación</h2>

<p><a href="https://github.com/DeveloperToolsWG/console-object/blob/master/api.md">Objeto API Console</a></p>

<h2 id="Notas">Notas</h2>

<ul>
 <li>Al menos en Firefox, si una página define un objeto console, este objeto sobreescribirá el construido en Firefox.</li>
 <li>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.</li>
 <li>Vale la pena destacar que el objeto console construido por Firefox es compatible con el provisto por <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
</ul>

<h2 id="Ver_tambien">Ver tambien</h2>

<ul>
 <li><a href="/en-US/docs/Tools">Herramientas</a></li>
 <li><a href="/en-US/docs/Tools/Web_Console">Consola Web</a> - como la consola web en Firefox maneja las llamadas a la API Console</li>
 <li><a href="/en-US/docs/Tools/Remote_Debugging">Depuración remota</a> - como ver la salida de la consola cuando el objetivo a depurar es un dispositivo móvil</li>
 <li><a href="/en-US/Firefox_OS/Using_the_App_Manager">Depuración de aplicaciones con Firefox OS</a> - usando el Gestor de Aplicaciones para depurar aplicaciones en ejecución en Firefox OS</li>
 <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">Registro de consola en el dispositivo (on-device)</a> - como registrar con la consola en dispositivos Firefox OS</li>
</ul>

<h3 id="Otras_implementaciones">Otras implementaciones</h3>

<ul>
 <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Herramientas para desarrolladores de Google Chrome</a></li>
 <li><a href="http://getfirebug.com/wiki/index.php/Console_API">Firebug</a></li>
 <li><a href="http://msdn.microsoft.com/en-us/library/hh772173(v=vs.85).aspx">Internet Explorer</a></li>
 <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html">Safari</a></li>
</ul>