Cross-Browser JavaScript Tracing

No matter what system you are working with, you always need mechanisms for debugging. One of the most important mechanisms a person can have is tracing. Being able to see trace output from various places in your application is vital. This is especially true with JavaScript. I've been working with JavaScript since 1995, making stuff 12 years ago that would still be interesting today (in fact, I didn't know server-side development existed until 1998!) and I have noticed a clear correlation between the complexity of JavaScript applications and the absolute need for tracing.

Thus, a long, long time ago I built a tracing utility that would help me view all the information I need (and absolute no more or less). These days this means being able to trace information to a console, dump arrays and objects, and be able to view line-numbered information for future reference. The utility I've created has since been added to my Themelia suite (pronounces the-meh-LEEUH; as in thistle or the name Thelma), but today I would like to demonstrate it and deliver it separately.

The basis of my tracing utility is the Themelia.Trace namespace. In this namespace is.... wait... what? You're sick of listening to me talk? Fine. Here's the sample code which demonstrates the primary uses of Themelia.Trace, treat this as your reference documentation:

//+ enables tracing
Themelia.Trace.enable( );
//+ writes text
Themelia.Trace.write('Hello World!');
//+ writes a blank line
Themelia.Trace.addNewLine( );
//+ writes a numbered line
Themelia.Trace.writeLine('...and Hello World again!');
Themelia.Trace.writeLine('Another line...');
Themelia.Trace.writeLine('Yet another...');
Themelia.Trace.writeLine('One more...');
//+
//++ label
//+ writes labeled data to putput (e.g. 'variableName (2)')
Themelia.Trace.writeLabeledLine('variableName', 2);
//+
//++ buffer
//+ creates a buffer
var buffer = new Themelia.Trace.Buffer( );
//+ declares beginning of new segment
buffer.beginSegment('Sample');
//+ writes data under specific segment
buffer.write('data here');
//+ nested segment
buffer.beginSegment('Array Data');
//+ write array to buffer
var a = [1,2,3,4,5];
buffer.write(a);
//+ declares end of segment
buffer.endSegment('Array Data');
buffer.beginSegment('Object Data');
//+ write raw object/JSON data
buffer.write({
    color: '#0000ee',
    fontSize: '1.1em',
    fontWeight: 'bold'
});
buffer.endSegment('Object Data');
//+ same thing again
buffer.beginSegment('Another Object');
var o = {
    'personId': 2,
    name: 'david'
};
buffer.write(o);
buffer.endSegment('Another Object');
buffer.endSegment('Sample');
//+ writes all built-up data to output
buffer.flush( );

Notice a few thing about this reference sample:

First, you must use Themelia.Trace.enable( ) to turn tracing on. In a production application, you would just comment this line out.
Second, Themelia.Trace.writeLine prefixes each line with a line number. This is especially helpful when dealing with all kinds of async stuff floating around or when dealing with crazy events.
Third, you may use Themelia.Trace.writeLabeledLine to output data while giving it a name like "variableName (2)".
Fourth, if you want to run a tracer through your application and only later on have output, create an instance of Themelia.Trace.Buffer, write text to it, write an array to it, or write an object to it, then call flush( ) to send to data to output. You may also use beginSegment and endSegment to create nested, indented portion of the output.
Fifth, notice you can throw entire arrays of objects/JSON into buffer.write( ) to write it to the screen. This is especially handy when you want to trace your WCF JSON messages.

Trace to what?

Not everyone knows this, but Firefox, Google Chrome, Safari, and Opera each has its own console for allowing output. Themelia.Trace works with each console in its own way. Here are some screen shots to show you what I mean:

Firefox

Firefox since version 1.0 has the Firefox Console which allows you to write just about anything to a separate window. I've done a video on this many years ago and last year I posted a quick "did you know"-style blog post on it, so there's no reason for me to cover it again here. Just watch my Introduction to the Firefox Console for a detailed explanation of using the Firefox Console (you may also opt to watch my Setting up your Firefox Development Environment-- it should seriously help you out).

Google Chrome

Chrome does things a little different than any other browser. Instead of having a "browser" wide console, each tab has its own console. Notice "browser" is in quotes. Technically, each tab in Chrome is it's own mini browser, so this console-per-tab model makes perfect sense. To access this console, just hit Alt-` on a specific tab.

Safari

In Safari, you go to Preferences, in the Advanced Tab to check "Show Develop menu in menu bar". When you do this, you will see the Develop menu show up. The output console is at Develop -> Show Web Inspector.

Opera

In Opera 9, you go to Tools -> Advanced -> Developer Tools and you will see a big box show up at the bottom. The console is the Error Console tab.

Internet Explorer

To use Themelia.Trace with Internet Explorer, install Nikhil's Web Developer Helper. This is different from the IE Developer Toolbar.

Firebug

It's important to note that, in many situations it's actually more effective to rely on Firebug for Firefox or Firebug lite for Safari/Chrome, IE, and Opera, then to use a console directly. Therefore, Themelia.Trace allows you to set Themelia.Trace.alwaysUseFirebug to true and have all output redirected to Firebug instead of the default console. Just try it, use the above sample, but put "Themelia.Trace.alwaysUseFirebug = true;" above it. All data will redirect to Firebug. Here's a screen shot (this looks basically the same in all browsers):

There you have it. A cross-browser solution to JavaScript tracing.

David Betz' Home for Architecture, Cloud, Linux, Docker, and Elegance