I use Smarty, a template engine, at work. One of the most awesome things about it is the debug window, where it can list all the templates being used and variables that are available.

Mike Horn shared with me how a user, named Hipska, created a Smarty debug template file that works with Firebug. I thought it was so awesome and decided to share it with you too, but with a slight tweak of my own.

The Code

Here\’s the code. I\’ll explain how it works right after.

{* Smarty *}
{* debug.tpl, firebug version by Hipska, tweaked by GarrickCheung *}
{assign_debug_info}
{if isset($_smarty_debug_output) and $_smarty_debug_output eq \"html\"}



    
{literal}

{/literal}



Smarty Debug Console

included templates & config files (load time in seconds)


{section name=templates loop=$_debug_tpls}
    {section name=indent loop=$_debug_tpls[templates].depth}   {/section}
    
        {$_debug_tpls[templates].filename|escape:html}
    {if isset($_debug_tpls[templates].exec_time)}
        
        ({$_debug_tpls[templates].exec_time|string_format:\"%.5f\"})
        {if %templates.index% eq 0}(total){/if}
        
    {/if}
    

{sectionelse}
    
no templates included
{/section}


assigned template variables


    {section name=vars loop=$_debug_keys}
        
    {sectionelse}
        
    {/section}

            
{ldelim}${$_debug_keys[vars]|escape:\'html\'}{rdelim}
            
{$_debug_vals[vars]|@debug_print_var}
no template variables assigned

assigned config file variables (outer template scope)


    {section name=config_vars loop=$_debug_config_keys}
        
    {sectionelse}
        
    {/section}

            
{ldelim}#{$_debug_config_keys[config_vars]|escape:\'html\'}#{rdelim}
            
{$_debug_config_vals[config_vars]|@debug_print_var}
no config vars assigned


{else}

{/if}

How it Works

This debug template gives you two options on how to view it: the original method display\’s everything in a new pop-up window, the new and awesome method shows the same thing but in the Firebug Console. The template has an if statement/flag that checks whether it should be rendered in HTML or use Firebug. You\’ll have to do some digging on how to setup this flag in your configuration, but the flag is in line 4 defined as $_smarty_debug_output.

The default is to use Firebug. A function named Smarty_debug is defined at the bottom at line 143. When you run it in the Firebug console, it will print out the Smarty debug information in the console as collapsible groups. If the browser doesn\’t support console, then you probably shouldn\’t be using this method, that\’s why the HTML version is available.

Smarty_debug(); //type this in your Firebug Console

It bothered me a little that Hipska\’s method printed out every line in the group once Smarty_debug function is called. Now here\’s my tweak: I\’ve made it optional to print out as a collapsed group but you WILL need Firebug 1.3+ (if it works on other versions, please let me know). All you need to do is supply a boolean argument.

Smarty_debug(true); //prints out a collapsed group

Conclusion

I really love being able to print out the Smarty debug data to the Firebug Console because I won\’t have to deal with an additional pop-up every time. I get\’s a little annoying and I think it suck\’s up more memory. Thank you Hipska and Mike!