Prettier PHP Debug Messages

(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>";

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)

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'); = 'bsdLogger';
      var pre = document.createElement('pre');
      pre.innerHTML = obj;

So now in my template, I debug all sorts of nonsense

            <?php the_content(); ?>
            <?php pp(Array('apples','oranges'));
            <table style="border: 2px solid red;">
              <tr><td>What's this?</td><td>a table in the middle of nowhere?</td></tr>

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.

3 thoughts on “Prettier PHP Debug Messages

  1. Nice idea. It has never occurred to me to use pre tags for this. I think I might add my own debug constant, making the pp function easy to switch on and off (WP_DEBUG would probably be too powerful on a multisite install which my test server is).

    btw the pictures seem to have gone walkies.

  2. Thanks for the heads up, Mark. The images were key to what I was trying to demonstrate. I’ve got them back in now, for this post at least.

  3. Also, here’s the CSS I’ve been using for that

    #bsdLogger {
    position: absolute;
    top: 0px;
    right: 0px;
    border-left: 4px solid #bbb;
    padding: 6px;
    background: white;
    color: #444;
    z-index: 999;
    font-size: 1.25em;
    width: 400px;
    height: 800px;
    overflow: scroll;

Leave a Reply

Your email address will not be published. Required fields are marked *