Module of the Month: SilverStripe DebugBar

Bug free code you say... I don’t think so. Bugs are a natural part of development, despite every intention to write bug-free code. The ability to find and fix bugs fast is essential for keeping momentum during a project.

This months ‘Module of the Month’ is the SilverStripe DebugBar as it has recently been updated for SilverStripe 4, given some design love and had a few enhancements added to it. Upgrades to the module were made possible via the Common Web Platform co-funded development pool.

What’s new with the Debug Bar

We’ve previously written about how to debug like a pro, where Simon (@Firesphere) gives a nice overview of the module in its entirety.

Originally created by Thomas Portelange, also known as LeKoala, the SilverStripe DebugBar is essentially a wrapper for the PHP DebugBar but with a few customisations to favour SilverStripe development.

With SilverStripe 4.0.0-beta2 now live, and a stable release on the horizon, ensuring that the DebugBar was compatible with SS4 was high priority. The DebugBar is used widely by both CWP developers as part of the wider performance guide, and by the SilverStripe open source community.

Redesigned for developer experience

To make debugging a less arduous, we’ve made a few UX changes to styling, spacing and the overall layout of the toolbar. As part of the refactor, we changed button colours, icons, the SilverStripe logo and made the icons informational tooltips. The DebugBar’s colour contrast now meets an AA standard as part of the Web Content Accessibility Guidelines.

Below you can see a before and after snapshot of the tool bar.

What else is new?

For deeper insights into your project, a Templates tab was added to the module. View how many templates calls are made on each page and easily identify the file path responsible for the template lives in the root directory. This is helpful when identifying duplicate template calls. 

To install the DebugBar Module;

composer require --dev lekoala/silverstripe-debugbar

And that’s it for the updated DebugBar, now go get those bugs!