Roots Discourse

A Sage 9 + ACF debugging technique

Thought I would share a debugging technique that’s working out well for me at the moment. I’ve never had any successes getting Xdebug and VS Code to play nicely but this technique also covers Advanced Custom Fields too.

The goal is here is to move PHP/Xdebug errors into Chrome’s dev tools console, as well as returning all available controller data (including WP_Post data) and all available ACF field data, also within the console.

In the below screenshot, you’ll see two debug entries in the console. The top entry is all of the controller data being passed to the template. The bottom entry is all of field data for the given page.

From here you can drill down into any of the variables being passed by the controller or any field groups from ACF:

Method

  1. Install the Chrome extension PHP Console
  2. Install the WordPress plugin WP PHP Console on your site
  3. Active the WP PHP Console plugin and navigate to Settings -> WP PHP Console. You’ll need to enter a password (you’ll use this later to authenticate the Chrome Extension) and then make sure to check the Register PC Class checkbox. Finally, Save Changes
  4. Somewhere in your theme (I’d recommend your header as this will appear on every page) you need to add the following:

.

@php
if ($_SERVER['WP_ENV'] == 'development') {
  $controller = new \Sober\Controller\Module\Debugger(get_defined_vars(), 'Debugger');
  $fields = get_fields();
  PC::debug($controller);
  PC::debug($fields);
}
@endphp

Quick explanation of the above. Firstly, a quick check that we’re in the development environment in case this gets left in when deploying to production. We’re then creating two variables, one that leverages the controller’s get_defined_vars function and one that stores all ACF field data using ACF’s get_fields function. We then pass that to the WP PHP Console plugin via PC::debug($debug).

  1. Now we just need to visit your dev URL, click the padlock icon in the toolbar (from the Chrome extension) and enter the password you added to the plugin’s settings page
  2. Reload the page and check out your console!

I’ve found this to be really useful. When writing controller methods, I can see all my field data and drill down into any arrays that are passed by ACF. This massively reducing chances of typos in fields names or needing to either look up what ACF returns via the docs or by var_dumping as I go. Then the controller data is extremely useful when writing views and debugging any controller issues. As a bonus, we also remove any errors from being displayed on the page itself and instead these are also moved to the console. This ensures they are always fully readable and not obscured by any page elements (fixed headers, narrow containers etc.).

Hope that’s of some use to anyone and let me know if anything isn’t clear.

9 Likes

Strange. I use Felix Becker’s Php Debug Extension with VSCode and haven’t had any problems.

Still, I like your setup a lot. The collapsible nests in the debug objects is always useful.

1 Like

It’s 100% user error on my behalf failing to set up XDebug, that much I know for sure! Could you share your launch.json?

Either way, this set up has worked out really well for me recently :slight_smile:

Thanks for sharing! For me the copy/paste code worked only in header.blade.php, but not footer.blade.php.

Thanks for trying. I actually only use it in my header so good to know :slight_smile:

I’ll update the post.

I’ve gotten xdebug working with trellis and vscode… Trellis + Xdebug + Vscode - local development

@nathobson thanks for this, it is what I was looking for.

I saw that is an 8 months topic, is it still an ok solution?

there reason why I am asking, it is because I receive these 2 errors:

Symfony\Component\Debug\Exception\FatalThrowableError Class 'Sober\Controller\Module\Debugger' not found

ErrorException Class 'Sober\Controller\Module\Debugger' not found

this is my composer.json

any thoughts how I can fix this (if it is a valid solution to debug)?

thanks

1 Like

@mattia I encountered the same problem and the solution for me was to adjust the path:

$controller = new \Sober\Controller\Blade\Debugger(get_defined_vars(), ‘Debugger’);