[Javascript] creating a better console log

[rene7705]

Hi.

I would like to create a better console log, one in which you can see per
user action what your javascript program does.

I've found some source code somewhere on the net that allows you to log all
function calls;

String.prototype.times = function(count) {
    return count < 1 ? '' : new Array(count + 1).join(this);
}

var tracer = {
    nativeCodeEx: /\[native code\]/,
    indentCount: -4,
    tracing: [],

    traceMe: function(func, methodName, path) {
        var traceOn = function() {
                var startTime = +new Date;
                var indentString = " ".times(tracer.indentCount += 4);
                console.info(indentString + path + '(' +
Array.prototype.slice.call(arguments).join(', ') + ')');
                var result = func.apply(this, arguments);
                console.info(indentString + path , '-> ', result, "(", new
Date - startTime, 'ms', ")");
                tracer.indentCount -= 4;
                return result;
        }
        traceOn.traceOff = func;
        for (var prop in func) {
            traceOn[prop] = func[prop];
        }
        console.log("tracing " + methodName);
        return traceOn;
    },

    traceAll: function(root, path, recurse) {
 if ((root == window) || !((typeof root == 'object') || (typeof root ==
'function'))) {return;}
        for (var key in root) {
            if ((root.hasOwnProperty(key)) && (root[key] != root)) {
                var thisObj = root[key];
                if (typeof thisObj == 'function') {
                    if ((this != root) && !thisObj.traceOff &&
!this.nativeCodeEx.test(thisObj)) {
                        root[key] = this.traceMe(root[key], key,
path+'.'+key);
                        this.tracing.push({obj:root,methodName:key,
path:path+'.'+key});
                    }
                }
                recurse && this.traceAll(thisObj, path+'.'+key, true);
             }
        }
    },

    untraceAll: function() {
        for (var i=0; i<this.tracing.length; ++i) {
            var thisTracing = this.tracing[i];
            thisTracing.obj[thisTracing.methodName] =
                thisTracing.obj[thisTracing.methodName].traceOff;
        }
        console.log("tracing disabled");
        tracer.tracing = [];
    }
}
tracer.traceAll (myObject, 'myObject', true);


However, this does not track anonymous functions defined inside functions
(possibly as callbacks listed inside some object)...
I was wondering if anyone here knows of a way to track those anonymous
functions as well.

I plan to build up some kind of array instead of log to the
console.infodirectly, and display the results in a tree view or
whatever is better than
a treeview.

This component could have a lot of potential.. For instance, it could be
used to record user interaction on the website, and in case of an error
transmit what happened back to the server to be logged and displayed with
details to the developer later on.

I'm also wondering about what would be the best way to exclude functions from
the log/view that are called very often (as part of an animation loop) but
often without doing anything (a scrollpane that doesn't need resizing at
that moment, for instance)