This post was originally published on Coding Glamour.

Every now and then I end up in a code base where I don't have a clue about the flow yet; like today when testing out the new keyboard application that we're developing for Firefox OS. To see whether the flow is actually sane I plug in a simple function logger that allows me to see which functions are called and with what arguments.

  function log(args) {
    var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
    // stole this from http://stackoverflow.com/questions/1007981/how-to-get-function-parameter-names-values-dynamically-from-javascript
    function getParamNames(func) {
      var fnStr = func.toString().replace(STRIP_COMMENTS, '');
      var result = fnStr.slice(fnStr.indexOf('(')+1, fnStr.indexOf(')')).match(/([^\s,]+)/g);
      if(result === null)
         result = [];
      return result;
    }
    console.log(args.callee.name, getParamNames(args.callee).reduce(function(obj, k, ix) {
      obj[k] = args[ix];
      return obj;
    }, {}));
  }

Now you can take advantage of this by putting a call to this function on the first line of any function you want to trace:

function a(b, c) { log(arguments); }

When calling the a function, it will log the function name and an object with argument names and values:

a(4, 5);
// a { b: 4, c: 5 }

Remember to disable "use strict" because accessing callee is not permitted anymore.