Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Debug WordPress with Visual Studio Code | VSCode WordPress Debug Setup | WordPress xDebug Setup for Local by FlyWheel with VSCode | Part of the VSCode Learning Course → https://VSCode.pro

VSCode WordPress Debugging Setup: WordPress Xdebug Setup for Local by FlyWheel with VSCode


Consider supporting my work by purchasing the course this tutorial is a part of i.e. VSCode Power User

🚅 TL;DR

  • Make sure your Local by FlyWheel WordPress install is a custom install
  • Configure xdebug.remote_autostart = 1
  • Restart your site container in Local by FlyWheel to apply new settings
  • Install PHP Debugger extension and add PHP Debugger configuration with an extra property for the Listen for Xdebug section i.e. Add this "pathMappings": {"/app/public": "${workspaceRoot}"}

🚥 Detailed Tutorial

Here're are some easy steps to follow to make sure you can debug WordPress in Local by FlyWheel with VSCode:

1️⃣ Custom WordPress Install

Make sure your Local by FlyWheel WordPress install is a custom install.

  • Flywheel Local has Xdebug installed by default if you choose “Custom” instead of “Preferred” when setting up a new local environment.
  • ⚠️ You can check your already installed WP with the ”Site Setup” tab. If you can change the PHP version there, you have the “Custom” environment running and you have Xdebug installed.
  • ⚠️ If not, just export your site, import it back while creating a new site and this time choose “Custom”.

2️⃣ Configure Xdebug

Configure xdebug.remote_autostart = 1.

Now in the right environment we need to configure Xdebug for that:

  • Go to your local WordPress install path E.g. /PATH_WHERE_YOU_INSTALLED_WORDPRESS/conf/php/7.x.x/php.ini
  • Search for the [Xdebug] section
  • Add the following line in this section
xdebug.remote_autostart = 1

While only the above option is required but some 3rd party extension/plugin for local can sometimes change things so make sure in the [Xdebug] section all the following settings are set to 1 (only if your debugger is not working).

xdebug.scream = 1
xdebug.remote_enable = 1
xdebug.show_local_vars = 1
xdebug.remote_autostart = 1
xdebug.remote_connect_back = 1

Save the php.ini file.

3️⃣ Restart The Site

Restart your site container in Local by FlyWheel to apply new settings.

  • On the left side menu, right click on your site
  • Select Restart option to restart the site.

Restart GIF

4️⃣ Visual Studio Code Configuration

Let's start configuration of VSCode:

  • First of all, install PHP Debug extension
  • Open your Local WordPress site project folder in VSCode. You should open the entire WordPress site folder i.e. /PATH_WHERE_YOU_INSTALLED_WORDPRESS/app/public
  • Go to the Debug view in VSCode COMMAND (⌘) + SHIFT (⇧) + D
  • Click “Add configuration” from the top toolbar
  • Select PHP and add the configuration
  • In the .vscode/launch.json file that was created inside the Listen for Xdebug section add "pathMappings": {"/app/public": "${workspaceRoot}"}

In short, your debug launch.json file will look like this:

{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Listen for Xdebug",
			"type": "php",
			"request": "launch",
			"port": 9000,
			"pathMappings": {
				"/app/public": "${workspaceRoot}"
			}
		},
		{
			"name": "Launch currently open script",
			"type": "php",
			"request": "launch",
			"program": "${file}",
			"cwd": "${fileDirname}",
			"port": 9000
		}
	]
}

5️⃣ Debug Your WordPress

Now go ahead and debug your WordPress app/plugin/theme and what not.

WP VSCode Debug GIF

  • After all this, click the play button next to “Listen for Xdebug” in the top debug bar
  • Create a breakpoint in your PHP code e.g. add this line and a breakpoint<?php $true_story = 'Ahmad is cool and VScode.pro is awesome!'; ?> to header.php of your theme
  • Browse your site and VSCode should pop up showing all your debug info

Remember to stop debugging process when you stop working. A good theme helps with that, install 🦄 Shades of Purple →

🔥 Extra Plugin (optional)

You can also install a local plugin called local-addon-xdebug-control for UI based control of Xdebug settings in your Local by FlyWheel software.

Make sure everything is set to yes for a sane debugging experience.

Add-on

Consider supporting my work by purchasing the course this tutorial is a part of i.e. VSCode Power User

For more follow @MrAhmadAwais

Peace! ✌️

@jg314

This comment has been minimized.

Copy link

commented Aug 30, 2018

Thanks for providing a base to work from here. I ended up going with the json below to make the pathMappings work for me:

"pathMappings": { "/app/public": "${workspaceRoot}" }

@ahmadawais

This comment has been minimized.

Copy link
Owner Author

commented Sep 4, 2018

@jg314 thanks for that. You are right this makes it easier. Check out the up to date tutorial now.

@dkeesey

This comment has been minimized.

Copy link

commented Jan 15, 2019

Hi Ahmad,

I bought your course and have been working through it. I was very attracted to getting XDebug working in VS Code, with Local/WP/PHP.

When I use your protocol, I get an error that port 9000 is already in use. Looks like a conflict with the PHP Debug extension by Felix Becker.

If I change the port to 9001, in php.ini (or Local "add-on" for xdebug you list above) and the launch.json, then I lose the port conflict error message, but my breakpoints in "header.php" never get hit.

Am I missing something?

@chasen-bettinger

This comment has been minimized.

Copy link

commented Jan 24, 2019

This is not working for me. I have done everything noted in the tutorial but code will not break.

@ahmadawais

This comment has been minimized.

Copy link
Owner Author

commented Apr 3, 2019

@dkeesey seems to be working fine for me. Let's discuss this in Slack channel and figure things out on this one. Once you log in you can send yourself an invite through this link → https://courses.ahmadawais.com/community/

For public readers who've not yet bought my VSCode.pro course, if you can then do so to support my work, if you can't then you'll find whatever fix we end up with in the form of an update at this link → https://github.com/ahmadawais/VSCode-Tips-Tricks/blob/master/videos/PHP%2BWordPress-Setup/WordPress-Debug.md.

Looking forward, peace! ✌️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.