FireSymfony - Debugging symfony applications inside Firebug
– September 05, 2009
– 16 comments
In this series of articles I would like to present you FireSymfony, a Firefox add-on for debugging symfony applications inside the popular Firebug. In this first article I would like to present the add-on and explain how to use it. In the next article I will show how to install and setup FireSymfony.
FireSymfony saw the light of day on october last year. One motivation to do it was to integrate two of my favorites web debugging tools, Firebug and the symfony web debug toolbar (SWDT). Also with some fellow developers we were trying to address a problem caused by the SWDT in some of our projects, where the HTML injected by the SWDT was not compatible with our design, making the site looks "broken".
I started hacking some code by reading some tutorials on how to create a Firebug plugin among other resources on the web. After I saw the first protoype working I got really exited about the project, so I decided to develop it further. Soon after the release, The NetCircle, company where I work, decided to support the extension, providing hosting, a domain name and the logo designed by Olaf Horstmann who was at a design internship at the company. Also J. Wan a fellow designer joined the FireSymfony team. We worked together developing the new version, with a focus on improving usability and the presentation of information. The result of this is FireSymfony 1.1.x version.
Near one year later, thanks to the symfony community and support, the extension broke the 6000+ downloads mark and counts 500+ active daily users (According to the Mozilla Add-ons website stats). Adding to that, last saturday it became a Mozilla certified add-on, meaning that users don't have to register to download the extension and they will be notified of extension updates.
Now that you have a brief introduction off the extension let's see how to use it.
Provided that you successfully installed the symfony plugin and the Firefox add-on you should have a new tab inside Firebug called symfony. If you browse your site under dev environment you can click on the symfony tab to see the debug information that formerly would've been on the SWDT.
The information will be divided into these panels:
Vars and Config
Here we can inspect our configuration setup and the default PHP variables that are accessible by our application. Some of the information will be:
- Request variables
- Response information, like cookies, HTTP headers, included CSS stylesheets, HTTP metas, etc.
- Session User information.
- Settings, mostly what's inside the app.yml file and the current module.yml file. Here you can see how the configuration cascade acted upon the set up.
- Globals, like $_GET, $_POST, $_ENV, etc.
- A list of installed PHP extensions.
- Symfony information, i.e.: version and installation PATH.
You can browse through this information in the same fashion you do it while inspecting objects in Firebug.
Logs and Messages
Under this panel we can inspect all the symfony logs. They can be filter by type and category. As an upcoming feature we want to provide the ability to filter the logs by keywords entered by the developer.
This panel shows information regarding the cached components on the page. The special feature here is that you can roll over the information items on the toolbar to see the highlighted HTML on the page. This feature works in the same way as the Firebug inspector does.
The database tab displays the queries executed for the current action if any. You can click over a query to copy it to the clipboard making it easy to go and paste it on your SQL client to debug/explain the query.
The timer tab displays the amount symfony spent during the difference parts that compose the processing of a request and the final rendering to the user. The main difference with the SWDT is that here you can see a nice colored graph according to the time percentage for each section. Keep in mind that with symfony you can add new timers in order to gather more information about your application timing.
This tab displays the framework version, the memory usage for the current action execution and some configuration details related to your server, i.e.: is xdebug enabled? is cache enabled? and so on.
Those are the features implemented so far. We plan to continue improving the usability of the Firebug plugin and also adding new features for better browsing through the logs. Stay tuned and in the upcoming blog post we will see how to install and setup the extension.