Consider supporting my work by purchasing the course this tutorial is a part of i.e. VSCode Power User →
- Make sure your
Local by FlyWheelWordPress install is a custom install - Configure
xdebug.remote_autostart = 1 - Restart your site container in
Local by FlyWheelto apply new settings - Install PHP Debugger extension and add PHP Debugger configuration with an extra property for the
Listen for Xdebugsection i.e. Add this"pathMappings": {"/app/public": "${workspaceRoot}"}
Here're are some easy steps to follow to make sure you can debug WordPress in Local by FlyWheel with VSCode:
Make sure your
Local by FlyWheelWordPress 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”.
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 = 1While 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 to1(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 = 1Save the php.ini file.
Restart your site container in
Local by FlyWheelto apply new settings.
- On the left side menu, right click on your site
- Select
Restartoption to restart the site.
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
PHPand add the configuration - In the
.vscode/launch.jsonfile that was created inside theListen for Xdebugsection 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
}
]
}Now go ahead and debug your WordPress app/plugin/theme and what not.
- 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!'; ?>toheader.phpof 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 →
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.
Consider supporting my work by purchasing the course this tutorial is a part of i.e. VSCode Power User →
For more follow @MrAhmadAwais →
Peace! ✌️
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}" }