Más Console Api

En el último post estuve mostrando algunas de las funcionalidades más utilizadas de la Api Console. Sin embargo, existen algunas otras que pueden llegar a ser igual de útiles que las anteriormente mencionadas. ¡Empecemos!

console.trace

Muestra en consola la pila de llamadas realizadas antes de llegar al punto del código donde invocamos a console.trace.

//console.trace --> Prints a stack from the point where the method was called, including the specifics lines in the JavaScript
document.getElementById("btnConsoleTrace").addEventListener("click", callingConsoleTrace);
function callingConsoleTrace() {
    doIt();
}
function doIt() {
    console.trace();
}

Cuando hacemos clic en el botón del cual estamos capturando el evento, el resultado por consola es el siguiente:

console.trace_

No soportado en Internet Explorer 10.

console.assert

Una buena forma de controlar cuándo debe lanzarse un error, además de la pila de llamadas, es a través de console.assert, ya que nos permite evaluar una expresión y mostrar un mensaje de error sólo en el caso en que el resultado sea false.

console.assert(0 === 1, "This is my console.assert message");

console.assert

No disponible en Firefox.

console.clear

Como su propio nombre indica, nos permite limpiar la consola a través de código.

document.getElementById("btnClearConsole").addEventListener("click", function () {
    console.clear();
});

No disponible en Firefox.

console.count

Otro método que puede resultar bastante útil cuando queremos saber cuántas veces se ha pasado por un punto en concreto durante la ejecución de nuestro código.

for (var i = 0; i < 6; i++) {
    console.count("console.count");
}

console.count_

No está soportado por Internet Explorer 10 ni Firefox.

console.debug & console.info

Nos permite mostrar información a través de la consola de la misma manera que console.log, mostrado en el post anterior. Dependiendo del navegador, cada tipo se muestra de una forma ligeramente distinta (en Chrome console.debug se muestra en azul y console.info en negro, en el caso de Opera con Dragonfly es al contrario :D, en Firefox se muestra un icono de información al lado de console.info, etcétera).

Internet Explorer no soporta console.debug, pero sí debug.info.

console.dir

Muestra una representación del objeto pasado por parámetro, de la misma forma que lo haríamos con console.log con el formato %O.

console.dir(document);

console.dir_

console.dirxml

Muestra en xml una representación del elemento DOM pasado como parámetro:

var btnClearConsole = document.getElementById('btnClearConsole');
console.dirxml(btnClearConsole);

console.dirxml

No está soportado por Internet Explorer 10.

console.group

Nos permite agrupar una serie de mensajes de consola, los cuales deben estar comprendidos entre la llamada console.group, a la cual le podemos pasar un nombre descriptivo, y console.groupEnd.

console.group("Starting group of events");
console.log("message 1");
console.log("message 2");
console.log("message 3");
console.log("message 4");
console.groupEnd();

console.group_

No está soportado por Internet Explorer 10.

console.groupCollapsed

Funciona exactamente igual que el anterior método pero inicialmente muestra cerrado el grupo en consola .

console.groupCollapsed("Starting group of events");
console.log("message 1");
console.log("message 2");
console.log("message 3");
console.log("message 4");
console.groupEnd();
console.log("Message out of my collapsed group");

console.groupCollapsed

No está soportado por Internet Explorer 10.

Espero que haya sido de utilidad.

¡Saludos!