How to Send WordPress Messages to the Browser Console

How to Send WordPress Messages to the Browser Console

When developing plug-ins and writing other code for WordPress, you often need to check the value of a certain variable to confirm whether or not it’s what to expect. A lot of us use a quick “echo” statement to print the variable onto the screen when the page loads. This is acceptable when it comes to a testing environment or perhaps even a small site where the message is quickly shown and removed. But it doesn’t work on a large production server that is live – very bad form indeed.

In the past, I’ve written about using error logs to debug PHP code in WordPress. While that is a fine solution, it’s definitely a bit inconvenient since you need to mess around with wp-config.php, change variables, create files, and access your site via FTP each and every time you want to check the debug output. Of course if you happen to be a professional PHP developer, you already have a full coding environment available with debug capabilities, breakpoints etc. The rest of us need a quick and easy way to check the value of PHP variables without having to resort to the clumsy method of outputting data on the screen.

Keep in mind, that even outputting to the screen only works on a page reload. If you’re performing some ajax operations without a page reload, even that won’t work. In this article, I’m going to show you how to output PHP variables to your browser console on the fly.

Outputting WordPress PHP to the Browser Console

In Chrome, you can access the developer console by pressing Ctrl+Shift+c. This will open up the developer pane and the textbased console is the very last window at the bottom with all of the messages output by JavaScript.

To send our own output to the console, we’re going to create a new function that can be called at any time later on. Open up your functions.php file and paste in the following code before the closing ?> PHP tag:

function send_to_console($debug_output) {

$cleaned_string = '';
if (!is_string($debug_output))
$debug_output = print_r($debug_output,true);

  $str_len = strlen($debug_output);
  for($i = 0; $i < $str_len; $i++) {
    $cleaned_string .= '\\x' . sprintf('%02x', ord(substr($debug_output, $i, 1)));
  }
$javascript_ouput = "<script>console.log('Debug Info: " .$cleaned_string. "');</script>";
echo $javascript_ouput;
}

This function accepts a string, cleans it by escaping every character, and then echoes a JavaScript output that sends the debug message to the console.

 

If you’re unfamiliar with how to add custom code to WordPress in this manner, take a look at my earlier tutorial on how to do this.

A large portion of this function is dedicated to making the variable palatable to JavaScript which doesn’t take well to multiple newline characters, apostrophes etc. The safest way to prevent any mishaps is to escape each and every character of the output.

Let’s take a look at this code in action. In my test example below, I hook into the “get_comment_text” filter and send the content of every comment to our custom console function:

function test_console($comment) {

send_to_console($comment);
return $comment;
}

add_filter('get_comment_text', 'test_console');

And the result is what you see below.

output in chrome console

As you can see, the console spits out whatever parameter you parse to the “send_to_console” function we created earlier. If you look at the code closely, you can see that I have included the function “is_string” to check whether or not the parameter sent is a string. If it isn’t, I use the “print_r” function with the second parameter set to “true” to convert it into a string equivalent. This is very important since otherwise WordPress will throw an error saying “Object of class WP_Error could not be converted to string”!

This handy function is easy to use and has no visual impact on your site making it great for stealth debugging.

One Reply to “How to Send WordPress Messages to the Browser Console”!

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.