The Ultimate Prestashop Module and Theme Development Tool

Debugging Prestashop Templates

While stumbling around the internet as you do when pondering a particularly awkward programming challenge, I came across an excellent post on smarty debug with FireBug. This inspired me to pull together a Prestashop module to allow store owners, designers and developers to view indepth debugging data from right within the Prestashop environment.

Update - 22nd March 2011: Easy Smarty debugging for Prestashop 1.4.x

Smartydebug screenshot

I think most people working on Prestashop development projects have longed for an easy way of identifying which template variables are set on which page, and although this doesn't tell you at which point in the page rendering process a variable may be available, it does give an important insight into how to leverage otherwise missed opportunities to enhance a site's design and functionality, and catch errors.

All credit for the FireBug template has to go to the original author's post at PHPhulp on Smarty Firebug debug.tpl. The latest version adds support for themes using either Smarty2 or Smarty 3, depending on the admin setting.

How to use it

You must install FireBug in your Firefox Browser to use this with the 'Use FireBug' module option enabled (default).

You can however disable FireBug support in the module and use the traditional javascript popup instead. Just enable debug in the module admin settings page and visit our front office page. Note that you may need to refresh your page for it to render correctly in this mode, and remember that every visitor to your site will see the popup!!

Recommended steps to use this tool

  1. If you haven't already, then install the FireBug Add-on to Firefox.
  2. Enable the Console in FireBug by clicking on the down arrow beside "Console" and selecting 'Enable'.
  3. In the module settings enable the smarty debugging in Prestashop by ticking the 'Debug' option and clicking update.
  4. At the FireBug console prompt (>>>) enter: Smartydebug(); or *Smartydebug(true);* (both case-sensitive) after each page load to display debug data.
  5. Enjoy viewing all you ever needed to know about your module or theme's template internals!
  6. Disable the 'Debug' option in this module as soon as you are finished your debug session.

Note 4: Using Smarty_debug(true); enables grouping so that some of the elements can be collapsed to improve readability.

Dowload it Now: Prestashop Smarty Debug 0.1.0

Update - 22nd March 2011: Easy Smarty debugging for Prestashop 1.4.x