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 →
Local by FlyWheel
WordPress install is a custom installxdebug.remote_autostart = 1
Local by FlyWheel
to apply new settingsListen for Xdebug
section 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 FlyWheel
WordPress install is a custom install.
Configure
xdebug.remote_autostart = 1
.
Now in the right environment we need to configure Xdebug for that:
/PATH_WHERE_YOU_INSTALLED_WORDPRESS/conf/php/7.x.x/php.ini
[Xdebug]
sectionxdebug.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 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 = 1
Save the php.ini file.
Restart your site container in
Local by FlyWheel
to apply new settings.
Restart
option to restart the site.Let's start configuration of VSCode:
/PATH_WHERE_YOU_INSTALLED_WORDPRESS/app/public
COMMAND (⌘) + SHIFT (⇧) + D
PHP
and add the configuration.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
}
]
}
Now go ahead and debug your WordPress app/plugin/theme and what not.
<?php $true_story = 'Ahmad is cool and VScode.pro is awesome!'; ?>
to header.php
of your themeRemember 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! ✌️