path: root/files/pt-br/web/api/console/index.html

---
title: Console
slug: Web/API/Console
translation_of: Web/API/Console
---
<div>
<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
</div>

<p>O objeto <code>console</code> fornece acesso ao console de debug do navegador (por exemplo, o <a href="/en-US/docs/Tools/Web_Console">Web Console</a> do Firefox). O seu funcionamento específico varia de navegador para navegador, mas existe um conjunto de ferramentas que na prática são fornecidas normalmente.</p>

<p>Esta página documenta os {{anch("Métodos")}} disponíveis no objeto <code>console</code> e fornece alguns exemplos de {{anch("Uso")}}.</p>

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

<dl>
 <dt>{{domxref("console.assert()", "console.assert(expression, object[, object...])")}}</dt>
 <dd>Emite uma mensagem e traça a sequência de operações até o primeiro argumento for falso.</dd>
 <dt>{{domxref("console.count()", "console.count([label])")}}</dt>
 <dd>Mostra o número de vezes que esta linha foi chamada com a label fornecida.</dd>
 <dt>{{domxref("console.log()", "console.debug(object[, object...])")}} {{deprecated_inline("5.0")}}</dt>
 <dd>Um atalho para <code>log()</code>; que foi adicionado para melhorar a compatibilidade de páginas já existentes que utilizavam <code>debug()</code>. Porém, ao invés destes comandos você deve utilizar {{domxref("console.log()")}}.</dd>
 <dt>{{domxref("console.dir()", "console.dir(object)")}}</dt>
 <dd>Exibe uma listagem interativa das propriedades de um objeto JavaScript especificado. Esta listagem permite a você expandir o objeto para visualizar o conteúdo de objetos filhos.</dd>
 <dt>{{domxref("console.error()", "console.error(object[, object...])")}}</dt>
 <dd>Emite uma mensagem de erro<span>.</span> Você pode usar substituição de string e outros argumentos adicionais com este método. Consulte {{anch("Uso de substituição de string")}}.</dd>
 <dt>{{domxref("console.error()", "console.exception(object[, object...])")}}</dt>
 <dd>Um atalho para <code>error();</code></dd>
 <dt>{{domxref("console.group()", "console.group(object[, object...])")}}</dt>
 <dd>Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior. Para voltar um nível, utilize <code>groupEnd()</code>. Consulte {{anch("Uso de grupos no console")}}.</dd>
 <dt>{{domxref("console.groupCollapsed()", "console.groupCollapsed(object[, object...])")}}</dt>
 <dd>Cria um novo grupo em linha e recua todas as mensagens seguintes para um nível de indentação superior; ao contrário de <code>group()</code>, o grupo em linha começa recolhido. Para revelar seu conteúdo, basta clicar no botão de revelação para expandí-lo. Para recuar um nível, utilize <code>groupEnd().</code> Consulte {{anch("Uso de grupos no console")}}.</dd>
 <dt>{{domxref("console.groupEnd()")}}</dt>
 <dd>Sai do grupo em linha atual. Veja {{anch("Uso de grupos no console")}}.</dd>
 <dt>{{domxref("console.info()", "console.info(object[, object...])")}}</dt>
 <dd>Informações de registro. Você pode utilizar substituição de string e outros argumentos com este método. Consulte {{anch("Uso de substituição de string")}}.</dd>
 <dt>{{domxref("console.log()", "console.log(object[, object...])")}}</dt>
 <dd>Utilizado para a emissão de informações de registro em geral. Você pode utilizar substituição de string e outros argumentos com este método. Consulte {{anch("Uso de substituição de string")}}.</dd>
 <dt>{{domxref("console.profile()", "console.profile( [profileLabel] )")}}</dt>
 <dd>Inicia o <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>. Você pode especificar qualquer label opcional para o perfil.</dd>
 <dt>{{domxref("console.profileEnd()")}}</dt>
 <dd>Interrompe o profiler. Você pode ver o profile resultante no <a href="/en-US/docs/Tools/Profiler">JavaScript profiler</a>.</dd>
</dl>

<p> </p>

<dl>
 <dt>{{domxref("Console.table()")}}</dt>
 <dd>Exibe dados, como objeto e array, como uma tabela.</dd>
</dl>

<p> </p>

<dl>
 <dt>{{domxref("console.time()", "console.time(label)")}}</dt>
 <dd>Inicia um contador de tempo com o nome especificado no parâmetro <em>label</em>. Até 10.000 contadores de tempo podem ser rodados por página.</dd>
 <dt>{{domxref("console.timeEnd()", "console.timeEnd(label)")}}</dt>
 <dd>Interrompe o contador de tempo especificado e emite o tempo e registros do contador de tempo em milisegundos desde o seu início. Veja {{anch("Contadores de Tempo")}}.</dd>
 <dt>{{domxref("console.trace()")}}</dt>
 <dd>Emite um traçado de pilha. See {{anch("Traçados de pilha")}}.</dd>
 <dt>{{domxref("console.warn()", "console.warn(object[, object...])")}}</dt>
 <dd>Emite uma mensagem de alerta. Você pode utilizar substituição de string e argumentos adicionais com este método. Veja {{anch("Uso de substituição de string")}}.</dd>
</dl>


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

<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Output de texto para o console</h3>

<p>A utilização mais frequente do console é realizar o log de texto e de outros dados. Há quatro categorias de output que podem ser geradas, utilizando os métodos {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} e o {{domxref("console.error()")}}. Cada um destes resultam em outputs que possuem estilos diferentes no log, e você pode utilizar os controles de filtragem fornecidos pelo navegador para ver apenas os outputs que lhe interessam.</p>

<p>Há duas maneiros da utilizar cada um dos métodos de outuput. Você pode simplemente passar uma lista dos objetos cuja representação em string será concatenadas em uma string e então realizar o output  para o console, ou você pode passar uma string contendo zero ou mais substituições de strings seguidas por uma lista de objetos para serem utilizados na substituição.</p>

<h4 id="Output_de_um_único_objeto">Output de um único objeto</h4>

<p>A forma mais simples de utilizar os métodos de log é realizar o output de um único objeto:</p>

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

<p>O output vai se parecer como algo assim:</p>

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

<h4 id="Output_de_múltiplos_objetos">Output de múltiplos objetos</h4>

<p>Você também pode realizar o output de múltiplos objetos ao simplesmente listá-los ao chamar o método de log, desta forma:</p>

<pre class="brush: js">var carro = "Fusca";
var algumObjeto = {str:"Algum texto", id:5};
console.info("Meu primeiro carro era um ", carro, ". O objeto é: ", algumObjeto);</pre>

<p>O output será algo assim:</p>

<pre>[09:28:22.711] Meu primeiro carro era um Fusca. O objeto é:  ({str:"Algum texto", id:5})
</pre>

<h4 id="Uso_de_substituição_de_string">Uso de substituição de string</h4>

<p>O Gecko 9.0 {{geckoRelease("9.0")}} introduziu o suporte à substituição de strings. Ao fornecer uma string para um dos métodos do console que aceitam uma string, você pode utilizar estas strings de substituição:</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <td class="header">String de substituição</td>
   <td class="header">Descrição</td>
  </tr>
  <tr>
   <td>%o</td>
   <td>Emite um link para o objeto JavaScript. Clicar no link abre um inspetor.</td>
  </tr>
  <tr>
   <td>%d ou %i</td>
   <td>Emite uma numero inteiro. A formatação ainda não possui suporte.</td>
  </tr>
  <tr>
   <td>%s</td>
   <td>Emite uma string.</td>
  </tr>
  <tr>
   <td>%f</td>
   <td>Emite um número de ponto flutuante. A formatação ainda não possui suporte.</td>
  </tr>
 </tbody>
</table>

<p>Cada um destes puxam o próximo argumento na lista de parâmetros após a string fornecida inicialmente. Por exemplo:</p>

<pre>for (var i=0; i&lt;5; i++) {
  console.log("Olá, %s. Você me chamou pela %dª vez.", "João", i+1);
}
</pre>

<p>O output será algo assim:</p>

<pre>[13:14:13.481] Olá, João. Você me chamou pela 1ª vez.
[13:14:13.483] Olá, João. Você me chamou pela 2ª vez.
[13:14:13.485] Olá, João. Você me chamou pela 3ª vez.
[13:14:13.487] Olá, João. Você me chamou pela 4ª vez.
[13:14:13.488] Olá, João. Você me chamou pela 5ª vez.
</pre>

<h4 id="Estilizando_o_output_no_console">Estilizando o output no console</h4>

<p>You can use the <code>"%c"</code> directive to apply a CSS style to console output:</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("Using groups in the console", "9.0")}}</div>

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

<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div>

<p class="note">To exit the current group, simply call <code>console.groupEnd()</code>.</p>

<p class="note">For example, given this code:</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>The output looks like this:</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>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as only parameter. To stop the timer, and to get the elapsed time in miliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p>

<p>For example, given this code:</p>

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

<p>will log the time needed by the user to discard the alert box:</p>

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

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

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

<h3 id="Stack_traces">Stack traces</h3>

<p>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 {{domxref("console.trace()")}}. Given code like this:</p>

<pre>foo();

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

<p>The output in the console looks something like this:</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="Notes">Notes</h2>

<ul>
 <li>At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.</li>
 <li>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.</li>
 <li>It's worth noting that the Firefox's built-in <code>console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/">Firebug</a>.</li>
</ul>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li>
 <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> - how the Web Console in Firefox handles console API calls</li>
 <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> - how to see console output when the debugging target is a mobile device</li>
 <li><a href="/en-US/Firefox_OS/Using_the_App_Manager">Debugging apps on Firefox OS</a> - using the App Manager to debug apps running on Firefox OS</li>
 <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> - how to do logging on Firefox OS devices</li>
</ul>

<h3 id="Other_implementations">Other implementations</h3>

<p> </p>

<ul>
 <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api">Google Chrome DevTools</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>