FireSymfony - Debugging symfony applications inside Firebug
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.
Some Background
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.
Usage
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.
Cache
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.
Database
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.
Timer
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.
Info
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.
Future
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.
Help the Symfony project!
As with any Open-Source project, contributing code or documentation is the most common way to help, but we also have a wide range of sponsoring opportunities.
Comments
Comments are closed.
To ensure that comments stay relevant, they are closed for old posts.
FireSymfonyDebugData = {"cache":{"title":"reload and ignore cache","content":{"reload_url":"","cache_info":[]}},"config":{"title":"Configuration and request variables","content":{"request":{"parameterHolder":{"action":"index","module":"
But the content in the firesymfony addon are empty.
symfony 1.2.8
firesymfony addon 1.1.1
firesymfony plugin 1.1.1
* http://code.google.com/p/firesymfony/wiki/firesymfonyPluginSetupInstructions
In addition to the Firefox extensions and Symfony plugin, there's some YML fiddling to do as well so that the plugin's class is used instead of the basic SWDT class.
Question for Alvaro: I was using this in conjunction with caching, and found that my cached partials/components still get embedded debug styles (black border, and overlaid box in the top corner with an "X" button). With SWDT, I could click its "sf" icon and all in-line cache styles would disappear in tandem with the SWDT collapsing down to a square icon. With your plugin, the cache styles still show up, but since there's no toolbar on the page I can't find a way to turn them off. Is this outside the scope of your plugin? I considered the possibly the SWDT and caching classes were coupled in a way that SWDT knew to interact with the caching debug CSS, despite not being the source of their markup.
To the other users, the installation instructions should be on their way. Thanks for your patience.