New in Symfony 2.8: Redesigned Web Debug Toolbar

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:

Symfony 1 Web Debug Toolbar

The release of Symfony 2.0 introduced a new design that included much more information and a fully-featured profiler:

Symfony 2.0 Web Debug Toolbar

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:

Symfony 2.8 Web debug toolbar

From a design point of view, the toolbar is radically different: dark vs light, flat vs textured, straight vs organic/curved:

Symfony 2.8 Toolbar design differences

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:

Symfony 2.8 toolbar space differences

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

Symfony 2.8 toolbar request panel

Meanwhile, the config panel just displays the Symfony version and all the other related information is moved to the floating panel:

Symfony 2.8 toolbar config 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:

Symfony 2.8 toolbar errors and warnings

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.

Comments

Nice job :)
Love it! Nice to ready and neat! :)
Very good job. Thanks Javier and all others ;)
Good & nice job
So clean! Love it! Nice job guys! :)
good job!
Awesome, but since the errors will be more visible I hope we'll be able to turn off the "missing messages" warning easily somehow, or make it yellow like an actual warning
Excellent!
It's nice, I like it!
Though I still like old design too :)
Nice! It also could have an option for dark or light mode in configuration :)
Awesome +1
+1 looks nice
The new debug bar looks great! :)
It looks awesome!
Beautilful! :)
I'm going to test it just right now. Seems to be a good Feature, really necessary so I'm dealing with Sonata Bundles that are adding a lot of stuff on the toolbar. Guys, lately you are doing a really good job on Symfony, everyday I'm feeling more confident with the project. Well done! :)
Anyone know if it makes any calls or relies on any resources outside of its own bundle that would be incomparable with 2.7?
More importantly: can it be reliably used with 2.7? I know 2.7 code is comparable with 2.8, the inverse may nit be true. Was anything introduced in 2.8 that the toolbar depends on and wouldn't be in 2.7?
Thank you all for the positive feedback :)

@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 love it! :)
Love it!
Looking forward using Symfony 2.8 while fixing deprecation warnings.
I can hardly wait! :-)
Is looking great, Love it!
Looks great!
Nice!
Nice and clear and doesn't full focus away from the front-end of the application; I just wish the project I'm working on was on Symfony and not ZF2 *sniff*
It's now even more sexy! :-)
Love all of these changes! Looks great. Fantastic job, everyone!
Good work !
Looking forward to it. Maybe someone should fix the release schedule image. It's lost its accuracy since 2.8 was announced as the last of the 2.* releases...

http://symfony.com/doc/current/_images/release-process.jpg
It's looking cool....
Niceee
Awesome! Hope the translation pane will also be shown, or can be configured to be shown if fallback messages are used.
How toolbar detects if my page (view) uses AJAX request?
@Vladimir you can check out the JavaScript code that logs the Ajax calls here:

https://github.com/symfony/symfony/blob/2.8/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig#L207

Comments are closed.

To ensure that comments stay relevant, they are closed for old posts.