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 clickOpen Configurations
- You should now see the
launch.json
file in your editor - Add
pathMappings
under the object namedListen for XDebug
, mapping/app/public
to${workspaceFolder}
Thanks to Eli Dalbey for his help with these settings.
My launch.json file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
// 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 | |
} | |
] | |
} |
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.
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!
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.
When I click open configurations, the file that opens is workspace.json. Am I missing something?
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?