O console.dir separa o valor enviado como se fosse um vardump().
Exemplo:var arr = ["A","B","C"]; var obj = { X: '1', Y: '2', Z: '3' }; console.dir(arr); console.dir(obj);
O console.dirxml exibe um valor do tipo xml.
Exemplo:var parser = new DOMParser(); var xml = parser.parseFromString("<div><h3>Hello world.</h3></div>", "application/xml"); console.dirxml(xml);
O console.group exibe um grupo de debugs dentro da sua chamada, sendo usado em conjunto com o console.groupEnd
Exemplo:function authentication(name) { console.log('Limpando cache'); console.log('Autenticando como "%s"',name); console.error('Falha ao autenticar'); } console.group('Iniciando autenticação'); authentication('Jean'); console.groupEnd();
O console.groupCollapsed possui a mesma função do console.group, porém a diferença do groupCollapsed para o group é que o Collapsed mostra fechado, e o grupo já exibe todo aberto o detalhamento.
Exemplo:function authentication(name) { console.log('Limpando cache'); console.log('Autenticando como "%s"',name); console.error('Falha ao autenticar'); } console.groupCollapsed('Iniciando autenticação'); authentication('Jean'); console.groupEnd();
O console.log exibe uma mensagem no console do navegador. O que é interessante é que pode usar variáveis de substituição, aproveitando assim melhor esta função.
Abaixo segue os formatos para fazer a substituição:
Formato | Descrição |
---|---|
%s | Formato para valores do tipo String |
%d or %i | Formato para valores do tipo Integer |
%f | Formato para valores do tipo Float |
%o | Formato para valores do tipo DOM Elemento |
%O | Formato para valores do tipo Objeto Javascript |
%c | Formato para valores de saida do tipo CSS |
var inteiro = 10; var string = 'Usuário'; var floatter = 3.14; console.log('Este é um inteiro: %i, este é uma string: %s, este é um float %f', inteiro, string, floatter); // Correto console.log('Este é um inteiro: %i, este é uma string: %s, este é um float %f', floatter, inteiro, string); // Incorreto
var parser = new DOMParser(); var xml = parser.parseFromString("<div><h3>Hello world.</h3></div>", "application/xml"); console.log("%o, %O", xml,xml);
var css = "color:yellow; background:blue; font-size: 12pt"; console.log("User %s has %c%d points", string, css, inteiro);
O console.profile identifica quando inicia e finaliza a chamada do debug.
Exemplo:function processPixels() { console.profile("Processing pixels"); console.profileEnd(); } processPixels();
O console.time Exibe o tempo que demorou para finalizar a chamada do debug. Funciona em conjunto ao console.timeEnd.
Exemplo:console.time("Array initialize"); var num = 100000; for(var i = 0; i < num; i++) {} console.timeEnd("Array initialize");
Fonte:
https://developer.chrome.com/devtools/docs/console-api