//////////////////////////////////////////////////////
//                                                  //
//    If another part of your script is using       //
//  window.onload, change it to callWhenDomLoaded   //
//     and include the events.js script BEFORE      //
//               the tracer script                  //
//                                                  //
//   trace.enabled = false; // true                 //
//   trace.log("test trace message");               //
//                                                  //
//////////////////////////////////////////////////////
 
 
function delegateDom( that, thatMethod)
    {
       var _params = [];
       if(arguments.length > 2)
       {
         for(var n = 2; n < arguments.length; ++n) {
         	_params.push(arguments[n]);
         }
       }
       _params.unshift(null);
       return function(e) {_params[0]=e;return thatMethod.apply(that, _params);}
}
var console = (console?console:{
		'created': 	false,
		'messages':	new Array(),
		'log':		function(a){
					var message = document.createElement('pre');
					message.style.borderBottom = '1px solid #999';
					message.style.padding = '5px';
					message.style.margin = '0px';
					message.innerHTML = a;
					this.messages.push(message);
					if (this.created){
					  
					  this.updateLogger();
					}
				},
		'clearLogger':	function (){
					for (var i=0; i<this.logcontent.childNodes; i++){
					  this.logcontent.removeChild(this.logcontent.childNodes[i]);
					}
				},
		'updateLogger':	function (){
					
					this.clearLogger();
					
					for (var i=0; i<this.messages.length; i++){
					  this.logcontent.appendChild(this.messages[i]);
					}
					
					this.logcontent.scrollTop = this.logcontent.scrollHeight;
				},
		'create':	function(){
					
					this.mainlogger = document.createElement("div");
					this.titlebar = document.createElement("div");
					this.logcontent = document.createElement("div");
 
					this.mainlogger.id = 'logger';
					this.mainlogger.style.backgroundColor = '#FFFFFF';
					this.mainlogger.style.position = 'absolute';
					this.mainlogger.style.top = (this.dim().height - 205) + 'px';
					this.mainlogger.style.left = '10px';
					this.mainlogger.style.width = '70%';
					this.mainlogger.style.fontFamily = 'Verdana';
					this.mainlogger.style.fontSize = '11px';
					this.mainlogger.style.color = '#000000';
					this.mainlogger.style.border = '1px solid #000';
					
					
					this.logcontent.style.overflow = 'auto';
					this.logcontent.style.height = '170px';
					this.logcontent.style.width = '100%';
 
					this.titlebar.style.backgroundColor = '#444';
					this.titlebar.style.color = '#ffffff';
					this.titlebar.style.fontWeight = 'bold';
					this.titlebar.style.padding = '5px 5px';
					this.titlebar.innerHTML = 'Console';
 
					this.created = true;
 
					this.mainlogger.appendChild(this.titlebar);
					this.mainlogger.appendChild(this.logcontent);
 
					var body = document.getElementsByTagName('body')[0];
					
					body.appendChild(this.mainlogger);
					this.updateLogger();
					this.logcontent.scrollTop = this.logcontent.scrollHeight;
					this.addEvent(this.titlebar, 'mousedown', this.dragStart, this.mainlogger.id);
				},
		'addEvent':	function (obj, eventName, thatMethod){		
					var _params = [this,thatMethod];
					if(arguments.length > 3)
					{
					 for(var n = 3; n < arguments.length; ++n) {
						_params.push(arguments[n]);
					 }
					}
					var dlg = delegateDom.apply(this, _params);
					if (!obj.delegates){obj.delegates = {};}
					obj.delegates[eventName]=dlg;
					
					if (obj.addEventListener){
					  
					      obj.addEventListener(eventName, dlg, true);
					} else if (obj.attachEvent){
					      var r = obj.attachEvent("on"+eventName, dlg);
					}
					
				},
		'browser':	function() {
					if (!this.browserObj){					
 
						this.browserObj = {};
 
						var ua, s, i;
 
						this.browserObj.isIE    = false;
						this.browserObj.isNS    = false;
						this.browserObj.version = null;
						ua = navigator.userAgent;
 
						s = "MSIE";
						if ((i = ua.indexOf(s)) >= 0) {
						  this.browserObj.isIE = true;
						  this.browserObj.version = parseFloat(ua.substr(i + s.length));
 
						}
 
						s = "Netscape6/";
						if ((i = ua.indexOf(s)) >= 0) {
						  this.browserObj.isNS = true;
						  this.browserObj.version = parseFloat(ua.substr(i + s.length));
 
						}
 
						// Treat any other "Gecko" browser as NS 6.1.
						s = "Gecko";
						if ((i = ua.indexOf(s)) >= 0) {
						  this.browserObj.isNS = true;
						  this.browserObj.version = 6.1;
						}
					}
					return this.browserObj;
					
				},
		'dragObj':	{
					'zIndex':	0
				},
		'dragStart':	function (event, id) {
				
					var el;
					var x, y;
 
					// If an element id was given, find it. Otherwise use the element being
					// clicked on.
					if (id)
					  this.dragObj.elNode = document.getElementById(id);
					else {
					  if (this.browser().isIE)
					    this.dragObj.elNode = window.event.srcElement;
					  if (this.browser().isNS)
					    this.dragObj.elNode = event.target;
					    // If this is a text node, use its parent element.
 
					  if (this.dragObj.elNode.nodeType == 3)
					    this.dragObj.elNode = this.dragObj.elNode.parentNode;
					}
					
 
					// Get cursor position with respect to the page.
 
					if (this.browser().isIE) {
					  x = window.event.clientX + document.documentElement.scrollLeft
					    + document.body.scrollLeft;
					  y = window.event.clientY + document.documentElement.scrollTop
					    + document.body.scrollTop;
					}
					
					if (this.browser().isNS) {
					  x = event.clientX + window.scrollX;
					  y = event.clientY + window.scrollY;
					}
 
					// Save starting positions of cursor and element.
 
					this.dragObj.cursorStartX = x;
					this.dragObj.cursorStartY = y;
					this.dragObj.elStartLeft  = parseInt(this.dragObj.elNode.style.left, 10);
					this.dragObj.elStartTop   = parseInt(this.dragObj.elNode.style.top,  10);
 
					if (isNaN(this.dragObj.elStartLeft)) this.dragObj.elStartLeft = 0;
					if (isNaN(this.dragObj.elStartTop))  this.dragObj.elStartTop  = 0;
					// Update element's z-index.
 
					this.dragObj.elNode.style.zIndex = ++this.dragObj.zIndex;
 
					// Capture mousemove and mouseup events on the page.
					
					if (this.dragObj.elStartTop < 1){
					  this.dragObj.elStartTop = this.dim().height - (this.dragObj.elNode.clientHeight+parseInt(this.dragObj.elNode.style.bottom,  10));
					}
					
					this.addEvent(document, "mousemove", this.dragGo);
					this.addEvent(document, "mouseup", this.dragStop);
					
				},
		'dragGo':	function (event) {
 
					var x, y;
 
					// Get cursor position with respect to the page.
 
					if (this.browser().isIE) {
					  x = window.event.clientX + document.documentElement.scrollLeft
					    + document.body.scrollLeft;
					  y = window.event.clientY + document.documentElement.scrollTop
					    + document.body.scrollTop;
					}
					if (this.browser().isNS) {
					  x = event.clientX + window.scrollX;
					  y = event.clientY + window.scrollY;
					}
					
					// Move drag element by the same amount the cursor has moved.
					this.dragObj.elNode.style.left = (this.dragObj.elStartLeft + x - this.dragObj.cursorStartX) + "px";
					this.dragObj.elNode.style.top  = (this.dragObj.elStartTop  + y - this.dragObj.cursorStartY) + "px";
					
					if (this.browser().isIE) {
					  window.event.cancelBubble = true;
					  window.event.returnValue = false;
					}
					if (this.browser().isNS)
					  event.preventDefault();
				},
		'dragStop':	function(event) {
					this.removeEvent(document, "mousemove");
					this.removeEvent(document, "mouseup");
				},
		'removeEvent':	function(obj,eventName) {
					var dlg = obj.delegates[eventName];
					
					obj.delegates[eventName]=null;
					
					if (obj.detachEvent ) { 
					    obj.detachEvent( 'on'+eventName, dlg ); 
					    obj[eventName+dlg] = null; 
					} else 
					    obj.removeEventListener( eventName, dlg, false ); 
					dlg=null;
					
  				},
  		'dim':		function(){
					if (self.innerWidth)
					{
 
						frameWidth = self.innerWidth;
						frameHeight = self.innerHeight;
					}
					else if (document.documentElement && document.documentElement.clientWidth)
					{
						frameWidth = document.documentElement.clientWidth;
						frameHeight = document.documentElement.clientHeight;
					}
					else if (document.body)
					{
						frameWidth = document.body.clientWidth;
						frameHeight = document.body.clientHeight;
					}
					var x,y;
					var test1 = document.body.scrollHeight;
					var test2 = document.body.offsetHeight
					if (test1 > test2) // all but Explorer Mac
					{
						x = document.body.scrollWidth;
						y = document.body.scrollHeight;
					}
					else // Explorer Mac;
						 //would also work in Explorer 6 Strict, Mozilla and Safari
					{
 
						x = document.body.offsetWidth;
						y = document.body.offsetHeight;
					}
					var bd = {'width' : frameWidth, 'height' : frameHeight, 'scrolledWidth' : x, 'scrolledHeight' : y};
					return bd;
				}
	});
	
var trace = {
		'enabled':	true,
		'initiated':	false,
		'delegate':	function(that, thatMethod)
				{
					if(arguments.length > 2){
						var _params = [];
						for(var n = 2; n < arguments.length; ++n) _params.push(arguments[n]);
						return function(e) {_params.unshift(e); return thatMethod.apply(that, _params);}
					}else
						return function() {   return thatMethod.call(that);
					}
				},
		'init':		function(){
		 
					try {if (this.enabled){console.create();}}catch(e){}
				},
		'log':		function(a ){
					if (!this.initiated){
					 if (callWhenDOMLoaded){
					  if (!domLoaded){
					   callWhenDOMLoaded(this.delegate(this, this.init));
					  }else {
					   this.init();
					  }
					 }else {
					   window.onload = this.delegate(this, this.init);
					 }
					  this.initiated = true;
					}
					(this.enabled?console.log(a ):function(){})
				}
	}

It traces variables or strings to a little console that it creates. Or, it'll trace them to the firebug console if it finds it.

Example usage:

<html>
<head>
<script type="text/javascript" src="tracer.js"></script>
<script type="text/javascript">
trace.log("HELLO");

var myvariable = 'hello from variable');
trace.log(myvariable);

</script>
</head>
<body>
</body>
</html>

It will mess up slightly if you are using window.onload anywhere else in the page. (but there's a workaround if you need it)

 
//////////////////////////////////////////////////////
//                                                  //
//  Tracer Script (1.1) Written by Mikee Franklin   //
//                                                  //
//////////////////////////////////////////////////////
 
 
function delegateDom( that, thatMethod)
    {
       var _params = [];
       if(arguments.length > 2)
       {
         for(var n = 2; n < arguments.length; ++n) {
         	_params.push(arguments[n]);
         }
       }
       _params.unshift(null);
       return function(e) {_params[0]=e;return thatMethod.apply(that, _params);}
}
var console = (console?console:{
		'paused':	false,
		'created': 	false,
		'messages':	new Array(),
		'log':		function(a){
					var message = document.createElement('pre');
					message.style.borderBottom = '1px solid #999';
					message.style.padding = '5px';
					message.style.margin = '0px';
					message.innerHTML = a;
					this.messages.push(message);
					if (this.created){
					  this.updateLogger();
					}
				},
		'clearLogger':	function (){
					for (var i=(this.logcontent.childNodes.length-1); i>=0; i--){
					  this.logcontent.removeChild(this.logcontent.childNodes[i]);
					}
				},
		'pauseLogger': 	function (){
					if (this.paused){
					 this.paused = false;
					 this.pausebutton.innerHTML = 'pause';
					}else {
					 this.paused = true;
					 this.pausebutton.innerHTML = 'resume';
					}
					
				},
		'updateLogger':	function (refresh){	
		                    if (!this.paused){
					if (refresh){
					  this.clearLogger();
					  for (var i=0; i<this.messages.length; i++){
					    this.logcontent.appendChild(this.messages[i]);
					  }
					}else {
					  this.logcontent.appendChild(this.messages[(this.messages.length-1)]);
					}
					this.logcontent.scrollTop = this.logcontent.scrollHeight;
				    }
				},
		'create':	function(){
					
					this.mainlogger = document.createElement("div");
					this.titlebar = document.createElement("div");
					this.logcontent = document.createElement("div");
					this.clearlog = document.createElement("a");
					this.clearlog.appendChild(document.createTextNode("clear"));
					this.clearlog.style.styleFloat = 'right';
					this.clearlog.style.cssFloat = 'right';
					this.clearlog.style.color = '#FFFFFF';
					this.clearlog.href = 'javascript:void(0);';
					this.addEvent(this.clearlog, 'click', this.clearLogger);
					
 
					this.pausebutton = document.createElement("a");
					this.pausebutton.appendChild(document.createTextNode("pause"));
					this.pausebutton.style.styleFloat = 'right';
					this.pausebutton.style.cssFloat = 'right';
					this.pausebutton.style.marginRight = '10px';
					this.pausebutton.style.color = '#FFFFFF';
					this.pausebutton.href = 'javascript:void(0);';
					this.addEvent(this.pausebutton, 'click', this.pauseLogger);
 
					this.mainlogger.id = 'logger';
					this.mainlogger.style.backgroundColor = '#FFFFFF';
					this.mainlogger.style.position = 'absolute';
					this.mainlogger.style.top = (this.dim().height - 205) + 'px';
					this.mainlogger.style.left = '10px';
					this.mainlogger.style.width = '70%';
					this.mainlogger.style.fontFamily = 'Verdana';
					this.mainlogger.style.fontSize = '11px';
					this.mainlogger.style.color = '#000000';
					this.mainlogger.style.border = '1px solid #000';
					
					
					this.logcontent.style.overflow = 'auto';
					this.logcontent.style.height = '170px';
					this.logcontent.style.width = '100%';
 
					this.titlebar.style.backgroundColor = '#444';
					this.titlebar.style.color = '#ffffff';
					this.titlebar.style.fontWeight = 'bold';
					this.titlebar.style.padding = '5px 5px';
					
 
					this.created = true;
					
					this.titlebar.appendChild(this.clearlog);
					this.titlebar.appendChild(this.pausebutton);
					this.titlebar.appendChild(document.createTextNode("Console"));
 
					this.mainlogger.appendChild(this.titlebar);
					this.mainlogger.appendChild(this.logcontent);
 
					var body = document.getElementsByTagName('body')[0];
					
					body.appendChild(this.mainlogger);
					this.updateLogger(true);
					this.logcontent.scrollTop = this.logcontent.scrollHeight;
					this.addEvent(this.titlebar, 'mousedown', this.dragStart, this.mainlogger.id);
				},
		'addEvent':	function (obj, eventName, thatMethod){		
					var _params = [this,thatMethod];
					if(arguments.length > 3)
					{
					 for(var n = 3; n < arguments.length; ++n) {
						_params.push(arguments[n]);
					 }
					}
					var dlg = delegateDom.apply(this, _params);
					if (!obj.delegates){obj.delegates = {};}
					obj.delegates[eventName]=dlg;
					
					if (obj.addEventListener){
					  
					      obj.addEventListener(eventName, dlg, true);
					} else if (obj.attachEvent){
					      var r = obj.attachEvent("on"+eventName, dlg);
					}
					
				},
		'browser':	function() {
					if (!this.browserObj){					
 
						this.browserObj = {};
 
						var ua, s, i;
 
						this.browserObj.isIE    = false;
						this.browserObj.isNS    = false;
						this.browserObj.version = null;
						ua = navigator.userAgent;
 
						s = "MSIE";
						if ((i = ua.indexOf(s)) >= 0) {
						  this.browserObj.isIE = true;
						  this.browserObj.version = parseFloat(ua.substr(i + s.length));
 
						}
 
						s = "Netscape6/";
						if ((i = ua.indexOf(s)) >= 0) {
						  this.browserObj.isNS = true;
						  this.browserObj.version = parseFloat(ua.substr(i + s.length));
 
						}
 
						// Treat any other "Gecko" browser as NS 6.1.
						s = "Gecko";
						if ((i = ua.indexOf(s)) >= 0) {
						  this.browserObj.isNS = true;
						  this.browserObj.version = 6.1;
						}
					}
					return this.browserObj;
					
				},
		'dragObj':	{
					'zIndex':	0
				},
		'dragStart':	function (event, id) {
				
					var el;
					var x, y;
 
					// If an element id was given, find it. Otherwise use the element being
					// clicked on.
					if (id)
					  this.dragObj.elNode = document.getElementById(id);
					else {
					  if (this.browser().isIE)
					    this.dragObj.elNode = window.event.srcElement;
					  if (this.browser().isNS)
					    this.dragObj.elNode = event.target;
					    // If this is a text node, use its parent element.
 
					  if (this.dragObj.elNode.nodeType == 3)
					    this.dragObj.elNode = this.dragObj.elNode.parentNode;
					}
					
 
					// Get cursor position with respect to the page.
 
					if (this.browser().isIE) {
					  x = window.event.clientX + document.documentElement.scrollLeft
					    + document.body.scrollLeft;
					  y = window.event.clientY + document.documentElement.scrollTop
					    + document.body.scrollTop;
					}
					
					if (this.browser().isNS) {
					  x = event.clientX + window.scrollX;
					  y = event.clientY + window.scrollY;
					}
 
					// Save starting positions of cursor and element.
 
					this.dragObj.cursorStartX = x;
					this.dragObj.cursorStartY = y;
					this.dragObj.elStartLeft  = parseInt(this.dragObj.elNode.style.left, 10);
					this.dragObj.elStartTop   = parseInt(this.dragObj.elNode.style.top,  10);
 
					if (isNaN(this.dragObj.elStartLeft)) this.dragObj.elStartLeft = 0;
					if (isNaN(this.dragObj.elStartTop))  this.dragObj.elStartTop  = 0;
					// Update element's z-index.
 
					this.dragObj.elNode.style.zIndex = ++this.dragObj.zIndex;
 
					// Capture mousemove and mouseup events on the page.
					
					if (this.dragObj.elStartTop < 1){
					  this.dragObj.elStartTop = this.dim().height - (this.dragObj.elNode.clientHeight+parseInt(this.dragObj.elNode.style.bottom,  10));
					}
					
					this.addEvent(document, "mousemove", this.dragGo);
					this.addEvent(document, "mouseup", this.dragStop);
					
				},
		'dragGo':	function (event) {
 
					var x, y;
 
					// Get cursor position with respect to the page.
 
					if (this.browser().isIE) {
					  x = window.event.clientX + document.documentElement.scrollLeft
					    + document.body.scrollLeft;
					  y = window.event.clientY + document.documentElement.scrollTop
					    + document.body.scrollTop;
					}
					if (this.browser().isNS) {
					  x = event.clientX + window.scrollX;
					  y = event.clientY + window.scrollY;
					}
					
					// Move drag element by the same amount the cursor has moved.
					this.dragObj.elNode.style.left = (this.dragObj.elStartLeft + x - this.dragObj.cursorStartX) + "px";
					this.dragObj.elNode.style.top  = (this.dragObj.elStartTop  + y - this.dragObj.cursorStartY) + "px";
					
					if (this.browser().isIE) {
					  window.event.cancelBubble = true;
					  window.event.returnValue = false;
					}
					if (this.browser().isNS)
					  event.preventDefault();
				},
		'dragStop':	function(event) {
					this.removeEvent(document, "mousemove");
					this.removeEvent(document, "mouseup");
				},
		'removeEvent':	function(obj,eventName) {
					var dlg = obj.delegates[eventName];
					
					obj.delegates[eventName]=null;
					
					if (obj.detachEvent ) { 
					    obj.detachEvent( 'on'+eventName, dlg ); 
					    obj[eventName+dlg] = null; 
					} else 
					    obj.removeEventListener( eventName, dlg, false ); 
					dlg=null;
					
  				},
  		'dim':		function(){
					if (self.innerWidth)
					{
 
						frameWidth = self.innerWidth;
						frameHeight = self.innerHeight;
					}
					else if (document.documentElement && document.documentElement.clientWidth)
					{
						frameWidth = document.documentElement.clientWidth;
						frameHeight = document.documentElement.clientHeight;
					}
					else if (document.body)
					{
						frameWidth = document.body.clientWidth;
						frameHeight = document.body.clientHeight;
					}
					var x,y;
					var test1 = document.body.scrollHeight;
					var test2 = document.body.offsetHeight
					if (test1 > test2) // all but Explorer Mac
					{
						x = document.body.scrollWidth;
						y = document.body.scrollHeight;
					}
					else // Explorer Mac;
						 //would also work in Explorer 6 Strict, Mozilla and Safari
					{
 
						x = document.body.offsetWidth;
						y = document.body.offsetHeight;
					}
					var bd = {'width' : frameWidth, 'height' : frameHeight, 'scrolledWidth' : x, 'scrolledHeight' : y};
					return bd;
				}
	});
	
var trace = {
		'enabled':	true,
		'initiated':	false,
		'delegate':	function(that, thatMethod)
				{
					if(arguments.length > 2){
						var _params = [];
						for(var n = 2; n < arguments.length; ++n) _params.push(arguments[n]);
						return function(e) {_params.unshift(e); return thatMethod.apply(that, _params);}
					}else
						return function() {   return thatMethod.call(that);
					}
				},
		'init':		function(){
		 
					try {if (this.enabled){console.create();}}catch(e){}
				},
		'log':		function(a ){
					if (!this.initiated){
					 if (callWhenDOMLoaded){
					  if (!domLoaded){
					   callWhenDOMLoaded(this.delegate(this, this.init));
					  }else {
					   this.init();
					  }
					 }else {
					   window.onload = this.delegate(this, this.init);
					 }
					  this.initiated = true;
					}
					(this.enabled?console.log(a ):function(){})
				

 
function myfun (){
 try {
  // cause an error here
 }catch(e){
  trace.error(e);
 }
}

It's simply a fallback for if you dont have firebug installed.

It also avoids you having to take out all of the console.log's every time you want to show a client it working in action while it's in development.

 
 function testicals(){
  try{
   var mystring = "hello this is my string";
   trace.log(mystring ,"testicals()");
  }catch(e){
   trace.error(e ,"testicals()");
  }
 }
 
 function boobies(){
  try{
   var mystring = "hello this is my string";
   trace.log(mystring ,"boobies()");
  }catch(e){
   trace.error(e ,"boobies()");
  }
 }

New version with a couple of big bug fixes.

code getting pretty messy now so I might rewrite it as a class if anyone is interested in it.

Added HTML dom object highlighting.

fixed bugs.

Example of html dom highlighting:

http://www.beentheretogether.co.uk/code/tracer/htmlelm.php?trace

Note: only tested in IE so far.