Drupal for Firebug: Firebug talking Drupal

18

August 28, 2008 - 1:04am


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.

Comments

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

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

Thanks for putting this together.

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

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

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.

This is just a truly amazing tool.

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

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

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

(linked on the dl from the first paragraph)

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.

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

Thanks!

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

Shrop

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

I'm downloading and installing now!!

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

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');
?>

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

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

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).

Firebug can do things like inspect the HTML, manipulate the CSS etc.

Wouldn't it be great if it was possible to edit the Drupal HTML and CSS directly from FireBug?

Post a comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
Let us know you're human by typing in this code. The code is case sensitive.
Image CAPTCHA
Enter the characters shown in the image.
To prevent automated spam submissions leave this field empty.