[Javascript] creating a better console log

[rene7705]

i have another problem related to the previous one;

in the javascript framework that I wrote (http://fancywebapps.com), it's
entirely possible to have multiple user clicks and background animations
being processed at the same time.

the original tracer object could not handle this, so I built an
improvement, one that unfortunately freezes the browser for reasons I don't
understand yet. A page with my framework where you can find the thing
freezing the browser is up at http://freegemini.me/sites/fancywebapps.com

I would greatly appreciate any tips you have to offer.

Here's the new code:

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

var tracer = {
    nativeCodeEx: /\[native code\]/,
    indentCount: -4,
    tracing: [],
    traced : [],
userActions : [],
 findUA : function (arg) {
 var p = arg;
while (p) {
 if (p.ua) return p.ua;
 if (p.arguments && p.arguments.ua) return p.arguments.ua;
 if (typeof p.callee=='function') {
p = p.callee;
 } else if (typeof p.caller=='function') {
p = p.caller;
 } else return false;
}
 },

    traceMe: function(func, methodName, path) {
      var userAction;
    var traceOn = function() {
var startTime = +new Date;
 var indentString = " ".times(tracer.indentCount += 4);
 debugger;
 var ua = tracer.findUA(arguments);
 if (!ua) {
var uaIdx = tracer.userActions.length;
 ua = tracer.userActions[uaIdx] = {
uaIdx : uaIdx,
 startTime : startTime,
path : path
 }
tracer.traced[uaIdx] = [];
 arguments.ua = ua;
} else {
 var uaIdx = ua.uaIdx;
}
 var idx = tracer.traced[uaIdx].length;
tracer.traced[uaIdx][idx] = {
 path : path,
arguments : arguments
 };
  console.info(indentString + path + '(' +
Array.prototype.slice.call(arguments).join(', ') + ')');
 var result = func.apply(this, arguments);
tracer.traced[uaIdx][idx].result = result;
 tracer.traced[uaIdx][idx].timed = new Date - startTime;
 tracer.traced[uaIdx][idx].indentCount = tracer.indentCount;

 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 " + path);
        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 = [];
    }
}

note: the indentCount variable isn't handled correctly yet. needs to be
moved into the ua object.


On Mon, May 13, 2013 at 5:23 AM, rene7705 <rene7705 at gmail.com> wrote:

> 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)
>
>
>