Blackbird javascript debugging with PHP

If you’re still using the javascript “alert()” function to output all of your debug information then take not: You need Blackbird!

Blackbird creates a little window to output all your javascript debugging information. When you need it, you can pop it up with a quick key press and all the output from your javascript programs is there.

You can put different types of information out to the window then filter the display to just show what you need. You have a choice of Information, Debug, Warning, Error or Profile. The first four just output text, but the last takes a label to start a timer, the next call with the same label outputs the time difference.

It’s really simple to install. Just include a little javascript and CSS file like this:

1. <link type="text/css" rel="stylesheet" href="/PATH/TO/blackbird.css" media="screen">
2. <script type="text/javascript" src="/PATH/TO/blackbird.js"></script>

Make sure the script tag is above any other javascript you might want to debug.

Now all you have to do is call one of the functions:

1. // Output text marked as debug:
2. log.debug( "I'm trying to debug this thing" );
3. // Output text marked as information:
4. log.info("Hello World!" );
5. // Start a timer with label testFunc1
6. log.profile("testFunc1");
7. // Stop the timer and output time (You'd usually do something between the two profile calls)
8. log.profile("testFunc1");

That’s all great and really useful. Most of the time however, you’ll not want to include the Blackbird code, so with a little bit of PHP magic you can choose, on the fly, when to include it. Place this code in your PHP file in the HEAD section of the resulting page:

1. if( isset( $_GET["debugging"] ) )
2. {
3. echo <<<END
4. <link type="text/css" rel="stylesheet" href="/PATH/TO/blackbird.css" media="screen">
5. <script type="text/javascript" src="/PATH/TO/blackbird.js"></script>
6. END;
7. }
8. else
9. {
10. echo <<<END
11. <script type="text/javascript"><!-- <![CDATA[
12. var log={toggle:function(){},move:function(){},resize:function(){},clear:function(){},debug:function(){},info:function(){},warn:function(){},error:function(){},profile:function(){}};// ]]>-->
13. </script>
14. END;
15. }

So the simple idea here is that if you include “debugging” in your URL call then Blackbird code will be included, at all other times the log functions are set to empty so no code will be output. This allows you to leave the actual debug calls in your code, without them causing errors or being display.

Here’s how my page works with this:
With debug (don’t forget to press F2)
http://www.akademy.co.uk/index.php?debugging
And without:
http://www.akademy.co.uk/index.php

The javascript “alert()” function doesn’t even come close!

Check out Blackbird here: http://www.gscottolson.com/blackbirdjs/