--- title: Console slug: Web/API/Console translation_of: Web/API/Console ---
O objeto console
fornece acesso ao console de debug do navegador (por exemplo, o Web Console 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.
Esta página documenta os {{anch("Métodos")}} disponíveis no objeto console
e fornece alguns exemplos de {{anch("Uso")}}.
log()
; que foi adicionado para melhorar a compatibilidade de páginas já existentes que utilizavam debug()
. Porém, ao invés destes comandos você deve utilizar {{domxref("console.log()")}}.error();
groupEnd()
. Consulte {{anch("Uso de grupos no console")}}.group()
, 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 groupEnd().
Consulte {{anch("Uso de grupos no console")}}.
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.
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.
A forma mais simples de utilizar os métodos de log é realizar o output de um único objeto:
var algumObjeto = { str: "Algum texto", id: 5 }; console.log(algumObjeto);
O output vai se parecer como algo assim:
[09:27:13.475] ({str:"Algum texto", id:5})
Você também pode realizar o output de múltiplos objetos ao simplesmente listá-los ao chamar o método de log, desta forma:
var carro = "Fusca"; var algumObjeto = {str:"Algum texto", id:5}; console.info("Meu primeiro carro era um ", carro, ". O objeto é: ", algumObjeto);
O output será algo assim:
[09:28:22.711] Meu primeiro carro era um Fusca. O objeto é: ({str:"Algum texto", id:5})
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:
String de substituição | Descrição |
%o | Emite um link para o objeto JavaScript. Clicar no link abre um inspetor. |
%d ou %i | Emite uma numero inteiro. A formatação ainda não possui suporte. |
%s | Emite uma string. |
%f | Emite um número de ponto flutuante. A formatação ainda não possui suporte. |
Cada um destes puxam o próximo argumento na lista de parâmetros após a string fornecida inicialmente. Por exemplo:
for (var i=0; i<5; i++) { console.log("Olá, %s. Você me chamou pela %dª vez.", "João", i+1); }
O output será algo assim:
[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.
You can use the "%c"
directive to apply a CSS style to console output:
console.log("%cMy stylish message", "color: red; font-style: italic");
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.
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:
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 only parameter. To stop the timer, and to get the elapsed time in miliseconds, 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:
Notice that the timer's name is displayed both when the timer is started and when it's stopped.
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:
foo(); function foo() { function bar() { console.trace(); } bar(); }
The output in the console looks something like this:
console
object is compatible with the one provided by Firebug.