Monday, June 24, 2013

Use Autolog.js to Trace JavaScript Call Execution to console.log

If you need something to log a trace of call executions to console.log in JavaScript to avoid having to debug by hand, try Autolog.js.

Autolog.js logs Function.prototype.call executions to console.log, showing instances, argument types, caller stack line and/or full caller stack, and with optionally elipsized function bodies.

This allows you see what is going on to a limited extent as Javascript is executed, similar to a trace log to console.

Example output in Chrome's JavaScript Console:

[object NamedNodeMap].toString ()  source: at isArrayLike (http://example.org/assets/angular.js?body=1:39:83) 
undefined.anonymous ((object)[object Attr], (number)0)  source: at forEach (http://example.org/assets/angular.js?body=1:55:20)
undefined.anonymous ((object)$compile,$parse,function ($compile, $parse) {...}, (string)"select")  source: at forEach (http://example.org/assets/angular.js?body=1:59:22)

Original direction came from this answer from HBP on StackOverflow.

I liked being able to use the Autolog tracing tool I wrote for Ruby as a wrapper around set_trace_func, so I wanted to add somewhat similar functionality to JavaScript.

No comments: