New in Symfony 2.8: Redesigned Web Debug Toolbar
Warning: This post is about an unsupported Symfony version. Some of this information may be out of date. Read the most recent Symfony Docs.
The Symfony Web Debug Toolbar is one of the most recognizable elements of Symfony applications. Displayed millions of times every day around the world, it greatly increases the productivity of Symfony developers.
Symfony pioneered this kind of toolbar back in 2005 for symfony 1 applications. At that time, the toolbar looked as follows:
The release of Symfony 2.0 introduced a new design that included much more information and a fully-featured profiler:
Since we're approaching the Symfony 3.0 release, the biggest launch in Symfony history, we decided it was the right moment to introduce a toolbar redesign:
From a design point of view, the toolbar is radically different: dark vs light, flat vs textured, straight vs organic/curved:
Moreover, the new toolbar takes much less space than the previous one, which is great when you use third-party bundles that include their own toolbar panels:
The first contributors for this space reduction are the request and config panels. The request panel now displays the route name instead of the whole controller name (usually a class + method name):
Meanwhile, the config panel just displays the Symfony version and all the other related information is moved to the floating panel:
The other main contributor to the space reduction is that panels which don't include any information are no longer displayed. If your page doesn't contain forms, Ajax requests or database queries, you won't see those panels.
Another important difference is the way errors and warnings are displayed. Previously we displayed just a small green/yellow/red icon, whereas now we change the entire panel background to easily spot when some error happens:
The new toolbar would have not have been possible without the awesome Symfony community. The related pull request got almost 150 comments and reviews made by 28 participants. In total, 44 commits were needed to tweak the final design, comprising 1,200 changed lines across 31 files.
The redesigned toolbar is already available for any Symfony 2.8-dev or 3.0-dev application. Please test it in your own applications and report any error before Symfony 3.0 is released on November 2015.
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 are closed.
To ensure that comments stay relevant, they are closed for old posts.
Though I still like old design too :)
@Rob I have the toolbar working in a 2.7 application. This feature basically changes the HTML/CSS/JS elements of the toolbar, so it's safe to use in in other versions. The only problem is that some templates (like "translation.html.twig") contain elements that only work on Symfony 2.8+.
I can hardly wait! :-)