The Easiest Way to Debug PHP in WordPress

Recently, I was working on some custom code within WordPress. I was trying to do a little bit of testing and troubleshooting to determine what values were available to me within the objects WordPress was returning.

<?php var_dump($some_variable); ?>

The PHP function var_dump() is great for dumping out whatever value is being stored in your variable. The only problem is it makes your page look UGLY and the formatting isn’t always easy to read.

I wanted a more elegant solution. Something like JavaScripts console.log() where I could pull up the Chrome Developer console panel. Out of the way. Not disruptive.

I remembered back a long time ago, when I used Firefox for developing, there was a Firebug extension called FirePHP that did exactly what I had in mind.

Anyway, I did a little digging, found exactly what I was looking for and it’s quite an elegant solution.

There’s a Chrome extension called PHP Console that allows you log errors from your code directly into the Chrome console panel.

First, you’ll need to download the PHP Console Chrome extension.

If you’re working in WordPress, like I am, download and install WP PHP Console plugin.

Once you’ve activated it, go to Settings > WP PHP Console. There are a few options available:

First, you’ll need to enter a password. I’ll show you where, but this password gets entered into the Chrome extension. — This is a nice little piece of security, that prevents Joe Random from viewing your output.

I checked Register PC Class. This makes it a little easier within your code to write to the console.

I also checked Show Call Stack and Short Path Names. — They seemed like smart choices.

Now, let’s test something. Within your PHP code, use

PCdebug($item);

Where $item is the name of the variable you want to look at.

Flip over to Chrome.

Click on the extension icon in the toolbar.

Enter the password that you used in the WordPress panel.

You’ll notice the icon now appears active within your toolbar. You can also expand the extension’s settings in Chrome to control your preferences and what notifications and debug errors are displayed.

Now, open your console and refresh your browser, you’ll see the data come through.

You can expand the arrow to see more details.

Since I was dealing with an Object filled with more Objects and lots of value / key pairs, this tool proved invaluable.