Jugando con el log en la consola del navegador hice un pequeño desarrollo para poder agrupar y organizar mejor, imagino que hay herramientas con más detalle pero de momento esta es suficiente para mi.
Lo primero que hice fue asegurarme de que el objeto console y su función log existan en el navegador.
// Tal vez console no exista if( !console ) // Esta forma de escribirlo hace que mi editor resalte de forma correcta console = console || {}; // La función log es la más importante console.log = console.log || function(){}; // La función debug es la que más uso (aunque para el ejemplo no aplique) console.debug = console.debug || console.log;Lo siguiente es el uso de console.group, console.groupCollapsed, console.groupEnd; las 2 primeras inician una agrupación de logs cuyo parámetro sería el título del grupo, la diferencia entre las 2 es que la primera muestra el grupo desplegado y la segunda plegado. La tercera función finaliza el grupo.
// Las función group, groupCollapsed y groupEnd ayudan a ordenar pero pueden no existir console.groupCollapsed = console.groupCollapsed || function(){}; console.group = console.group || function(){}; console.groupEnd = console.groupEnd || function(){};
* El API del objeto console puede verse acá https://developer.chrome.com/devtools/docs/console-api.
Me gustaría definir funciones del objeto console para uso en diferentes ámbitos, que sea simple de usar, algo como:
console.app( "Prueba de log de aplicación", ["Arreglo 1"], {'objeto': []} ); console.service( "Prueba de log de servicios", ["Arreglo 2"], {'objeto': []} ); console.user( {'nombre': 'Nelson', time: new Date(), 'status': true} );Para eso necesito definir la función app en console y su comportamiento, de momento creo que sería algo así:
console.app = function(){ // La función shape debería recibir // los argumentos de la función actual, el ámbito, // el color y si se muestra plegado console.shape(arguments, 'APP', '#6F4395', true); }; console.service = function(){ console.shape(arguments, 'SRV', '#6F9995', true); }; console.user = function(){ console.shape(arguments, 'USR', '#6F99FF', true); };Ahora lo importante, la función shape que se encarga de todo:
/** * La función shape será la que me permita agrupar, colorear y mostrar plegado * * @param args Object Argumentos pasados a la función "nativa" * @param scope string Nombre del grupo * @param color string Hexadecimal (RGB) -> '#FFFFFF' * @param collapsed bool Si el grupo se colapsa o se expande */ console.shape = function( args, scope, color, collapsed ){ // Contador de elementos a mostrar var start = 0; // Si no hay color se usa gris color = color || '#999'; // args debe ser un objeto "arguments" o un Array que es lo más cercano if( typeof( args ) != 'object' ) args = [args]; // Si solo que quiere mostrar un elemento no tiene sentido agruparlo, // solo se muestra como un log con color if( args.length == 1 && typeof( args[start] ) != 'object') { // Si scope existe se muestra como una llave if( scope ) console.log('%c' + scope + ': ' + args[start], 'color: ' + color); else console.log('%c' + args[start], 'color: ' + color); return; } if( scope ) { // Si scope existe y el primer elemento a mostrar // no es un objeto, se puede agrear como texto, // solo para que se vea mejor var append = ( typeof( args[start] ) != 'object' ? ' ' + args[start++] : '' ); if( collapsed ) console.groupCollapsed('%c' + scope + ':' + append, 'color: ' + color); else console.group('%c' + scope + ':' + append, 'color: ' + color); } for( ;start < args.length; start ++ ) { // Mostrando los elementos restanter con la // forma normal de log console.log( args[start] ); } // Cerrando el grupo (Solo si es necesario) if( scope ) console.groupEnd( ); };Ahora cuando ejecutamos esto en la consola...
console.app( "Prueba de log de aplicación", ["Arreglo 1"], {'objeto': []} ); console.service( "Prueba de log de servicios", ["Arreglo 2"], {'objeto': []} ); console.user( {'nombre': 'Nelson', time: new Date(), 'status': true} );El resultado es:
Funciona bastante bien y cambiando el contenido de la función correcta puedo omitir o modificar todo un ámbito del log.
No hay comentarios:
Publicar un comentario