Every once in a while I wish to still use the website whilst still debugging.
This quick drop in code will help you produce that effect with icons to hide and expand the debug pane.
1) Copy this into the area wish to debug. Must be within a <body></body> rendering of the website.
2) Rename VARNAME with the variable you wish to debug e.g. $_SERVER
$debug_out = "<div id=\"debug-pane\" style=\"border : solid 2px #f00; background : #000000; color : #fff; padding : 4px; width : 98%; height : 200px; overflow : auto; position: fixed; z-index: 9999; bottom: 0;\">";
$debug_out .= "<div style=\"background:red; color:#00; overflow : auto; position: fixed; z-index: 9999; \">";
$debug_out .= "<a href=\"#\" onclick=\"javascript:document.getElementById('debug-pane').style.display = 'none'; return false;\" style=\"color:#fff !important; text-decoration:none;\">[x] Hide debug </a><br />";
$debug_out .= "<a href=\"#\" onclick=\"javascript:document.getElementById('debug-pane').style.height = '90%'; return false;\" style=\"color:#fff !important; text-decoration:none;\">[x] Full screen </a>";
$debug_out .= "</div>";
$debug_out .= "<pre id=\"debug-contents\" style=\"margin-left:250px\">";
$debug_out .= "<strong><u>VARNAME</u></strong>\n";
$debug_out .= print_r(VARNAME, TRUE)."\n";
$debug_out .= "</pre>";
$debug_out .= "</div>";
echo $debug_out;
