Tuesday, September 30, 2008

FireSymfony - A Firebug extension for symfony

While developing websites is nice to have at hand the right tools to do the job effectively. One of the tools I like the most is Firebug for all it’s debugging capabilities. Also, because I develop websites using symfony, the web debug toolbar provided by the framework is very handy to know what was happening in the server while the request was processed.

But sometimes the toolbar position makes impossible to use some features of the layout of our website, like a link menu on the top right corner. It also happens that while we display a small popup with the resize functionality disabled it’s turns hard to access all the data displayed by the toolbar.

The solution I’ve came up with is to move all the data from the toolbar to Firebug, actually, to port the symfony web debug toolbar as a Firebug extension. This will remove the toolbar from the page html and will show it in a convenient place that almost every web developer is used to.

Taking advantage from the cool new features of symfony 1.2 I started a project to develop a symfony plugin to send the data to the Firebug extension. The later has been smartly called FireSymfony.

The roadmap I'm following is the next one:

  1. Extend the sfWebDebug class and it’s panels to send JSON data to the browser and not html markup. (Thanks to the neat code design of symfony this task has been really easy).
  2. Create the extension layout inside Firebug to present the same functionality provided by the web debug toolbar.
  3. Add some CSS styles to make it look pretty.

Currently I’m finishing the second step and the idea is to release both the symfony plugin and the Firebug extension during october, so stay tuned.

Below I added a screenshot of the current state of the project. Please provide feedback about the idea so I can try to make it better and useful for everyone. 



Unknown said...

Will you consider making it work with symfony 1.0 as well? There are so many projects running on that version, and they shouldn't miss this nice feature :)

Alvaro Videla said...

@aime blaise: once the first version of firesymfony is out, our goal is to add support for all the versions of symfony.

Unknown said...

This is really a useful idea. I didn't even know it was possible to create an extension layout into firebug.

Can you please point me some documentation about that?

Thanks, I will certanly use this plugin.

Alvaro Videla said...

@lorenzo you can check this website: http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-hello-world-part-i/

It also points to other resources.

Anonymous said...

It would be great to have an input field above the messages list, that would let you filter the messages types and texts based on the entry of the user.

Stefan Koopmanschap said...

Wow, excellent work! This looks very useful!

Ryan Weaver said...

Very cool idea, very techie - I look forward to seeing it.

Anonymous said...

Awesome idea! If its possible, try to enable it for ajax requests as well. This would be truly helpful.

Unknown said...

How does this compare/contrast with FirePHP: http://www.firephp.org/? We've integrated it in Zend Framework as of 1.6, and it seems to have integration points with all major PHP frameworks out there. To be honest, we chose to get behind FirePHP as a preferred alternative to something like the debug toolbar in Symfony (which is very cool, and definitely served as an inspiration for us). Christoph has been an excellent contributor to ZF, and we plan to do much more with FirePHP and Wildfire going forward. If FireSymfony doesn't already support Wildfire, you might consider taking a look at it. I'm sure Christoph would help you out in any way he can.

Alvaro Videla said...

I think the tow tools could be complementary one to another, but none of them could be a replacement for the other. I think that the debug toolbar is more than logs about what happened during the response generation.
- It shows the symfony/server/php config.
- Cache information with partial highlighting.
- One click Query copying to the clipBoard.
- Timers information.

Also I think that the web debug toolbar and also FIreSymfony is more about to provide an easy and organized access to the debug information, through the different panels, etc.

As for framework integration, I wrote the first symfony plugin for FirePHP.

Also I want to integrate FireSymfony with FIrePHP or WildFire -I want to send the debug data in the headers-. But I plan to do this later, when the extension get more feature complete. When I get myself to do this, Christoph will be the first one I will ask help for. As is written in the source of FireSymfony, his tutorial about extending Firebug was one of the primary learning sources when I started this, and still is.

I hope this answers your questions.

Anonymous said...

Hi alvaro

Am searching for some live websites which are using symfony.
Am not able to fine such. If you know can you list some of them?