Smarty Debug with Firebug
Posted on | April 16, 2009 | 8 Comments
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 | {* Smarty *} {* debug.tpl, firebug version by Hipska, tweaked by GarrickCheung *} {assign_debug_info} {if isset($_smarty_debug_output) and $_smarty_debug_output eq "html"} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Smarty Debug Console</title> {literal} <style type="text/css"> /* <![CDATA[ */ body, h1, h2, td, th, p { font-family: sans-serif; font-weight: normal; font-size: 0.9em; margin: 1px; padding: 0; } h1 { margin: 0; text-align: left; padding: 2px; background-color: #f0c040; color: black; font-weight: bold; font-size: 1.2em; } h2 { background-color: #9B410E; color: white; text-align: left; font-weight: bold; padding: 2px; border-top: 1px solid black; } body { background: black; } p, table, div { background: #f0ead8; } p { margin: 0; font-style: italic; text-align: center; } table { width: 100%; } th, td { font-family: monospace; vertical-align: top; text-align: left; width: 50%; } td { color: green; } .odd { background-color: #eeeeee; } .even { background-color: #fafafa; } .exectime { font-size: 0.8em; font-style: italic; } #table_assigned_vars th { color: blue; } #table_config_vars th { color: maroon; } /* ]]> */ </style> {/literal} </head> <body> <h1>Smarty Debug Console</h1> <h2>included templates & config files (load time in seconds)</h2> <div> {section name=templates loop=$_debug_tpls} {section name=indent loop=$_debug_tpls[templates].depth} {/section} <font color={if $_debug_tpls[templates].type eq "template"}brown{elseif $_debug_tpls[templates].type eq "insert"}black{else}green{/if}> {$_debug_tpls[templates].filename|escape:html}</font> {if isset($_debug_tpls[templates].exec_time)} <span class="exectime"> ({$_debug_tpls[templates].exec_time|string_format:"%.5f"}) {if %templates.index% eq 0}(total){/if} </span> {/if} <br /> {sectionelse} <p>no templates included</p> {/section} </div> <h2>assigned template variables</h2> <table id="table_assigned_vars"> {section name=vars loop=$_debug_keys} <tr class="{cycle values="odd,even"}"> <th>{ldelim}${$_debug_keys[vars]|escape:'html'}{rdelim}</th> <td>{$_debug_vals[vars]|@debug_print_var}</td></tr> {sectionelse} <tr><td><p>no template variables assigned</p></td></tr> {/section} </table> <h2>assigned config file variables (outer template scope)</h2> <table id="table_config_vars"> {section name=config_vars loop=$_debug_config_keys} <tr class="{cycle values="odd,even"}"> <th>{ldelim}#{$_debug_config_keys[config_vars]|escape:'html'}#{rdelim}</th> <td>{$_debug_config_vals[config_vars]|@debug_print_var}</td></tr> {sectionelse} <tr><td><p>no config vars assigned</p></td></tr> {/section} </table> </body> </html> {else} <script type="text/javascript"> // <![CDATA[ var Smarty_debug = function Smarty_debug(collapsed){ldelim} var group = (collapsed) ? console.groupCollapsed : console.group; group("Smarty Debug"); group("Included templates & config files"); {section name=templates loop=$_debug_tpls} console.log("{$_debug_tpls[templates].filename|escape:javascript}{if isset($_debug_tpls[templates].exec_time)} - {$_debug_tpls[templates].exec_time|string_format:"%.5f"}{if %templates.index% eq 0} (total){/if}{/if}"); {sectionelse} console.info("no templates included"); {/section} console.groupEnd(); group("Assigned template variables"); {section name=vars loop=$_debug_keys} console.log("{ldelim}${$_debug_keys[vars]|escape:'javascript'}{rdelim}:", {$_debug_vals[vars]|@json_encode}); {sectionelse} console.info("no template variables assigned"); {/section} console.groupEnd(); group("Assigned config file variables"); {section name=config_vars loop=$_debug_config_keys} console.log("{ldelim}#{$_debug_config_keys[config_vars]|escape:'javascript'}#{rdelim}:", {$_debug_config_vals[config_vars]|@json_encode}); {sectionelse} console.info("no config file variables assigned"); {/section} console.groupEnd(); console.groupEnd(); return "Smarty version {$smarty.version}"; {rdelim}; // ]]> </script> {/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.
1 | 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.
1 | 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!
Comments
8 Responses to “Smarty Debug with Firebug”
Leave a Reply
January 6th, 2010 @ 7:38 am
[...] 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 [...]
October 28th, 2010 @ 1:49 am
I am struggling a little bit with how to get this to work..
Where do I put Smarty_debug(true);??
Thanks!
October 28th, 2010 @ 2:12 am
I am half blind…
Didn’t read the comment in the Smarty_debug(); line
“Write this in your firebug console”…
Doooohh!!
Thanks!!!
October 29th, 2010 @ 1:41 am
@Martin Sjåstad: No problem. Honest mistake. I hope this has been helpful.
November 2nd, 2010 @ 6:51 am
@Garrick: Yes it has, the only thing now is to actually understand the code that produces all of this smarty awesomeness
Thanks for this tip!!
November 22nd, 2010 @ 6:09 am
Hi I placed the above code in debug.tpl, set $debugging to true but got the following error when typing Smarty_debug(true); in the firebug console:
ReferenceError: Smarty_debug is not defined { message=”Smarty_debug is not defined”, more…}
Did I missed something? I am using Smarty 2.6.26, Firebug 1.5.4
May 10th, 2011 @ 11:27 am
Hi,

Very interesting stuff
But I can’t make it working
I got alway this error message:
>>> Smarty_debug();
ReferenceError: Smarty_debug is not defined.
Could you please explain what to do exactly with the above code source? Where to copy this code?
What about debugging prestashop with firebug?
Thanks a lot
BR,
May 10th, 2011 @ 2:27 pm
@Azzer, @Safwen: Smarty_debug is a function that is defined in the smarty debug tpl file. Since you’re getting the error, then it means you’re not loading the correct file or portion of the file.
If you’re still getting the regular Smarty Debug window that pops open on every page load, you know for sure it’s not loading the correct code.
I suggest going back to make sure you’re loading the correct file. Also, make sure to check the $_smarty_debug_output variable. At the top of the code snippet, you’ll notice that the code is doing a check to see if it $_smarty_debug_output == ‘html’. If $_smarty_debug_output isset and == ‘html’ then it will print out the Smarty Debug window code.