BlackBird – JavaScript logging tool

Written by Greg Winiarski on October 19, 2008 in General - 7 Comments

If you ever created a script with JS, you probably know how painful logging messages with alert() function is. Not only you can see one message at the time but also you need to click OK button to go further. I think this is the reason why Scott Olson created BlackBird project. As you can see on the screenshoot, this project is not only useful but also looks great.

In this post i want to briefly review this utility and then show you how to use it, so if you are not interested in the review you can just skip ext part.

BlackBird Review

First of all let’s start with the url to the project homepahe. You can find there complete BlackBird documentation, you will be amazed how many features this little tool has got.

BlackBird installation is quite simple you just need to include BlackBird CSS and JS files in <head> tag. BlackBird allows for logging four types of messages: info, warning, debug and error. However the only difference between them that i found is icon shown next to the message. To add special functionality you have to write your own handlers for each message fortunately it was well explained on project homepage.

You can also log variables, however logging arrays and objects does not look so good, there are just displayed values from array and there is no way to guess array structure not to mention objects.

Great feature that is not available in JS core is profiling, which allows to test how long it takes to execute a part of code.

There are also functions for moving and resizing BlackBird window, which is great, but i would prefer to drag and resize window with mouse rather then doing it with JavaScript.

JS logging tool in action

Before we can do some coding you need to download BlackBird. Create “blackbir”d directory somewhere on your HDD and unzip all files there. (Actually you will need only “blackbirdjs” directory.)

Now in the folder you created at the beginning create index.html file and put this inside:

<html>
 
<head>
    <title>BlackBird - Test</title>
    <script type="text/javascript" src="bb/blackbird.js"></script>
    <link type="text/css" rel="Stylesheet" href="bb/blackbird.css" />
    <script>
    log.move(200);
    </script>
</head>
 
<script>
function bb_logging(x)
{
    log.debug( 'This is a debug message' );
    if(x==1)
    {
        log.info( 'Messages was logged' );
    }
    log.warn( 'Warning message' );
    log.error( 'Fatal error message' );
    var arr = new Array(1,2,3,new Array(4,5,6));
    log.info(arr);
}
 
function bb_profiling()
{
    log.info('bb_profiling executed');
    var num = Math.random()*10;
    num = Math.round(num);
    log.debug('Random number is: '+num);
    log.profile('profiling loop');
    var x = 1;
    for(var i =0; i<num; i++)
    {
        x *= num;
    }
    log.profile('profiling loop');
 
    log.info('end of bb_profiling');
}
</script>
 
<body>
<h1>Ditio.net - BlckBird Test</h1>
<a href="#" onclick="bb_logging(1); return false">Test Logging</a><br>
<a href="#" onclick="bb_profiling(); return false">Test Profiling</a>
</body>
</html>

Now you can open index.html in web browser, click on any of links on the website and you should see messages popping in the BlackBird window.

About the Author

Greg Winiarski is a freelance PHP and JavaScript programmer. He specializes in web applications and WordPress development.

7 Comments on "BlackBird – JavaScript logging tool"

Tim Down November 3, 2008 at 3:19 pm ·

log4javascript (http://log4javascript.org) is a more fully featured JavaScript logging tool that has the features you mention that Blackbird lacks.
Greg November 4, 2008 at 5:46 pm ·

Hi Tim and thanks for the info, log4javascript looks great, i think i will give it a test drive soon enough.
Tom February 6, 2009 at 3:36 pm ·

I get a “Microsoft JScript runtime error: ‘log’ is null or not an object” in IE but in FF everything works fine. How’s that?
Greg February 6, 2009 at 10:04 pm ·

I have no idea as i am using Linux most of the time, seems like script was not loaded in IE, it’s hard to tell without a code, you can post it here, or even better ask on BlackBird forum, if it’s BB bug they will fix it.
MySiteComeTrue April 7, 2009 at 10:15 pm ·

Alerts are the most annoying thing around. Good thing someone is doing something about it.
Waste disposal Bristol May 18, 2010 at 7:24 pm ·

This is an interesting site. This is the first time I have been here, but have bookmarked you guys for the future!
Rincewind42 June 11, 2010 at 11:05 am ·

Probably too late to help Tom with his question but just in case other people are looking for the answer:

JScript used by IE is not exactly the same as Javascript. JScript is Microsofts own version of Javascript by Sun. While on the surface both are very very similar, there are a few differences. For example, the way they handle the browser DOM is slightly different. This can cause a bug to appear on one browser while the same script works fine on another