Saturday, December 10, 2011

Habit-Firebug Saver: SmartLogger

How many of the web developers do not depend on Firebug or the chrome's console... Just wondering..

BTW, its plain fun to work with firebug, makes life a lot easier.. Its a different matter all together that the other browser that you have to develop for does not have a powerful enough tool. (Name deliberately avoided to avoid the eminent flame-war!) Yes the current versions have a quite powerful debug and development tools but (hopefully) few developers working on products still have to consider some 10 year old versions (namely 6, 6.5 and 7). Ah, the pain.. Anyways, we are not discussing that..

What we are talking about is the issues that we face when testing our changes to a thousand lines JavaScript code on multiple browsers, especially after we are accustomed to the ease of firebug. :)

I spent much of my time commenting my console.log() statements before I could dare to open the page in IE. Well, fear not, the days have passed! The pain drove me to write a logger object that can not only sense presence of console object but can do much more than that, like ability to assert, selective logging and more..

I call it the SmartLogger.

//Global Logger Object, for use during development, configurable logger.
var SmartLogger = function(options) {
 var sl = {}; // Logger Object
 // Accepting passed params.
 options = options || {};
 sl.enableLogger = options.enableLogger!==undefined?options.enableLogger:true;
 sl.enableAssert = options.enableAssert!==undefined?options.enableAssert:true;
 sl.loggerOutput = options.loggerOutput!==undefined?options.loggerOutput:undefined; //'console', 'alert', undefined
 sl.selectiveEnable = options.selectiveEnable!==undefined?options.selectiveEnable:'';
 sl.selectiveDisable = options.selectiveDisable!==undefined?options.selectiveDisable:'';
 // Logger properties = "SmartLogger";
 sl.whoami = function(){ return "SmartLogger_"+sl.enableLogger+"_"+sl.enableAssert+"_"+sl.loggerOutput+"_"+sl.selectiveEnable+"_"+sl.selectiveDisable;}
 sl.version = '0.7';
 // Checks if console object is defined. Checked only at the time of instantiation.
 var hasConsole = (typeof console === "object");
 // Checks if logging should be done to console.
 function logToConsole(){
  if (sl.loggerOutput){
   if (sl.loggerOutput === 'console') return true;
  } else {
   if(hasConsole) return true;
  return false;
 // Handles the logging intelligence
 function handleLogging(logMethod, logString, strId){
  if(!sLog(strId)) {return;}
  // Decides if to log and logs or alerts appropriately.
   if (logToConsole()){ // && hasConsole
   } else {
 // Handles the selective logging functionality
 function sLog(strId){
  var allowLog = true;
  if (sl.selectiveEnable) {
   allowLog = strId === sl.selectiveEnable;
  } else if (sl.selectiveDisable) {
   allowLog = !(strId === sl.selectiveDisable);
  return allowLog;
 // Returns a formatted object structure with current values to complete depth.
 function printString(obj, name, str, strEnd){
  var stringified;
  name = name?name:"Object",
  str = str?str:"";
  strEnd = strEnd?strEnd:"";
  stringified = str+name+" : {\n";
  for (var a in obj){
   if (typeof obj[a] === 'object'){
    stringified+= printString(obj[a],a,"\t",",");
   } else {
    stringified+= str+"\t"+a +" : "+obj[a]+",\n";
  stringified += str+"}"+strEnd+"\n";
  return stringified;
 // Exposed methods of the object
 //log a string to console/alert
 sl.log = function(str, strId){
  handleLogging('log', str, strId);
 //debug logging a string to console/alert
 sl.debug = function(str, strId){
  handleLogging('debug', str, strId);
 //write an information string to console/alert = function(str, strId){
  handleLogging('info', str, strId);
 //throw error string to console/alert
 sl.error = function(str, strId){
  handleLogging('error', str, strId);
 //Assert an assumption
 sl.assert = function(str, strId){
   handleLogging('log', 'Assumption: true', strId);
    handleLogging('error', 'Assumption failed!', strId);
 // Logs the formatted object structure with current values to console/alert
 sl.stringToConsole = function(obj, str){
  sl.log(printString(obj, str));
 return sl;

var sl = new SmartLogger();


  • Multiple logging profiles can be maintained at the same time with different properties.
var sl = new SmartLogger();
var sl2 = new SmartLogger({selectiveEnable: 'block1'});
  • Proprieties can be set at the time of instantiation or even later.
var sl = new SmartLogger();
sl.loggerOutput = 'console';
var sl2 = new SmartLogger({loggerOutput: 'console'});
  • name, version number and whoami to identify the logger with a string of its current properties.
var sl = new SmartLogger(); // SmartLogger.
sl.version // 0.7
sl.whoamI() // Returns a string of its properties with the name of the object in a specific sequence:
// "SmartLogger_"+ enableLogger +"_"+ enableAssert+"_"+ loggerOutput+"_"+ selectiveEnable+"_"+ selectiveDisable;
// Example: SmartLogger_true_true_console__b
// We will see what these properties are in some time..
  • Enable or disable logging altogether: enableLogger controls if the statements should ever be logged.
var sl = new SmartLogger();
sl.log('gets logged');
sl.enableLogger = false;
sl.log('never gets logged');
  • Intelligently decides where the logging statements should go...
sl.loggerOutput = undefined; //default
/* Decides based on presence of 'console' object.
If console is present statements will be logged to console,
else like in case of IE, will be 'alerted' to the user.
Now at times this can get messy, with loads of log statements alerting on our face..
But wait, we have ways to handle that.*/

sl.loggerOutput = 'console';
// Plain instruction, no intelligence, all statements will always go to console.
// If console is not present statements will just be eaten-up.

sl.loggerOutput = 'alert';
// Another plain instruction, all statements will always be alerted.
// Will not bother to check if console exists or not.
  • Log formatted objects to console. Now you wont need that much with firebug but to see the entire contents of the object, well formatted you can just say stringToConsole.
// Just a sample object with unknown properties.
var obj = {prop1: 'value',functProp:function(){return "this is a function that returns me!";}, propObj:{prop2:'value2'}};
sl.stringToConsole(obj); // You say this.

// On console or in the alert prompt, you get this
Object : {
 prop1 : value,
 functProp : function () {
    return "this is a function that returns me!";
 propObj : {
  prop2 : value2,

  • Assert your assumptions. Checks that the assumption is true, if yes, logs so. If assumption fails, will write out an error on the console and invoke the debugger so the user can check in the stack exactly where the assumption failed and why.
sl.assert(1==1); // logs 'Assumption: true' to console.
sl.assert(1==2); // Logs error 'Assumption: failed!' and invoke debugger to the assert line in SmartLogger.

//Now you can go and check in the stack and watch to panels to check value and call stack.
  • Has a wrapper for 4 of the logging APIs from firebug and adding new is not much of a task. What it already has:
    • log
    • debug
    • info
    • error
  • Has ability of selective logging.
Now this thing is a live saver. The properties selectiveEnable and selectiveDisable control what statements to log. While these are not mandatory inputs to all the wrappers but I suggest you set them always. These are logging context that can be used to selectively enable logs for only partial of the code, the code that currently interests you..

// Suppose we were working on a defect number 101 and now we are developing a functionality for
// automating welcome messages to users and are asked to urgently fix defect 203.
// Ah, complex scenario, but it will only help understand the purpose.

// When we are working on defect 101, we had the logger configured as statements as:
sl.log("reached here"); // worst way to log: who knows wheres here! but just an example.

// Now we are working on the functionality and
// we would not want those 10 logging statements added while we were working on the defect.
// We can remove them or simply enable the 'selective logger'!
sl.selectiveEnable = 'welcomer';
sl.log("fetching message", "welcomer");
// And voila, only the 'welcomer' messages will be logged.

// Now we get the next urgent defect.
sl.selectiveEnable = 'defect203';
sl.log("value in Obj1.str"+Obje1.str, "defect203");
// We get only the defect203 logs!

// Now some of our new changes depend on the changes we made in defect101, but we cant get the logs from those..
// What do we do? If someone did not enable selective logger and removed the statements, please add them back (:p),
// remove statements for 'welcomer' functionality. Or simply, disable 'welcomer' messages..!
sl.selectiveEnable = '';
sl.selectiveDisable = 'welcomer';
sl.log("value in Obj1.str"+Obje1.str, "defect203");
sl.log("value in Obj2.varInt1"+Obj2.varInt1, "defect101");
// Ha ha! Log statements for 'welcomer' gone and we get the rest!

While using the SmartLogger, I suggest you always pass the string identifier, so that you can control the logs at any point of time later.

What can you expect next in SmartLogger:

  • Use assert from firebug itself.
  • Check that the function exists in the logger before calling it.
  • Make the selective logger take arrays.
  • In stringToConsole, handle functions too to remove that glitch in no closing bracket.

Let me know what you think about the SmartLogger, if you would like any additions to its behaviour and also if you find any defects in the comments below.


  1. Looks interesting thing, bt :
    One simple question : utilities like firebug are known to make browser slow. What about smartLogger? What overhead we can expect???

  2. It is supposed to be used with firebug/chrome developer tools as a layer between or when you otherwise use firebug, that is only during development..

    Yes, it will surely add a couple of function calls and a few microseconds to processing. That is the reason methods from firebug that deal with time or function calls, like 'console.profile()' or 'console.time()' are not included. But for testing/development it gives a lot more functionality than to worry about the added function call. :)