Diagnostic logging of JavaScript using Firebug

Even though Firebug supports an endless number of more complex JavaScript debugging features, the fundamental approach of using diagnostic prints to debug scripts is still alive and well. In this recipe, we will be looking at Firebug's console() function and a few of its variants.

Getting ready

It is assumed that the Firebug add-on has been successfully installed in Firefox. We will also be using the myzen theme created earlier in this book as an example theme in this recipe.

How to do it...

Firebug comes with a console to log output which is accessed using the console command. To see this in action,

1. Navigate to the myzen theme folder at sites/all/themes/myzen.

2. Browse to the js subfolder where the JavaScript files are stored, and create a file named console.js.

3. Open this file in an editor and add the following script to it:

   Drupal.behaviors.consoleDebug = function (context) {
   var s = 'Foo';
   console.log(s);
   console.debug(s);
   $('a.active').each(function...