Phosphorus and Lime
A Developer's Broadsheet
This blog has been deprecated. Please visit my new blog at klenwell.com/press.
profile
Name: klenwell
Home: San Diego, California, United States
About Me: designer, programmer, wordsmith
Saturday, July 19, 2008
JS: Firebug Lite
As a follow-up to my last post, I was poking around the Firebug site and discovered this: Firebug Lite. A version of Firebug for IE. Cool!
More info: http://getfirebug.com/lite.html
More info: http://getfirebug.com/lite.html
Labels: javascript
Javascript Logger
As every developer knows, one of the killer extensions for Firefox is Firebug. And I was using it for months (years?) before I discovered one of its coolest features: console.log. It's a simple method that allows you to send your own output to the Firebug console.
This was one of those little things that changed my life. What an improvement over the old alert function. I told all my friends, all co-workers. I was a console.log evangelist.
One problem -- the obvious one: Internet Explorer. It doesn't have Firebug. It doesn't know what a console object is. So if you want to use this, you have to figure out how get IE to ignore, else you get errors.
Anyway, that is what the logger class below does. It logs messages to the Firebug console. Its major feature is doing this transparently. You can also set the pop_interval value so that, in Firebug-less browsers, an alert message will pop up every one in a while dumping the complete log contents. (Probably could be a problem if it gets too long, but I'll worry about that in the future.)
Now, without further ado, the class:
Usage:
This has been tested successfully on IE6 and, of course, Firefox. It does require the prototypejs library.
This was one of those little things that changed my life. What an improvement over the old alert function. I told all my friends, all co-workers. I was a console.log evangelist.
One problem -- the obvious one: Internet Explorer. It doesn't have Firebug. It doesn't know what a console object is. So if you want to use this, you have to figure out how get IE to ignore, else you get errors.
Anyway, that is what the logger class below does. It logs messages to the Firebug console. Its major feature is doing this transparently. You can also set the pop_interval value so that, in Firebug-less browsers, an alert message will pop up every one in a while dumping the complete log contents. (Probably could be a problem if it gets too long, but I'll worry about that in the future.)
Now, without further ado, the class:
/*** DOCUMENTATION LAYER
Javascript Logger
Author: Tom at klenwell@gmail.com
License: LGPL License
______________________________________________________________________________*/
var NBSP = ' ', DEBUG = 1, INFO = 2;
var Logger = Class.create({
/* Javascript Logger
There are probably better versions out there, but this is my own. Its
most significant feature is that it determines whether Firebug is loaded
or not and adjusts its output accordingly.
*/
levelTag : ['', 'DEBUG', 'INFO'],
has_firebug : false,
Journal : [],
pop_interval : 5, // when firebug absent, how often we want to dump an alert
max_pop_length : 20, // when firebug absent, max length of items in pop-up window
initialize: function(level)
{
if ( level == null ) this.level == DEBUG;
this.has_firebug = this.is_firebug_installed();
this.debug("has_firebug:", this.has_firebug);
},
_log: function(lvl, msg)
{
if ( this.level < lvl ) return;
timestamp = '[' + this.now().toString() + ']';
level = this.levelTag[lvl] + ' >>>';
this.log(timestamp + NBSP + level + NBSP + msg);
},
log: function(message)
{
this.Journal.push(message);
if ( !this.has_firebug )
{
if ( !(this.Journal.length % this.pop_interval) )
{
this.alert(this.Journal.join("\n"));
if ( this.Journal.length > this.max_pop_length )
{
this.Journal.splice(0, Math.ceil(this.max_pop_length / 4))
}
}
return;
}
console.log(message);
},
debug: function()
{
var msg='';
for (i=0; i < arguments.length; i++) { msg+=arguments[i]+' '; }
this._log(DEBUG, msg);
},
info: function()
{
var msg='';
for (i=0; i < arguments.length; i++) { msg+=arguments[i]+' '; }
this._log(INFO, msg);
},
is_firebug_installed: function() { return ! eval('typeof(console)=="undefined"'); },
now: function() { D = new Date(); return D.toLocaleTimeString() + ':' + D.getMilliseconds().toString(); },
t: function(t0) { return ( ( new Date() ) - t0 ) / 1000; },
alert: function(msg) { alert(msg); }
});
GlobalLogger = new Logger(INFO);
function l() { GlobalLogger.debug($A(arguments).join(' ')); }
l("Logger loaded");
Javascript Logger
Author: Tom at klenwell@gmail.com
License: LGPL License
______________________________________________________________________________*/
var NBSP = ' ', DEBUG = 1, INFO = 2;
var Logger = Class.create({
/* Javascript Logger
There are probably better versions out there, but this is my own. Its
most significant feature is that it determines whether Firebug is loaded
or not and adjusts its output accordingly.
*/
levelTag : ['', 'DEBUG', 'INFO'],
has_firebug : false,
Journal : [],
pop_interval : 5, // when firebug absent, how often we want to dump an alert
max_pop_length : 20, // when firebug absent, max length of items in pop-up window
initialize: function(level)
{
if ( level == null ) this.level == DEBUG;
this.has_firebug = this.is_firebug_installed();
this.debug("has_firebug:", this.has_firebug);
},
_log: function(lvl, msg)
{
if ( this.level < lvl ) return;
timestamp = '[' + this.now().toString() + ']';
level = this.levelTag[lvl] + ' >>>';
this.log(timestamp + NBSP + level + NBSP + msg);
},
log: function(message)
{
this.Journal.push(message);
if ( !this.has_firebug )
{
if ( !(this.Journal.length % this.pop_interval) )
{
this.alert(this.Journal.join("\n"));
if ( this.Journal.length > this.max_pop_length )
{
this.Journal.splice(0, Math.ceil(this.max_pop_length / 4))
}
}
return;
}
console.log(message);
},
debug: function()
{
var msg='';
for (i=0; i < arguments.length; i++) { msg+=arguments[i]+' '; }
this._log(DEBUG, msg);
},
info: function()
{
var msg='';
for (i=0; i < arguments.length; i++) { msg+=arguments[i]+' '; }
this._log(INFO, msg);
},
is_firebug_installed: function() { return ! eval('typeof(console)=="undefined"'); },
now: function() { D = new Date(); return D.toLocaleTimeString() + ':' + D.getMilliseconds().toString(); },
t: function(t0) { return ( ( new Date() ) - t0 ) / 1000; },
alert: function(msg) { alert(msg); }
});
GlobalLogger = new Logger(INFO);
function l() { GlobalLogger.debug($A(arguments).join(' ')); }
l("Logger loaded");
Usage:
Logger = new Logger();
Logger.pop_interval = 3;
Logger.log('a log message');
Logger.debug('a debug message');
Logger.info('an info message');
Logger.info('if no firebug, we should put up an alert now');
Logger.pop_interval = 3;
Logger.log('a log message');
Logger.debug('a debug message');
Logger.info('an info message');
Logger.info('if no firebug, we should put up an alert now');
This has been tested successfully on IE6 and, of course, Firefox. It does require the prototypejs library.
Labels: javascript
some rights reserved, © 2006