Drupal for Firebug: Firebug talking Drupal


Firebug is a hell of a thing and at Chapter Three we use it regularly - as many others do - to analyze and debug our web development work. It can do things like inspect the HTML, manipulate the CSS, execute and debug Javascript, and monitor site performance and download times. It is so great that we wished it spoke Drupal and knew our name - kind of like the cute girl at the dance. Things get a little better when people know your name.

It is in that spirit that that Drupal for Firebug was developed as a way to extend the capabilities of Firebug by mixing in a little Drupal. Drupal for Firebug is both a FireFox Extension and a Drupal Module. To celebrate Drupalcon Szeged there are now releases for both Drupal 5 and Drupal 6 available. Get the extension and download the module, check our the test and demonstration site, and watch the drupal magic happen right in your Firebug window:

With a copy of the module and the Firefox extension installed, a developer can see debug messages, examine the SQL query log (with Devel module), look at how a Drupal page load is handling a site's users, views, nodes, and forms, and even execute PHP. The goal of the module and extension is to create a framework for centralizing Drupal development and debugging work using power of Firebug. The major features include:

  • More centralization of web development debugging information by moving that information from Drupal page view into separate Firebug window. This helps to provide a clean separation of development debug information from the rest of the site.
  • Clean and external debugging message text and dumpable PHPs arrays and objects which can be displayed in the Firebug debugging window using the handy firep() function where they can be viewed without disrupting the rest of the page flow. There is also a handy "debug message only" search feature which is helpful in locating specific pieces of information in the debugging output.
  • Integration with the wonderful Devel module is available to provide a Firebug accessible SQL query log. Since the Firebug debugging window can be resized, hidden, or broken out as a separate window, it provides additional options (beyond appending the log to the bottom of the screen) for viewing the SQL query log.
  • Complete information about each user and node and view and form that is accessed during a page load is available. This can be invaluable in determining what Drupal items are being referenced and what $op is being performed on them. There is awareness of the original and modified state of the view and form items and even smart color highlighting to tell you when additions, changes, or deletions have happened to the item during the hook_form_alter or hook_views callbacks.

This is only the initial release of the module and there are plenty of tweaks and improvements to make down the road. The real secret sauce will be figuring out what are the most useful pieces of information to display in the Firebug window and making some important XUL interface improvements to the Firefox Extension to increase usability around the viewing and sorting of debugging data. Think HTML browser style functionality for the User, Form, Node, and View arrays and objects. But for now, at least it speaks our language.

Sweet!

Wow - I haven't been looking this forward to installing a module for a long time - good idea, good work!

Sweeeet

Holy poop, that is one sweet module/extension. Quick php snippets right there would be handy!

Thanks for putting this together.

Very nice

Looking forward to giving this a whirl, would sure streamline my debug process a lot. Thanks!

Amazing! Great Work!

As one of those people who spends 50% of his time debugging drupal and 50% guiding others this will definetly be a crucial work tool.
I'm sure that as it goes with firebug... (Can't understand how I did stuff without it) this plugin will join the same notion.
thanks for a very valuable tool
Lior

Wow.

The first thing I saw on the page was that screenshot, and I immediately thought to myself, "Wow, I hope that's not just a mockup!" Great idea guys, can't wait to give this a try.

jaw, meet floor

This is just a truly amazing tool.

For the work that's been put into this, and for releasing it to the community, thanks.

Ted Danson?

Why is "Ted Danson" one of the tags assigned to this post?

Because everyone knows your name

http://www.youtube.com/watch?v=Lf5ojdakpq8

(linked on the dl from the first paragraph)

Firebug has changed the way

Firebug has changed the way I debug and Drupal has changed the way I develop sites.

I'm quite excited and very appreciative of such a great tool.

AWESOME

Initial reaction: why didn't I think of this? This rocks. Especially the SQL and Forms tabs.

Thanks!

unreal!

This is awesome! Thank you so much for sharing with the community.

Shrop

WOW!

I can't believe it... this looks amazing!!!

I'm downloading and installing now!!

OMG

thank you so much for this. so great!!!!

Similar Approach

This seems very similar to:
http://www.lullabot.com/articles/quick_and_dirty_debugging#comment-2905

I just added a function to my own copy of the devel module that does this. I use it to dump things just when I need them, like dpr().

<?php
$node
=node_load(1);
dpc($node);
?>

or

<?php
$form
=drupal_get_form('user_register');
dpc($form);
?>

My function looks like this:

<?php
function dpc($object, $name='Drupal Object'){
 
drupal_add_js('console.log('.json_encode(array($name=>$object)).');','inline');
}
?>

Enjoying DrupalForFirebug

Great job, guys. I wrote a brief review/guide over here

can someone confirm for me

can someone confirm for me whether this module and or by default the devel module which it depends on will display the underlying sql queries generated by views?

thanks

getfirebug.com/extensions

Great to see that the number of extensions for Firebug is growing! I have noticed that this extension is not yet listed on getfirebug.com/extensions page. If you are interested to have it in the list, just file a new bug in Firebug issue list: http://code.google.com/p/fbug/issues/list and I'll make sure the site is updated.
Jan Odvarko (member of the Firebug development team).