Xdebug in Visual Code Studio with Local by Flywheel

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 27 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 29 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 30 in /home/customer/www/salferrarello.com/public_html/wp-content/plugins/gistpress/includes/class-gistpress.php on line 466

I’ve been using Local by Flywheel for my local WordPress development and I wanted to use Xdebug with Visual Code Studio with it.

Note: I’m running this on a Mac, your experience may vary if you’re using a Windows machine.

Local by Flywheel Setup

It is important that your site is setup as a Custom site (rather than “Preferred”).

Visual Code Studio Setup

Click the gear in the bottom left corner
Choose Extensions from the menu that opens
In the Search Extensions in Marketplace search box type PHP Debug
Click PHP Debug by Felix Becker from the dropdown
Click Install
Click Reload
Go to the Debug drop down menu along the top of the screen and click Open Configurations
You should now see the launch.json file in your editor
Add pathMappings under the object named Listen for XDebug, mapping /app/public to ${workspaceFolder}

Thanks to Eli Dalbey for his help with these settings.

My launch.json file

	{
	// 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",

	// See https://salferrarello.com/xdebug-in-visual-code-studio-with-local-by-flywheel/
	"pathMappings": {
	// Map path within Local by Flywheel (i.e. after you SSH in) (/app/public)
	// to the path of the folder opened in VS Code ${workspaceFolder}
	"/app/public": "${workspaceFolder}",
	},

	"port": 9000
	},
	{
	"name": "Launch currently open script",
	"type": "php",
	"request": "launch",
	"program": "${file}",
	"cwd": "${fileDirname}",
	"port": 9000
	}
	]
	}

view raw launch hosted with ❤ by GitHub

Chrome Setup

You need to add the URL parameter ?XDEBUG_SESSION_START to your URL to trigger Xdebug. Alternatively, you can use the Xdebug helper Chrome Extension to automatically send the information to trigger Xdebug.

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.

Comments

Eli Dalbey says

September 17, 2018 at 9:07 am
The last step gave me an error when I copy and pasted it. Believe it’s because it has left and right quotations in it.

I pasted the update below. VScode hollered that server+local source routes had been deprecated also. I put the updated version pathMappings config in here.

Awesome article Sal!
```
"serverSourceRoot": "/app/public", // Path within Local by Flywheel (i.e. after you SSH in)
"localSourceRoot": "${workspaceRoot}",

// New version
"pathMappings": {
    "/app/public": "${workspaceRoot}",
}
```
- Sal Ferrarello says
  
  September 18, 2018 at 9:17 am
  
  Thanks Eli,
  
  I’ve removed the example with the left/right quotations and updated the configuration to use pathMappings as you suggested – thank you.
  
  Your notes also helped me discover that ${workspaceRoot} has been deprecated and the ${workspaceFolder} is the preferred variable (see Visual Code Studio Variables Reference) so I’ve made that change, as well.
  
  Thanks again.
  
Kyle Laverty says

October 10, 2018 at 9:51 am

When I click open configurations, the file that opens is workspace.json. Am I missing something?

- Sal Ferrarello says
  
  October 10, 2018 at 1:58 pm
  
  Hi Kyle,
  
  Just to clarify, you are opening the Debug dropdown and clicking Open Configurations from the dropdown menu, correct?
  
  When I do this on my Mac running Visual Studio Code v1.28.0 with extension PHP Debug v1.12.6, I am placed in the file launch.json.
  
  The Visual Studio Code website has more information on the launch.json file.
  
  Is it possible you have another extension running that is modifying the behavior in your copy of Visual Code Studio?