(prettier than what I’ve been doing, at least)
Hmm, let’s see. Trying to figure out a bug in my WordPress template. I need to know what the current post looks like. So I’ll go to the template and put in
which produces
That’s helpful, but a little hard to read. So let’s create a Pretty Print function and put some preformat tags around the output.
(in my theme’s functions.php)
if (! function_exists('pp')) {
function pp($msg) {
echo "<" . "pre>" . print_r($msg,true) . "<" . "/pre>";
}
} |
if (! function_exists('pp')) {
function pp($msg) {
echo "<" . "pre>" . print_r($msg,true) . "<" . "/pre>";
}
}
And so now if I call this in my template
we get
A little better. So that’s been my Pretty Print function for quite a while. But sometimes the debug messages are unreadable due to their position in the template where I call pp(). Maybe there are theme colors hiding the messages, or possibly an overflow: hidden CSS rule blocks some of them.
So I decided to make another version which will collect all of the calls to pp() and put them in one visible spot. It will allow scrolling, and CSS styling.
(in my theme’s functions.php)
<?php
if (!function_exists('pp')) {
function pp($obj) {
$data = json_encode(print_r($obj,true));
?>
<script type="text/javascript">
var obj = <?php echo $data; ?>;
var logger = document.getElementById('bsdLogger');
if (!logger) {
logger = document.createElement('div');
logger.id = 'bsdLogger';
document.body.appendChild(logger);
}
////console.log(obj);
var pre = document.createElement('pre');
pre.innerHTML = obj;
logger.appendChild(pre);
</script>
<?php
}
} |
<?php
if (!function_exists('pp')) {
function pp($obj) {
$data = json_encode(print_r($obj,true));
?>
<script type="text/javascript">
var obj = <?php echo $data; ?>;
var logger = document.getElementById('bsdLogger');
if (!logger) {
logger = document.createElement('div');
logger.id = 'bsdLogger';
document.body.appendChild(logger);
}
////console.log(obj);
var pre = document.createElement('pre');
pre.innerHTML = obj;
logger.appendChild(pre);
</script>
<?php
}
}
So now in my template, I debug all sorts of nonsense
<?php the_content(); ?>
<?php pp(Array('apples','oranges'));
pp('HAHA');
?>
<table style="border: 2px solid red;">
<tr><td>What's this?</td><td>a table in the middle of nowhere?</td></tr>
</table>
<?php
pp($post);
?> |
<?php the_content(); ?>
<?php pp(Array('apples','oranges'));
pp('HAHA');
?>
<table style="border: 2px solid red;">
<tr><td>What's this?</td><td>a table in the middle of nowhere?</td></tr>
</table>
<?php
pp($post);
?>
Mix with some CSS to taste and you get
Notice that even though there’s a random table happening between debug calls, the debug messages still gather into their designated spot.
I think I’ll see how that suits me for a while. True, it obscures part of the content, but if I’m asking for a debug message in the first place, that’s primarily what I want to see. When I remove the pp() calls in the code, the message box goes away again.
If there are better ways of doing this, please let me know.
