How To Debug Wordpress Using XDebug and Visual Studio Code

Are you writing a Wordpress Theme, Plugin, or simply something is not working anymore ? Let’s fix it.
Using print_r, echo and dd can be very usefull, but it has its own limits….

To do something more serious and to understand the logic and the flow behind a software you need a debugger.

XDebug is a very good choice and fortunately is very well integrated with VSCode, PhpStorm and others…

First you need to install it. Go here: https://xdebug.org/docs/install

and follow your installation instructions depending on you OS and your PHP version. To find you php version just type php -v on your shell. If XDebug is already installed it should popup in the version informations:

PHP 8.1.3 (cli) (built: Feb 21 2022 14:48:42) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.3, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.3, Copyright (c), by Zend Technologies
    with Xdebug v3.1.2, Copyright (c) 2002-2021, by Derick Rethans

In my system, ubuntu based, is already installed… but if you use an ubuntu based distribution the installation is easy as:

$ apt install php-xdebug

Now let’s configure VSCode to support XDebug.

Let’s go to our Wordpress Directory and open VSCode there

~ $ cd WordpressDir
~/WordpressDir $ code .