Debugging WordPress with Visual Studio Code (VS Code)
Note: This tutorial is assuming that you already have a a WordPress install running on your and Visual Studio Code installed
Since the WordPress application code is running in Apache and we’re not launching it using Visual Studio Code itself we need to ‘attach’ the debugger to the PHP process. This is done using Xdebug a “PHP extension for powerful debugging”.
The best way to install XDebug is by following these steps to use their custom installation wizard:
Note: There are other ways of getting the phpinfo() output but the vary on different server configurations. If you know a way that is easier on your machine then you can skip to step 3.
Create a file phpinfo.php in you htdocs or other apache accessible directory with the following content:
<?php phpinfo(); ?>;
Open the file in a browser (for example http://localhost/phpinfo.php) then copy and paste the text by pressing (Ctrl/Command + A) (Ctrl/Command + C).
Now you create breakpoints in can press F5 and VS Code will attach to XDebug and will stop on breakpoints. For example in the following screenshot I have put a breakpoint in the functions.php in the twentyseventeen default WordPress theme.
Giving you a fully featured debugging experience in PHP!