A slightly improved Smarty Debug Template

dSmarty.tpl

{capture name='_smarty_debug_header' assign="debug_header"}
<div class="heading">
	<div style="float:right; width:280px; background-color: transparent;">
		<select id="varJump" style="display: block; width:190px; margin: 0px auto;"  title="You may use the keyboard by pressing [ENTER] to make your selection.">
			<option value="#debugTop" selected="selected">*Bryn's Smarty Debug*</option>
			<option value="#varsTop">*Var Section*</option>
	    {foreach $assigned_vars as $vars}
			<option value="#anch_{$vars@key|escape:'html'}">VAR {$vars@key|escape:'html'}</option>
			{/foreach}
			{if !empty($template_data)}<option value="#tplTop" selected="selected">*Tpl Section*</option>{/if}
			{if count($config_vars) > 0 }
			<option value="#cfgTop">*Conf Section*</option>
			{foreach $config_vars as $vars}
			<option value="#anch_cfg_{$vars@key|escape:'html'}">CONF {$vars@key|escape:'html'}</option>
			{/foreach}
			{/if}
		</select>
	</div>
	<h1>
		Bryn's Smarty Debug Console
	</h1>
	{if isset($template_name)}{$template_name|debug_print_var}{/if}
	{if isset($execution_time)}&nbsp;Exec Time {$execution_time|string_format:"%.5f"}{/if}
</div>
{/capture}
{capture name='__to_top_img_src' assign="top_img_src"}data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZDMTg2ODE3QjlGNDExRTA5NTY0QTE1MDVBRTU4QzRBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjZDMTg2ODE4QjlGNDExRTA5NTY0QTE1MDVBRTU4QzRBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NkMxODY4MTVCOUY0MTFFMDk1NjRBMTUwNUFFNThDNEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NkMxODY4MTZCOUY0MTFFMDk1NjRBMTUwNUFFNThDNEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6XUSbYAAAA1UlEQVR42mL8//8/AymABV3g+PHj04BUJpQ73dLSMgtZngmbYk1NzYNKSkrrQGyoGBwwwpwEU6yhobHv27dvLx48eHCeBQj+/fvXjmwTEzbFp0+f3vP69eu3f4CAiYmpEtkmmB8y7969GwXEDNu2bXsYFhamDhLMzs4+CdQDUuM0e/bsfUA6C6ZhurKy8jIQw8vLKwrmXpBiqEKwGriTQO4DYkYQ28bGxhHuQUbG/1B5RhQ/kAJI1oARcSEhIfO/fv3KA+WyEtIwffLkycfQxZA5AAEGAKOnZPxSG0RBAAAAAElFTkSuQmCC{/capture}
{capture name='__to_top_img_src' assign="top_img_hover_src"}data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgzOUExNzZGQjlGNDExRTBBRkNDQkU2NDIwRjRGN0EyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgzOUExNzcwQjlGNDExRTBBRkNDQkU2NDIwRjRGN0EyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODM5QTE3NkRCOUY0MTFFMEFGQ0NCRTY0MjBGNEY3QTIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODM5QTE3NkVCOUY0MTFFMEFGQ0NCRTY0MjBGNEY3QTIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4rKnrlAAAAz0lEQVR42pRRMQ6DMAysUSN169Q38AZGJJ7CQv+CsoUlTwkzW8QXWJEi1KGilKZpjAhKaauKW2Kfz7LPAWPMbgv2a6KqKmafbE6LKIrOfj34IR66rusxnrkF4FZyYq310Latruv6TgiBJEmO/qTgm7gsy5tS6jmOoxFCXPxJ0wSbGM65QqJpGh2G4eRNSvmwdcCYUnqyU8CZLtI0nYy6RgSKUeg0y0q4H3ZjHMfxwfNo5jq8ediCzQ0fH8cYu9prgTv7v4Yiz/NszfnJS4ABAI62clT4dtX/AAAAAElFTkSuQmCC{/capture}
{capture name='_smarty_debug' assign=debug_output}
{capture name='__to_top_tag' assign="to_top_tag"}<a class="jumpToTop" title="Jump back to the top">&nbsp;</a>{/capture}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
    <title>Bryn's Smarty Debug Console</title>
<style type="text/css">
{literal}
body, h1, h2, td, th, p {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0;
    text-align: left;
    color:  black;
    font-weight: bold;
    font-size: 1.2em;
 }

.heading {
    background-color: #f0c040;
    padding: 2px;
		margin: 0px;
}
.section {
    background-color: #9B410E;
    color: white;
    border-top: 1px solid black;
    padding: 2px;
		margin: 0px;
}

h2, .section {
    text-align: left;
    font-weight: bold;
}

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;
}
th {
	width: 300px;
}

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;
}
.jumpToTop {
	text-decoration:none;
	display:block;
	float: right;
	height: 16px;
	width: 16px;
	overflow: hidden;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	background-image: url({/literal}{$top_img_src}{literal});
}
.jumpToTop:hover, .jumpToTopBlock:active, .jumpToTopBlock:visited {
	text-decoration:none;
	background-image: url({/literal}{$top_img_hover_src}{literal});
}

{/literal}
</style>
</head>
<body id="debugBody">
<div id="debugTop" class="heading">
{$debug_header}
</div>

<div class="section" id="varsTop">
	<h2>assigned template variables</h2>
</div>

<table id="table_assigned_vars">
    {foreach $assigned_vars as $vars}
       <tr class="{if $vars@iteration % 2 eq 0}odd{else}even{/if}" id="anch_{$vars@key|escape:'html'}" >
       <th>{$to_top_tag}${$vars@key|escape:'html'}</th>
       <td>{$vars|debug_print_var}</td></tr>
    {/foreach}
</table>


{if !empty($template_data)}
<div id="tplTop" class="section">
	{$to_top_tag}
	<h2>included templates &amp; config files (load time in seconds)</h2>
</div>
<div>
	{foreach $template_data as $template}
	<font color=brown>{$template.name}</font>
	<span class="exectime">
		(compile {$template['compile_time']|string_format:"%.5f"}) (render {$template['render_time']|string_format:"%.5f"}) (cache {$template['cache_time']|string_format:"%.5f"})
	</span>
	<br>
	{/foreach}
</div>
{/if}

{if count($config_vars) > 0 }
<div class="section" id="cfgTop">
	<h2>assigned config file variables (outer template scope)</h2>
</div>
<div >
	<table id="table_config_vars">
		{foreach $config_vars as $vars}
		<tr class="{if $vars@iteration % 2 eq 0}odd{else}even{/if}" id="anch_cfg_{$vars@key|escape:'html'}">
			<th>{$to_top_tag}{$vars@key|escape:'html'}</th>
			<td>{$vars|debug_print_var}</td>
		</tr>
		{/foreach}
	</table>
</div>
{/if}

<img style="display: none;" id="topImg" src="{$top_img_src}"/>
<img style="display: none;" id="topImgHover" src="{$top_img_hover_src}"/>

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="http://flesler-plugins.googlecode.com/svn/trunk/jquery.scrollTo/jquery.scrollTo.js"></script>
<script type="text/javascript" language="javascript" src="https://raw.github.com/BrynM/bpmv/master/bpmv.js"></script>

</body>
</html>
{/capture}
{capture name='_smarty_debug_runtime' assign=debug_output_runtime}
<script language="javascript">
{literal}

var jumping = false;

function jumpTo ( ev ) {
	if ( !jumping ) {
		jumping = true;
		var val = false;
		if ( bpmv.obj(ev.target) ) {
			val = ev.target.value;
		} else if ( bpmv.str(ev) ) {
			val = ev;
		} else {
			val = ev.value;
		}
		if ( bpmv.str(val) ) {
			$('body').scrollTo( $(val), {
				duration : 1000,
				onAfter : function () {
					jumping = false;
					$(val).focus();
				}
			});
		}
	}
}

function jumpToKey ( ev ) {
	if ( ( ev.keyCode == 13 ) || ( ev.keyCode == 13 ) ) {
		jumpTo( ev );
	}
}

function optIcmp (a,b) {
	var aT = String( a.text ).toLowerCase(),
		 bT = String( b.text ).toLowerCase();
	if (aT > bT) {
		return 1;
	} else if (aT < bT) {
		return -1;
	} else {
		return 0
	}
}

function optcmp (a,b) {
	if (a.text > b.text) {
		return 1;
	} else if (a.text < b.text) {
		return -1;
	} else {
		return 0
	}
}

function newAlert () {
	jumpTo( '#debugTop' );
	jumping = true;
	var origHeight = $('#debugTop').css('height');
	$('#debugTop').animate({
    height: '+=30'
  }, 500, function() {
		$('#debugTop').animate({
			height: '-=30'
		}, 500, function() {
			$('#debugTop').animate({
				height: '+=30'
			}, 500, function() {
				$('#debugTop').animate({
					height: origHeight
				}, 500, function() {
					jumping = false;
					// Animation complete.
				});
				// Animation complete.
			});
			// Animation complete.
		});
    // Animation complete.
  });
}

$(document).ready( function () {
	// var selector
	$('#varJump').each( function (a,b) {
		$(b).change( jumpTo );
		$(b).keyup( jumpToKey );
		var varOpts = $(b).children( 'option' );
		varOpts.sort(optcmp);
//		varOpts.sort(optIcmp);
		$(b).empty().append( varOpts );
	});
	// back to top links
	$('.jumpToTop').each( function (a,b) {
		$(b).click( function ( ev ) {
			jumpTo( '#debugTop' );
			return false;
		});
	});
	setTimeout( newAlert, 1000 );
});

{/literal}
</script>
{/capture}
<script type="text/javascript">
		{$id = $template_name|default:''|md5}
    _smarty_console = window.open("","console{$id}","width=680,height=600,resizable,scrollbars=yes,status=1");
		if ( _smarty_console ) {
			_smarty_console.document.write("{$debug_output|escape:'javascript'}");
			// we need to write this separately so the empty windo onready event doesn't steal bindings
			_smarty_console.document.write("{$debug_output_runtime|escape:'javascript'}");
			_smarty_console.document.close();
		}
</script>

The main feature is easy navigation. There's a select box for choosing what var you want to jump to and each var has a link to return to the top. I've also made the left side columns a fixed width so you can re-size the window for better view of the values.

The images used for the links are embedded into the tpl via base64. The template also sources jQuery (hosted at Google), jQuery ScrollTo (hosted here at Github) and my own JS validation lib (BPMv also hosted here at Github). I hope to eventually leverage more of the JS end in. If you beat me to it, please leave your version here for all to share.

To use, save it as something like dSmarty.tpl and put it into your normal templates directory. Then, in PHP, set $smarty->debug_tpl = 'dSMarty.tpl'; (of course replacing "$smarty" with the var you have instanced Smarty into and replace the template name with whatever you have named it as).