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:
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");
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"); }
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.dirxml
Muestra en xml una representación del elemento DOM pasado como parámetro:
var btnClearConsole = document.getElementById('btnClearConsole'); console.dirxml(btnClearConsole);
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();
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");
No está soportado por Internet Explorer 10.
Espero que haya sido de utilidad.
¡Saludos!