Drupal for Firebug

Posted on Aug 09 2008 in Web Development

Last month Chapter Three announced they were working on a Firefox plugin and Drupal module that would allow Firebug to talk with Drupal. As a Web Developer who uses Firebug heavily every day and who specializes in Drupal, this announcement from Chapter Three got me a little excited -- so I installed the plugin, enabled the module, and gave it a shot.

Installing the DrupalForFirebug Firefox Extension

Downloading and installing the DrupalForFirebug Firefox extension was basically like installing any other extension for Firefox: find it, click the link, let Firefox install it, then restart Firefox. Except one little oddity: in order to download/install from addons.mozilla.org, you have to have an account on the site and be logged in because DrupalForFirebug is in a pre-release status. Not a big deal, so I signed up, clicked the link in my confirmation email, and went on my way downloading the extension.

Installing the DrupalForFirebug Drupal Module

Installing the Drupal module, on the other hand, involved nothing special at all. I just downloaded the module from the Drupal.org project page, unzipped it into my Drupal install's sites/all/modules directory, and enabled the module in the Drupal module administration page (note there are two modules, both required). Also, if you plan to use DrupalForFirebug with a user other than user 1, then you may have to grant the appropriate permissions (I did this for testing things as an anonymous user).

Using DrupalForFirebug

One of the unfortunately rare, but pleasantly surprising events when working with pre-release software, especially software targeted at other developers, is when it works the way it is intended the first time. I took my newly-enhanced Firefox and navigated to the login page of my newly-enhanced Drupal instance and was very pleased to see this section available in my Firebug window:

Drupal for Firebug tab showing a form array.

Drupal for Firebug tab showing a form array.

The DrupalForFirebug module processed the forms on the page (the login form in this case) and output useful information inside a hidden div at the bottom of the page. The Firefox/Firebug extension then pulls that hidden data and puts it into a convenient spot inside the ever-open Firebug interface. And the fun doesn't just stop with outputting FormsAPI arrays. DrupalForFirebug will also tell you useful bits of info, such as:

  • List of SQL queries, their exection times, and what function called the query (just grabs output from Devel module)
  • Dump of any user objects loaded during page execution
  • Dump of any node loaded during page execution
  • Dump of any view built during page execution

DrupalForFirebug also provides a quick and easy wrapper around Devel's execute PHP code feature, letting you execute arbitrary PHP code on the server from within the Firebug window.

Getting the Most of out DrupalForFirebug

If DrupalForFirebug just had the features already mentioned, it would be worth using. However, the authors took some initiative and included a means for module developers (or debuggers) to output information from their code in a meaningful and well-organized fashion. If you're a seasoned Drupal developer, you've probably done your share of print_r($node) and the like when trying to track down an odd behavior or figure out what data is available to you at the theme level (let's just ignore real-time debugging for now, even though that's still by far my preferred method). The DrupalForFirebug module provides a simple function, firep(), that lets you send in any data, and DrupalForFirebug will wrap it in PRE tags and output it in the General tab of Firebug.

Here's an example I had while working on a site just recently. I had some data stored in the session while going through a wizard-like series of pages. I was debugging the process and I wanted to be able to quickly see what was in the session on each page load. Real-time debugging wasn't ideal for this as there were many page loads during the series of tests I was performing, so instead, I used firep():

function my_module_menu($may_cache) {
  if (!$may_cache) {
    if (module_exists('drupalforfirebug')) {
      firep($_SESSION, 'Session');
    }
  }
}

This bit of code put the entire $_SESSION variable dump into the General tab in Firebug on every page load, so I could get a quick insight into what data was being maintained in the session. Using this I was able to quickly track down a silly typo that was putting the data I wanted into the wrong element of the session variable. If you're wondering what the optional second argument is, it is a label placed above the data output in the Firebug window. This is so you can identify various dumps if there are more than one during a page load.

Conclusion

DrupalForFirebug has earned itself a place in my Drupal toolkit for now. I'm curious to see how often I'll use it over real-time debugging, and I'm anxious to see if the developers of this tool maintain it well and/or take it any further than it already is.