WordPress debugging with XDebug on Flywheel Local & VSCode

flywheel-local-xdebug-vscode.md

Flywheel Local configuration

Flywheel Local has XDebug installed by default if you choose “Custom” instead of “Preferred” when setting up a new local environment. If you don’t know which your current site is running, you can detect it by going to ”Site Setup” tab. If you can change the PHP version there, you have the “Custom” environment running. If not, just export your site, import it back and choose “Custom”.

Now that we have the right environment, remember what PHP version you are running, open the right PHP settings file (for example /Local Sites/my_site/conf/php/7.0.3/php.ini) and add these lines in the [Xdebug] section:

xdebug.remote_enable=1
xdebug.remote_autostart=1

Save the php.ini and restart your site container in Flywheel to apply new settings.

Visual Studio Code configuration

Install PHP Debug extension to VSC from the Extensions tab https://github.com/felixfbecker/vscode-php-debug

Open your Local site project folder if it’s not open yet. Go to the Debug tab, click “Add configuration” from the top toolbar, select “PHP” and add your project root directories to “Listen for XDebug” section in launch.json:

{
	"name": "Listen for XDebug",
	"type": "php",
	"request": "launch",
	"port": 9000,
	"pathMappings": {
		"/app": "${workspaceRoot}/app",
	},
}

You can also set it on your User Settings, so you don’t have to do it for every workspace separately. Just open User Settings and add this (and restart VSCode after saving):

"launch": {
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Listen for XDebug",
			"type": "php",
			"request": "launch",
			"port": 9000,
			"pathMappings": {
				"/app": "${workspaceRoot}/app",
			},
		},
		{
			"name": "Launch currently open script",
			"type": "php",
			"request": "launch",
			"program": "${file}",
			"cwd": "${fileDirname}",
			"port": 9000
		}
	]
}

After that, click the play button next to “Listen for XDebug” in the top bar, do something in your code that leads to PHP error, load the site in your browser and VSCode should pop up showing the error.

Remember to stop debugging process when you stop working, running it on two local sites at the same time seems to result in weird errors and overall slowiness.