martes, 8 de julio de 2014

Consola Javascript, Colores, Grupos y más


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