Debugs an simple array/object on html

debug.css

.debug {
	background: #EEE;
	border-bottom:1px solid #DDD;
	margin: 0 1em;
	cursor:pointer;
}

.debug .title {
	background:#AAA;
	color:#FFF;
	font-weight:bold;
	padding-left:.5em;
}

.debug pre {
	margin: .5em;
	font-size:1em;
}

.debug pre ol {
	margin-left: 2.5em;
}
.debug pre ol li {
	font-family:Monaco;
	font-size:.85em;
	background:#FFF;
	cursor:auto;
}

.debug pre ol li.odd {
	background:#F5F5FF;
}

debug.js

;(function($){
  $.fn.preIt = function() {
    $(this).find('pre').each(function(){
      var text = $(this).html().split('\n');
      var new_text = ''
      $.each(text, function(){
        new_text = new_text + '<li>' + this + '</li>'
      })
      $(this).html('<ol class="lines">'+new_text+'</ol>')
      $(this).find('.lines li:odd').addClass('odd')
    }).hide()
    $(this).find('.title').click(function(){
      $(this).parent().find('pre').toggle()
    })
  }
})(jQuery);

jQuery(function(){
  $('.debug').preIt();
})

page.php

<?php
    if (isset($_GET['debbug'])) {
        print "<div class='debug'><div class='title'>Easy title for my debug var</div><pre>"; print_r($my_var); print "</pre></div>";
    }
?>