• Choose a category
• All
• Classic-Fiction

Debuggers are, by their nature, intrusive. Although they are very powerful in many ways, there are times when a background logging system is preferable. Plenty of mature server-side logging frameworks are available, such as Apache log4j for Java, but, once again, the JavaScript toolset is lagging. In the final part of this section, we’ll look at a simple logging tool written in JavaScript that can be integrated into your browser code to provide a record of background activity. A.3.4 Building your own cross-browser output console

A debugger gives a developer a very detailed view of running code, but it interrupts the ordinary flow of events. When tracking a user’s interactions for usability testing or monitoring the execution of code in a tight loop, it is sometimes more useful to log activity without interrupting the flow.

Web browser JavaScript doesn’t provide a built-in logging facility. (The Mozilla JavaScript console may look like one at first glance, but it can only be written to by the browser and by extensions.) In this section, we’ll develop our own simple logging system and demonstrate its use in one of our example applications. Let’s sketch out our requirements first. We can’t write to a local file because of the JavaScript security model, so we’ll opt to write to an on-screen console element instead. We want to be able to append messages to our console. Ideally, we’d like to be able to use HTML markup in our logging, as well as plain text. We’d also like to clear the console of existing messages.

To keep things simple, we’ll pass a DOM element in as an argument to the object constructor. The placement of the console can then be determined on a page-by-page basis. The constructor simply sets up a two-way reference between the DOM element and the console object itself:

Console=function(el){

this.el=document.getElementById(el);

this.el.className='console';

this.el.consoleModel=this;

this.clear();

}

To append to the console, we simply pass in an argument, which may be a textual string or a DOM element, and optionally pass in a CSS class name as well: Console.prototype.append=function(obj,style){

var domEl=styling.toDOMElement(obj);

if (style) {

domEl.className=style;

Licensed to jonathan zheng

580

APPENDIX A

The Ajax craftsperson’s toolkit

}

this.el.appendChild(domEl);

}

The toDOMElement() method calls a generic styling function, which ensures that the message is wrapped up as a DOM element. If the argument is already a DOM

element, it is returned unchanged. If it is a string, it is wrapped in a DIV element: styling.toDOMElement=function(obj){

var result=null;

if (obj instanceof Element){

result=obj;

}else{

var txtNode=document.createTextNode(String(obj));

var wrapper=document.createElement('div');

wrapper.appendChild(txtNode);

result=wrapper;

}

return result;

}

To clear the console, we simply remove all child elements from it, one by one: Console.prototype.clear=function(){

while(this.el.firstChild){

this.el.removeChild(this.el.firstChild);

}

}

That provides a simple implementation of an in-browser logging console. Let’s have a look at how we use it now. We’ll take the ObjectViewer example from chapters 4 and 5. First, we define a DOM element in our page to contain the logging console

and a CSS class to position it on screen for us:

div.console {

position:absolute;

top:32px;

left:600px;

width:300px;

height:500px;

overflow:auto;

border: 1px solid black;

background-color: #eef0ff;

}

Licensed to jonathan zheng

Debuggers

581

We are using absolute positioning here, but we could use any Ajax user interface technique to do the job for us. Next, we need to create the logging object. We’ll define it as a global variable in this example for convenience.

var logger=null;

window.onload=function(){

logger=new Console("console");

logger.append("starting planets app");

...

}

We initialize the logger in the window.onload event, so that the DOM element that it requires is guaranteed to be created.